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

Question

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

• 应用程序.js
• 模块1.js
• 节点模块

module1 在 app.js 中通过import(/* webpackChunkName: 'module1' */ '@path').

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

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

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

标签： javascriptwebpackmodulebundlewebpack-splitchunks

Answer 1

使用以下配置解决了它。这里的关键是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
        },
      },
    },