利用Webpack构建React Native for Web

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: './index.web.js', // 指定Web入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.web.js' // 输出文件名
  },
  resolve: {
    extensions: ['.web.js', '.js', '.json'] // 自动添加文件扩展名
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // 使用Babel转译JSX和ES6
          options: {
            presets: ['react-native'], // 指定Babel预设
            plugins: ['transform-decorators-legacy', 'transform-class-properties'] // 启用Babel插件
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development') // 设置环境变量
      }
    })
  ]
};

这个配置文件定义了Webpack的基本设置，用于将React Native组件编译为可在Web浏览器中运行的代码。它指定了入口文件、输出配置、模块加载器和插件。这为开发者提供了一个清晰的示例，说明如何为React Native项目配置Webpack。