升级到 webpack 5 后如何从 CommonsChunkPlugin 迁移到 splitChunks

Question

我正在开发一个 google chrome 扩展，当我使用较低版本的 webpack 时，我这样配置块：

    plugins : [
    new CommonsChunkPlugin( {
      name : 'commons1',
      filename : 'commons1.js' , 
      allChunks: true,
      chunks : [ 'popup','content' ],
      chunksSortMode: 'manual',
    }) ,
    new CommonsChunkPlugin({ 
      name: 'commons2',
      filename :'commons2.js' , 
      allChunks: true,
      chunks : [ 'commons1.js' , 'options' ] 
    }) ,
    new CommonsChunkPlugin({ 
      name: 'commons3',
      filename :'commons3.js' , 
      allChunks: true,
      chunks : [ 'bg' , 'commons2.js' ] 
    }) ,
    new ExtractTextPlugin( '[name].css' )
  ]

升级到 webpack 5 后，他们删除了 CommonsChunkPlugin 并使用 splitChunks，我阅读了 splitChunks 文档，但没有弄清楚如何将我的旧配置迁移到新的 splitChunks.是否可以将旧配置迁移到新的 splitChunks？使用 splitChunks 编写配置的相同方法是什么？

Answer 1

在splitChunk中我是这样写的：

optimization: {
    splitChunks: {
      cacheGroups: {
        commons1: {
          name: 'commons1',
          chunks: 'all',
          minChunks: 1,
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(popup|content)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },
        commons2: {
          name: 'commons2',
          chunks: 'all',
          minChunks: 1,
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(options|commons1)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },
        commons3: {
          name: 'commons3',
          chunks: 'all',
          minChunks: 1,
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(bg|commons2)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },
      }
    }
  },

升级到 webpack 5 后如何从 CommonsChunkPlugin 迁移到 splitChunks

how to migration from CommonsChunkPlugin to splitChunks after upgrade to webpack 5

webpack