Webpack 的 splitChunks 配置怎么才能让公共模块单独打包？

这个问题我遇到过好多次了，很多人都卡在这里。让我帮你一步步分析。

首先你要确认几个关键点：
1. 你的入口文件确实都引用了 lodash 和 axios 吗？如果只有部分入口引用，Webpack 可能不会提取
2. 你的 webpack 版本是不是 4 以上？老版本配置不太一样

配置方面有几个容易踩坑的地方。你的配置已经很接近了，但需要调整一下：

optimization: {

  splitChunks: {

    chunks: 'all',

    cacheGroups: {

      vendor: {

        test: /[\/]node_modules[\/](lodash|axios)[\/]/,  // 注意这里的斜杠转义

        name: 'vendor',

        chunks: 'initial',  // 这里改一下

        priority: 10,      // 优先级要设高一点

        enforce: true       // 强制拆分

      }

    }

  }

}

解释下修改点：
- chunks: 'initial' 比 'all' 更可靠，它只处理初始 chunk
- priority 确保这个规则优先于默认的 vendor 分组
- enforce: true 强制拆分，即使 chunk 很小

如果还不行，可以再加个检查：
1. 运行 webpack 时加上 --display-chunks 看看 lodash 和 axios 到底被分到哪了
2. 试试先把 minSize 设小点测试，比如 minSize: 1

原理是这样的：Webpack 的代码拆分是基于模块引用关系计算的。只有当多个入口都引用了相同的模块，并且满足最小大小等条件时才会拆分。有时候你以为引用了，实际上可能是间接引用导致 Webpack 没识别出来。

还有个小技巧，可以强制指定哪些模块要拆分：

// 在入口文件最顶部加上

import 'lodash'

import 'axios'

这样 Webpack 会明确知道这些是公共依赖。