Webpack 网页包：如何将CommonChunkPlugin（wp3）迁移到optimization.splitChunks（wp4）？

我正在尝试从3迁移到webpack4，而我在迁移

CommonChunkPlugin

时遇到了一段非常困难的时间

在WP3上，我有以下简化配置：

const entries = {
  client: './src/index.js',
  common1: ['lodash'],
  common2: ['react', 'react-dom']
};

module.exports = {
  ...
  entry: entries,
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['common1', 'common2'],
      minChunks: Infinity
    })
  ]
};

在WP4上，我已经尝试了使用多种组合，但我无法让它以共享公共依赖项的方式正确绑定模块，就像在WP3上一样

这是我上次尝试时使用的，但最终的捆绑包要大得多：

// same entries object
const entries = { ... };

module.exports = {
  ...
  entry: entries,
  optimization: {
    splitChunks: {
    minChunks: Infinity,
    chunks: 'initial',
    cacheGroups: {
      common1: { test: 'common1' },
      common2: { test: 'common2' },
      // disables the default definition of these cache groups
      vendors: false, 
      default: false
    }
  }
};

---

您只需设置

exforce=true

，这将“强制”webpack始终为缓存组创建块

如果您正在执行代码拆分（使用

import（）

），则需要设置

chunks=“all”

，因为使用

“initial”

只对同步模块进行分组

最后，如果组“CONNE1”和“CONUM2”可能共享任何模块，则可以考虑给一个缓存组比另一个更高的优先级，例如，如果“CONM1”可能首先被加载，那么这应该具有更高的优先级，因此“CONNE2”不需要作为依赖项下载。 一些有用的链接有助于揭开这些东西的神秘面纱：

module.exports={
...
条目：条目，//条目->条目
优化：{
分割块：{
缓存组：{
共同点1：{
测试：'common1'，
块：“全部”，
执行：正确
},
共同点2：{
测试：'common2'，
块：“全部”，
执行：正确
},
//禁用这些缓存组的默认定义
供应商：错，
默认值：false
}
}
}

作为旁白（可能是复制错误），

entries

属性应该是

entry

@sdgluck correct！这是一个打字错误，我会更新帖子，谢谢！