javascript - Webpack 4 和 splitChunks - 将所有 vendor 代码移至单独的 block (动态导入的模块除外)

Question

我有一个如下所示的项目:

• app.js
• module1.js
• 节点模块

module1 通过 import(/* webpackChunkName: 'module1' */'@path') 在 app.js 中动态导入。

我正在尝试配置 splitChunks 插件，以便它输出:

1. 应用程序 block ，包括没有依赖项和包的源代码；
2. module1 block ，其中包含动态导入模块的源代码和 Node_modules 所需的依赖项；
3. vendor block ，包含来自node_modules的其余依赖项；

最好的方法是什么？ 该应用程序只有一个条目，即 app.js

Answer 1

通过以下配置解决了这个问题。这里的关键是 vendor 缓存组中的chunks: inital。

  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendors: false,
        default: false,
        vendor: {
          chunks: 'initial',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          reuseExistingChunk: true
        },
      },
    },