如何在Webpack4中拆分供应商和polyfills

Question

我有两个入口点：main和polyfills。在Webpack3中，我有这样的配置：

  new CommonsChunkPlugin({
    name: 'polyfills',
    chunks: ['polyfills']
  }),

  // This enables tree shaking of the vendor modules
  new CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['main'],
    minChunks: module => /node_modules/.test(module.resource)
  }),

这使得我可以将供应商从main中分离出来，并保持polyfills不变。在我看来，这是有道理的，因为主块太大了。

在没有额外配置的Webpack4中，主块不会被拆分。当我添加：

optimization: {
  splitChunks: {
    chunks: "all"
  }
},

我的主要部分将被分割。但是我的polyfills块也会被拆分！一个包含来自供应商的所有内容，另一个非常小，这是我的应用程序的实际入口点。

如何分割主块而保持多边形完好无损？或者它没有任何意义，我不会从中获得任何利润？

更新:我找不到很多关于所有这些spliChunks/cacheGroups/minChunks含义的信息。有什么文档吗？

Answer 1

For webpack4, I guess you are looking for something like this.

这是我找到的webpack文档(截图所属的链接)- https://webpack.js.org/plugins/split-chunks-plugin/

因此，您需要指定要从拆分中排除的块，而不是块：‘all’。