react-native-web如何配置webpack

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react react-native-web

const path = require('path');

module.exports = {
  entry: './index.js', // 入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录路径
    filename: 'bundle.js' // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web', // 替换 react-native 为 react-native-web
    },
    extensions: ['.web.js', '.js'], // 支持的文件扩展名
  },
};

import { AppRegistry } from 'react-native';
import App from './App';

// 注册应用程序
AppRegistry.registerComponent('App', () => App);

// 启动应用程序
AppRegistry.runApplication('App', {
  rootTag: document.getElementById('root'),
});

"scripts": {
  "start": "webpack --mode development",
  "build": "webpack --mode production"
}

npm start