对于webpack的基础知识，可先参考：https://www.jianshu.com/p/229ada907eaa
示例
https://github.com/zrfzhouruifeng163/RNWebAppDemo.git
如何运行
使用vscode 打开项目，然后依次执行命令：
npm install
npm run webBuild
npm run server
最终浏览器会打开一个页面，如下：
image.png
表示成功。
创建项目
react-native init RNToWebApp
根目录建立web文件夹，web下建立webpack.config.js, .babelrc 和public目录，
public目录下建立index.html。
image.png
配置package.json
{
"name": "RNWebApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"webBuild": "cd web && webpack",
"server": "webpack-dev-server --config web/webpack.config.js --port 8090 --open "
},
"dependencies": {
"@babel/runtime": "^7.7.4",
"react": "^16.12.0",
"react-art": "^16.12.0",
"react-dom": "^16.12.0",
"react-native": "^0.61.5",
"react-native-web": "^0.11.7"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-preset-react-native": "^4.0.1",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"jest": "^24.9.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"metro-react-native-babel-preset": "^0.57.0",
"style-loader": "^1.0.1",
"url-loader": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"jest": {
"preset": "react-native"
}
}
然后执行命令： npm install.
建议不要对其中的版本做修改，以免运行不正常。
webpack.config.js
const webpack = require('webpack')
const path = require('path');
const appDirectory = path.resolve(__dirname, '../')
const babelLoaderConfiguration = {
test: /(\.jsx|\.js)$/,
include: [
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'index.web.js'),
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: false,
presets: ["@babel/preset-env", "@babel/preset-react", "module:metro-react-native-babel-preset"]
},
},
}
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
// limit:1,
// name: '/imgs/[name].[ext]',
},
},
}
const htmlLoaderConfiguration = {
test: /\.html$/,
use: {
loader: 'html-loader'
}
}
const cssLoaderConfiguration = {
test: /\.css|\.less$/,
use: ['style-loader',
'css-loader'],
}
module.exports = {
mode: 'development',
entry: path.resolve(appDirectory, 'index.web.js'),
devtool: 'eval-source-map',
output: {
filename: '[name].bundle.js',
path: path.resolve(appDirectory, './web/public'),
},
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
inline: true,
hot: true,
progress: true,
},
module: {
rules: [
babelLoaderConfiguration,
cssLoaderConfiguration,
imageLoaderConfiguration,
htmlLoaderConfiguration,
]
},
plugins: [
// new webpack.HotModuleReplacementPlugin(),
],
resolve: {
extensions: ['.web.js', '.js'],
alias: {
'react-native$': 'react-native-web',
},
},
}
index.html
注意src="main.bundle.js",要与webpack.config.js中output属性的名字一样，表示该index引用的是那个生成的文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root' style="position:absolute;width:100%;height:100%;background:#AAAAAA">
</div>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
index.web.js
web版本的入口文件
import { AppRegistry } from 'react-native';
import App from './src/pages/App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
initialProps: {},
rootTag: document.getElementById('root')
});
其中的App：
import React,{Component} from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';
class App extends Component{
render(){
return(
<View>
<Text style={styles.sectionTitle}>dd111ee11e33eddd44ddd33额d</Text>
</View>
);
}
}
const styles = StyleSheet.create({
sectionTitle: {
fontSize: 24,
},
});
export default App;
注意还有个.babelrc文件
{
"presets": [
"module:metro-react-native-babel-preset"
],
"plugins": [
[
"./plugins/babel-plugin-transform-shadow"
]
]
}
网友评论