如何为单个React应用配置多入口生成不同Webpack构建产物？

不用Module Federation（这玩意儿是给微前端模块共享用的，完全没必要在这里复杂化），直接用Webpack的多入口配置就能轻松实现你的需求，步骤如下：

1. 配置多入口起点 #

在你的webpack.config.js里，把entry从字符串改成对象，每个键对应一个入口文件：

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    secondary: './src/index2.js'
  },
  output: {
    filename: '[name].[contenthash].js', // 用[name]自动区分两个产物的文件名
    path: path.resolve(__dirname, 'dist'),
    clean: true // 构建前清空dist目录
  }
};

执行npm run build后，dist目录里会生成两个独立的bundle文件（比如main.xxxx.js和secondary.xxxx.js）。

2. 配置HTML注入（按需选择） #

如果需要把两个bundle分别注入到不同的HTML文件，使用html-webpack-plugin的多实例配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 上面的entry和output配置
  plugins: [
    // 为main入口生成index.html，只注入main的bundle
    new HtmlWebpackPlugin({
      filename: 'index.html',
      chunks: ['main']
    }),
    // 为secondary入口生成index2.html，只注入secondary的bundle
    new HtmlWebpackPlugin({
      filename: 'index2.html',
      chunks: ['secondary']
    })
  ]
};

如果想把两个bundle都注入到同一个index.html里，只需要把其中一个HtmlWebpackPlugin的chunks设为['main', 'secondary']即可。

为什么不用Module Federation？ #

Module Federation的核心是实现跨应用的模块共享，适合微前端场景。你的需求只是单应用内生成两个独立构建产物，用多入口配置是最直接、最轻量的方案，完全没必要引入Module Federation增加复杂度。

内容的提问来源于stack exchange，提问作者Ashish