如何将 Webpack 3 CommonsChunkPlugin 配置升级到 Webpack 4 splitChunks，同时在这种情况下保持相同的行为？

Question

我正在尝试从 Webpack 3 迁移到 4，这需要我从使用 CommonsChunkPlugin 更改为 splitChunks。但我正在努力保持相同的行为。

我的 Webpack 3 代码：

webpack.config.js

  entry: {
    vendor: ['jquery', 'timeago.js', 'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria', 'jquery-ujs'],
    application: ['./javascripts/application.js', './stylesheets/application.scss'],
  },

和

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),

我认为 Webpack 调用这个 Explicit Vendor Chunk。

我应该编写什么 Webpack 4 代码来产生与上述相同的行为？

我试过删除

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),

但这不仅有效。

我尝试遵循 https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693 但它也没有产生相同的行为。

Answer 1

最后，我是这样做的：

webpack.config.js

  entry: {
    application: [
      './javascripts/application.js',
      './stylesheets/application.scss',
      'jquery',
      'timeago.js',
      'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria',
      'jquery-ujs',
    ],
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        common: {
          test: /[\/]node_modules[\/]/,
          name: 'vendor',
          chunks: 'initial',
        },
      },
    },
  },

并删除了这个：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: Infinity,
}),

基本上，我停止使用 CommonsChunkPlugin 因为它在 webpack v3 到 v4 升级期间被弃用了，我转而使用 splitChunks 因为这是 Webpack 4 中新的代码拆分方式。

在 splitChunks 配置中，我告诉它从 node_modules 中提取代码并将这些代码放入 vendor.js 捆绑文件中，所以我最终得到了 2 个捆绑的 JS 文件：application.js 和 vendor.js.

如何将 Webpack 3 CommonsChunkPlugin 配置升级到 Webpack 4 splitChunks，同时在这种情况下保持相同的行为？

How to upgrade Webpack 3 CommonsChunkPlugin config to Webpack 4 splitChunks while maintaining same behaviour for this case?

javascript

webpack

webpack-4

webpack-splitchunks

commonschunkplugin