javascript - splitChunks.chunks 和 splitChunks.test (webpack) 之间的区别

Question

谁能向我解释一下 webpack 的 SplitChunksPlugin 中 splitChunks.chunks 设置和 splitChunks.cacheGroups.{cacheGroup}.test 设置之间的区别？特别是如果它们都用于单个缓存组中。

该文档在这方面不是很有帮助，因此感谢您的帮助

Answer 1

使用 splitChunks.cacheGroup.test 设置，您可以将所需的包放在一个块中，这些包由您声明的function (module, chunk):boolean | RegExp | string值解析。

例如，假设有一个没有 cacheGroup 部分的有效 splitChunks 定义。Webpack 构建将输出 10 个块，但您希望将一些 node_modules 包缓存到单个块中（react、react-dom、lodash）。有了这样的定义，你就可以做到：

cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/](react|react-dom|lodash)[\\/]/,
      name: 'vendor',
      chunks: 'all',
    }
}

这些部分不会中断其他块的拆分。