如何使用Webpack为不同的网站构建两个单独的捆绑包

问题描述

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

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

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

要考虑的一件事是，我需要客户端捆绑包的名称保持固定（以便可以将其作为脚本标签包括在内）。但是我可能希望将主站点的捆绑包分成几个不同的延迟加载块。

在搜索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'
    }),]
  
};

解决方法

前言-我无法在我的计算机上对此进行测试，所以这是我的最佳猜测。

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。

reactjs reactjs webpack webpack webpack