Webpack 中具有多个供应商捆绑包的多个入口点答案

【问题标题】：Multiple Entry Points with Multiple Vendor Bundles in WebpackWebpack 中具有多个供应商捆绑包的多个入口点
【发布时间】：2018-05-21 17:45:08
【问题描述】：

我有几个“单页应用程序”需要在单个总体应用程序中并排运行。为此，我使用 webpack 来触发 jsx 和 scss 的转译，捆绑生成的 css 和 js，并拆分我们编写的应用程序代码和来自第三方来源的应用程序代码。

不幸的是，webpack 似乎对如何捆绑供应商文件非常固执——它想为我的所有入口点创建一个大型供应商捆绑包，而不是像这样更合理的拆分：

- app1
    - app1.bundle.js
    - app1.vendor.bundle.js
    - app1.bundle.css
- app2
    - app2.bundle.js
    - app2.vendor.bundle.js
    - app2.bundle.css

我特别不想遇到我将一些大型（例如，JQuery）库导入应用程序 2 并将其包含在供应商包中以供其他不需要它的应用程序的情况。我们的许多页面使用完全不同的前端堆栈，如果我为整个 Web 应用程序使用单个 vendor.js 文件，我会很快看到这种膨胀失控。

我也希望自动完成 - webpack 应该能够扫描我的入口点，检测正在导入哪些第三方库（可能通过引用节点模块？），并且只包含那些在该应用程序的供应商文件。我不想将第三方依赖项添加到我的 webpack 配置中的数组中和 require() 他们在我的入口点。这似乎很多余。

我同意app1.vendor.bundle.js 和app2.vendor.bundle.js 有重叠（即，如果它们都导入 React，它们都可以在各自的包中包含该代码）。我认为这比处理在我网站上运行的某些应用程序子集之间共享的公共文件要容易得多。

有什么方法可以在 webpack 中单独执行此操作，还是我必须编写某种自定义解决方案来围绕它来执行此操作？我见过的所有示例都让人们为他们的整个应用程序编译一个单一的总体供应商包。

【问题讨论】：

你发现了吗？ :)
以编程方式构建多个 Webpack 配置（它们只是对象）并将它们传递给 Webpack？

标签： javascript node.js webpack

【解决方案1】：

值得注意的是，webpack 支持一系列配置。在这种情况下，你会这样写：

webpack.config.js

module.exports = [
  {...}, // Your first config
  {...}, // Your second config
]

使用这种方法，您可以为每页编写一个配置。

要生成条目 HTML，您可以使用 html-webpack-plugin 或 mini-html-webpack-plugin 之类的内容。

如果您以其他方式将包注入 HTML，那么提取清单（webpack-manifest-plugin、webpack-assets-manifest）很有用。这为您提供了一个 JSON，然后您可以使用它在您的主机环境中注入您需要的 HTML。

【讨论】：

【解决方案2】：

也许您可以为 每个应用程序 使用一个 webpack.config.js，并将入口点设置为该应用程序。（即使他们共享相同的node_modules）

像这样：

config/
  base.webpack.config.js
  app1.webpack.config.js
  app2.webpack.config.js
  ...
build.sh

base.webpack.config.js

// your main webpack config with `splitChunks` config etc.
module.exports = {
  ...
  optimization: {
    splitChunks: {
      minChunks: ...,
      cacheGroups: {
        vendors: { ... }
      }
    }
  }
};

app1.webpack.config.js

// config for app1
const baseConfig = require('./base.webpack.config');

module.exports = {
  ...baseConfig,
  entry: {
    app: '../src/app1.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '..', 'dist/app1')
  }
};

build.sh

#!/bin/sh
# build app1
webpack --config config/app1.webpack.config.js

# build app2
webpack --config config/app2.webpack.config.js

【讨论】：

【解决方案3】：

我可能有你要找的东西（基于 webpack 5）...

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // minifies your CSS
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        'app1': './src/app1.js',
        'app2': './src/app2.js'
    },
    output: {
        filename: '[name].bundle.[contenthash].js', // <-- NAME WILL MATCH YOUR ENTRY POINTS, contenthash generates a hash to prevent any  caching on an updated version of your file
        path: path.resolve(__dirname, './dist'),
        publicPath: ''
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].bundle.[contenthash].css' // <-- SAME HERE FOR CSS
        }),
        new CleanWebpackPlugin() <-- clean the /dist folder, avoid ending up with X versions of your files because of a new hashed version generated with the use of [contenthash] in your filenames
    ]
};
```

【讨论】：