reactjs - 如何使用 webpack 为不同的网站构建两个独立的包

Question

我有一个使用 React 构建的项目，其中包含我使用 webpack 打包到我自己网站的 mysitebundle.js 中的一堆组件。

我想提供我的一小部分组件以供第 3 方客户端站点使用。我会使用 webpack 从相同的代码库制作一个(较小的)包 clientsitebundle.js。我自己的站点有一个App组件，它是入口点；客户端代码将有一个 ClientComponent 组件，这将是它的入口点。

我不确定如何最好地设置它。我可以设想设置两个完全独立的 webpack 配置文件 - 是否有更简洁的方法来拥有一个 webpack 配置，当我运行 npm run build 时会吐出两个 .js 文件？还是有更好的方式来组织 React 代码？

需要考虑的一件事是，我需要客户端包的名称保持固定(以便它可以作为脚本标记包含在内)。但我可能希望将我的主站点的包拆分成几个不同的延迟加载 block 。

在搜索 stackoverflow 寻求帮助时，我看到了很多关于代码拆分的问题，但我认为这不是我要找的。如果我不正确，我深表歉意 - 我是 webpack 的相对初学者。感谢您的帮助。

编辑:这里是评论者建议的 webpack:

module.exports = {
  entry: {
    mysite : ['babel-polyfill', './src/site/index.js']
  },
  output: {
    path: path.join(__dirname, outputDirectory),    
    filename: 'bundle.js'
  },
  module: {
    rules: [//css, js rules...]
  },
  
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './src/site/static/index.html'
    }),
    
  ]
  
};

Answer 1

前言 - 我无法在我的机器上测试它，所以这是我最好的猜测。

Webpack 支持具有不同入口点的多个包。你可以尝试这样的事情:

module.exports = {
    entry: {
        main: "./your/path/to/your/main/site",
        client: "./path/to/ClientComponent.js"
    },
    output: {
        path: "./path/to/desired/dist",
        filename: "[name]-bundle.js"
    }
};

这会给你两个文件，main-bundle.js 和 client-bundle.js。