如何让Webpack的splitChunks仅生成vendors和commons两类chunk？

要强制Webpack只生成vendors和commons两个chunk，你可以通过调整配置关闭默认拆分规则、强化自定义缓存组的优先级来实现：

修改后的完整配置 #

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            // 禁用Webpack默认的两个缓存组，阻止自动生成额外chunk
            default: false,
            defaultVendors: false,
            vendor: {
                name: 'vendors',
                chunks: 'all',
                test: /[\/]node_modules[\/]/,
                reuseExistingChunk: true,
                // 设高优先级，确保node_modules模块优先匹配这个组
                priority: 100,
                // 强制生效，忽略默认的文件大小限制
                enforce: true
            },
            common: {
                chunks: 'all',
                minChunks: 9,
                name: 'commons',
                reuseExistingChunk: true,
                // 优先级低于vendor，避免规则冲突
                priority: 50,
                enforce: true
            }
        }
    }
}

关键修改说明 #

• 关闭默认缓存组：Webpack自带default和defaultVendors两个默认缓存组，会自动拆分满足条件的模块生成新chunk，将它们设为false就能禁用这些默认行为。
• 设置优先级：给vendor组更高优先级，确保来自node_modules的模块不会被common组匹配，避免拆分逻辑混乱。
• 开启enforce：强制缓存组规则生效，哪怕模块大小没达到Webpack默认的minSize阈值，保证所有符合条件的模块都进入指定的vendors或commons chunk。

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