Webpack 4 和 splitChunks - 将所有供应商代码移动到一个单独的块中，除了动态导入的模块

Question

我有一个看起来像这样的项目：

app.js
module1.js
node_modules

module1 通过 import(/* webpackChunkName: 'module1' */ '@path').

在 app.js 中动态导入

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

包含 src 代码但没有依赖项和包的应用程序块；
module1 块，其中包含来自 node_modules 的动态导入模块的源代码和所需的依赖项；
包含来自 node_modules 的其余依赖项的供应商块；

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

Answer 1

通过以下配置解决。这里的关键是 chunks: inital in vendor cachegroup.

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

Webpack 4 和 splitChunks - 将所有供应商代码移动到一个单独的块中，除了动态导入的模块

Webpack 4 and splitChunks - move all vendor code to a separate chunk except for the dynamically imported module

javascript

bundle

module

webpack

webpack-splitchunks