webpack4升级至webpack5构建报chunks.some is not a function错误如何解决

错误原因 #

该错误完全由webpack 5的API不兼容变更导致：

• webpack 4中splitChunks.cacheGroups.{缓存组名称}.test函数的第二个入参为当前模块关联的所有chunk组成的数组，支持调用some等数组方法
• webpack 5中该入参修改为单个Chunk实例，不再是数组类型，因此调用数组方法some会抛出类型错误

修复方案 #

观察你的原有配置逻辑，some回调中并未使用任何chunk实例属性，所有判断逻辑仅和模块路径相关，直接移除chunks.some的包裹逻辑即可，修改后配置如下：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        name: 'vendor',
        chunks: 'all',
        reuseExistingChunk: true,
        priority: 100,
        enforce: true,
        test(module) {
          const name = module.nameForCondition && module.nameForCondition();
          return name && (/[\\/]node_modules[\\/]/.test(name)
            || /[\\/]vendor[\\/]/.test(name));
        }
      }
    }
  }
}

如果你的业务逻辑确实需要遍历模块关联的所有chunk做判断，可通过module.chunks属性获取chunk数组，再调用some方法：

test(module) {
  const name = module.nameForCondition && module.nameForCondition();
  // 示例：仅当模块属于名为main的chunk，且路径匹配时才命中vendor缓存组
  return name 
    && (/[\\/]node_modules[\\/]/.test(name) || /[\\/]vendor[\\/]/.test(name))
    && module.chunks.some(chunk => chunk.name === 'main');
}

内容的提问来源于stack exchange，提问作者Pete