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

【问题标题】：Webpack 4 and splitChunks - move all vendor code to a separate chunk except for the dynamically imported moduleWebpack 4 和 splitChunks - 将所有供应商代码移动到一个单独的块中，除了动态导入的模块
【发布时间】：2020-08-25 21:06:52
【问题描述】：

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

app.js
module1.js
node_modules

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

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

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

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

【问题讨论】：

标签： javascript webpack module bundle webpack-splitchunks

【解决方案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
        },
      },
    },

【讨论】：