记录一次webpack打包在gitlab-ci和本地打包不一致的问题

记录之前在项目中,webpack 配置在本地环境和 gitlab 环境下表现不一致的问题。

之前在项目中遇到的问题,项目本地打包的时候 webpack 的 splitChunks 配置没有生效,但是在 gitlab 环境打包的时候发现这个生效了。

webpack 配置

1
2
3
4
5
6
7
8
9
webpackConfig.optimization.splitChunks = {
cacheGroups: {
vendor: {
test: /\/src\//,
name: 'element-ui',
chunks: 'all',
},
},
}

然后查阅资料后发现,使用正则匹配的路径在 windows 环境是无效的。。

当 webpack 处理文件路径时,它们始终包含 Unix 系统中的 / 和 Windows 系统中的 \。这就是为什么在 {cacheGroup}.test 字段中使用 [\/] 来表示路径分隔符的原因。{cacheGroup}.test 中的 / 或 \ 会在跨平台使用时产生问题。

解决办法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
//...
optimization: {
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
},
},
},
}

参考: