在跟目录下新建web目录
在web目录下新建 webpack.config.js 和index.html
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: path.resolve(__dirname, './../index.web.js'),output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',},resolve: {alias: {'react-native$': 'react-native-web', // 将 react-native 替换为 react-native-web},extensions: ['.web.js', '.js', '.jsx'], // 支持 .web.js 文件},module: {rules: [{test: /\.(js|jsx)$/, // 匹配 .js 和 .jsx 文件exclude: /node_modules\/(?!react-navigation|react-navigation-stack)/, // 只处理 react-navigation 模块use: {loader: 'babel-loader', // 使用 Babel 加载器options: {presets: ['@babel/preset-env', '@babel/preset-react'], // 使用 Babel 的预设},},},{test: /\.(png|jpe?g|gif|svg)$/i, // 匹配图片文件use: [{loader: 'file-loader', // 使用 file-loaderoptions: {esModule: false, // 禁用 ES 模块，直接返回字符串路径name: '[name].[ext]', // 输出文件名格式outputPath: 'images', // 输出目录publicPath: '/images', // 引用路径为 /images/xxx.png（关键！）},},],},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, './index.html'),}),],devServer: {static: {directory: path.join(__dirname, 'dist'),},port: 3000,},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><title>React App</title><script>var __DEV__ = falsewindow.addEventListener('load', function() {});</script><style>/* These styles make the body full-height */html, body { height: 100%; }/* These styles disable body scrolling if you are using <ScrollView> */body { overflow: hidden; }/* These styles make the root element full-height */#root { display:flex; height:100%;</style>
</head><body>
<noscript>You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
在跟目录下新建index.web.js
import { AppRegistry } from 'react-native';
import App from './appFace';
import { name as appName } from './app.json';AppRegistry.registerComponent(appName, () => App);// 启动 Web 应用
AppRegistry.runApplication(appName, {rootTag: document.getElementById('root'),
});
在bable.config.js 中新增插件
module.exports = {presets: ['module:metro-react-native-babel-preset','@babel/preset-env',// 转换现代 JavaScript 语法'@babel/preset-react', // 转换 JSX'@babel/preset-flow', // 转换 Flow 类型注解],plugins: ['react-native-web',['module-resolver',{alias: {'^react-native$': 'react-native-web',},},]]
};
package.json
"web": "webpack serve --mode=development --config ./web/webpack.config.js","build": "webpack --mode=production --config ./web/webpack.config.js",
新增依赖dependencies
"@babel/preset-env": "^7.26.9","@babel/preset-flow": "^7.25.9","@babel/preset-react": "^7.26.3","babel-plugin-react-native-web": "^0.19.13","file-loader": "^6.2.0","react": "18.1.0","react-dom": "18","react-native": "0.70.12","react-native-web": "^0.19.13",
在devDependencies 新增依赖
"@babel/core": "^7.26.10","babel-loader": "^10.0.0",
"babel-plugin-module-resolver": "^5.0.2",
"html-webpack-plugin": "^5.6.3",
"react-test-renderer": "18.1.0",
"webpack": "^5.98.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.0"
