升级 webpack5 + vue-cli5

该篇仅针对整体的升级，具体细微的踩坑经历将在同个专栏继续更新

webpack升级

核心步骤

1. 升级webpack：npm install webpack@latest
2. 升级webpack-cli：npm install webpack-cli@latest

插件相关

1. 升级mini-css-extract-plugin：npm install mini-css-extract-plugin@latest
2. 升级html-webpack-plugin：npm install html-webpack-plugin@latest
3. IgnorePlugin语法修改

new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment/,
})
1
2
3
4

其他

1. 开启持久化缓存：手动开启才能生成webpack5缓存目录提升打包速度

cache: {
    type: 'filesystem',
}
1
2
3

2. node.js相关polyfill：webpack5已移除，需进行手动引入

resolve: {
    fallback:  {
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify"),
    }
}
1
2
3
4
5
6

3. 严格devtool写法：^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

vue-cli升级

核心步骤

1. 升级vue/cli-service：npm install @vue/cli-service@latest（底层webpack5）
2. 升级webpack：npm install webpack@latest（webpack版本与vue-cli版本一致）

其他

1. 开启持久化缓存：手动开启才能生成webpack5缓存目录提升打包速度

cache: {
    type: 'filesystem',
}
1
2
3

2. node.js相关polyfill：webpack5已移除，需进行手动引入

resolve: {
    fallback:  {
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify"),
    }
}
1
2
3
4
5
6

3. IgnorePlugin语法修改

new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment/,
})
1
2
3
4