Webpack optimization.splitChunks配置后为什么第三方库没合并？

这个问题有点意思。你现在的配置看着没啥大问题，但为啥会分开打包呢？主要是因为 test 的正则写法有点小问题。

你看，你现在的正则是这样写的：
/[/]node_modules[/](axios|lodash)[/]/
这个正则要求匹配的模块路径必须是以 /axios/ 或 /lodash/ 结尾的文件夹路径，但有些情况下可能不完全符合这个规则（比如某些库的打包方式特殊）。

你可以改成这样试试：

optimization: {

  splitChunks: {

    cacheGroups: {

      vendors: {

        test: /[\/]node_modules[\/](axios|lodash)[\/]?/, // 改了这里

        name: 'vendors-lib',

        chunks: 'all',

        priority: 20

      }

    }

  }

}

注意我把正则改成了 /[\/]node_modules[\/](axios|lodash)[\/?]/，多加了个可选的斜杠 [\/]?，这样能更灵活地匹配到这两个库的所有情况。

另外，前端这块有时候缓存也会捣乱，记得清理下之前的构建文件或者加个 hash 确保重新生成。

试完之后应该就能看到 axios 和 lodash 都合并到 vendors-lib.js 里了。如果还不行，可以再检查下项目里有没有其他地方对 splitChunks 做了覆盖配置。

改成这样，把 test 的正则调整一下，同时确保 minSize 和 minChunks 没有限制：

optimization: {

  splitChunks: {

    cacheGroups: {

      vendors: {

        test: /[\/]node_modules[\/](axios|lodash)[\/]/,

        name: 'vendors-lib',

        chunks: 'all',

        priority: 20,

        minChunks: 1, 

        minSize: 0

      }

    }

  }

}

有时候 Webpack 默认的 minSize 会影响合并，改了应该就能正常打包到一起了。