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

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)
  }),

这使我能够将供应商从主要商品中分离出来，并保持填料完整无缺。 在我看来这是有道理的，因为主要块太大了。

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

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

我的主要部分将被拆分。但我的polyfills大块也将分裂！进入一个包含供应商和一个非常小的东西，这是我的应用程序的实际入口点。

如何拆分主块但保留polyfill完好无损？或者它没有任何意义，我不会从中获得任何利润？

UPD：我找不到关于所有这些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/

因此，您需要指定要从拆分中排除的块，而不是块：“全部”。