javascript - 如何将 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.