Webpack 4中如何实现Webpack 3里minChunks: Infinity的等效效果？

好问题！我当初从Webpack 3升级到4的时候也觉得用test写一大串匹配规则太繁琐了，确实有更简洁的实现方式，下面给你几种可行的方案：

方案一：直接通过入口(entry)指定公共chunk #

这是最直观且简洁的方式，你可以直接在entry配置里把需要单独打包的依赖列出来作为一个独立入口，Webpack会自动将它们（包括所有子依赖）打包到对应名称的chunk中，不需要复杂的splitChunks额外配置：

module.exports = {
  entry: {
    main: './src/main.js', // 你的业务主入口
    'common-init': ['common', 'somedepInit.js', 'analyticsDep', 'otherDepInit']
  },
  // 其他基础配置...
  optimization: {
    splitChunks: {
      chunks: 'initial' // 保持基础配置即可
    }
  }
};

这种方式和Webpack 3里minChunks: Infinity的效果完全一致，代码可读性和维护性都更强。

方案二：用函数式test简化匹配规则 #

如果不想修改入口结构，也可以把test写成一个判断函数，通过模块路径精准匹配目标依赖，避免冗长的正则表达式：

optimization: {
  splitChunks: {
    cacheGroups: {
      'common-init': {
        name: 'common-init',
        chunks: 'initial',
        minChunks: 2,
        enforce: true,
        priority: 10,
        test: (module) => {
          // 把需要打包的依赖统一放在数组里，后续修改更方便
          const targetDeps = ['common', 'somedepInit.js', 'analyticsDep', 'otherDepInit'];
          return targetDeps.some(dep => module.context.includes(dep));
        }
      },
      'resources': {
        name: 'resources',
        chunks: 'initial',
        minChunks: 2,
        test: /resources/
      }
    }
  }
}

额外补充：升级Webpack版本后可直接复用类似Webpack 3的写法 #

其实Webpack 4.0+的稳定版本已经支持在splitChunks中设置minChunks: Infinity了，如果你遇到不支持的情况，大概率是使用了较早期的Webpack 4版本。升级到稳定版后，就能直接用熟悉的简洁写法：

optimization: {
  splitChunks: {
    cacheGroups: {
      'common-init': {
        name: 'common-init',
        chunks: 'initial',
        minChunks: Infinity,
        enforce: true
      },
      'resources': {
        name: 'resources',
        chunks: 'initial',
        minChunks: 2,
        test: /resources/
      }
    }
  }
}

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