vue2 项目webpack 4升5

项目背景

公司项目需要将进行微前端改造.主应用和子应用会需要共享依赖,考虑使用模块联邦进行依赖共享.
由于模块联邦要升级到webpack 5才能用,所以老项目要从webpack 4升级到webpack 5

实现思路

原来的项目用的是vue-cli 3,查了一下可以vue-cli 5用的就是webpack 5,所以可以直接将vue-cli3 ->5就可以了

具体实现

参考vue-cli的文档Migrate from v4

1. npm update-g @vue/cli
2. 将所有带有@vue/cli-的全部升级到最新
3. disableHostCheck 改成allowedHosts: 'all'

遇到的问题

webpack4->5有很多破坏性升级 从 v4 升级到 v5 | webpack 中文文档

1. cannot resolve corejs->core-js找不到,需要下载并显式指定
   npm i corejs(下2下3都行,我下的是3)
   需要在vue.config.js中显式指定

  presets: [['@vue/app',//显式指定core-js版本{'useBuiltIns': 'usage','corejs': '3.39.0'//指定用的corejs版本}]],

2. 默认不再包含Node.js核心模块的polyfills 需要重新安装
   2.1. path需要安装
   2.2. process.env需要安装插件DefinePlugin 或EnvironmentPlugin(但是vue-cli本身就是用的这两个注入环境变量的

3. script-ext-html-webpack-plugin不再适配webpack 5,需要去掉

4. css失效->sass,sass-loader 升级
   4.1. sass-loader:^7.1.0->^12.0.0
   4.2.sass:1.26.10->^1.26.10

5. >>>样式穿透失效需改用::v-deep
   5.1. >>>深度选择器不是标准的css选择器,vue-loader 15以上已经弃用,vue-cli 5用的17+的vue-loader就不支持了
   Migrating from v14 | Vue Loader
   5.2. >>>和sass的语法冲突,sass 解析器可能会将其误解为多个连续的 > 操作符,多个连续的 > 操作符在sass和css中都没有意义

参考链接:
https://p2yang.github.io/blog/upgrade-webpack5
https://blog.csdn.net/Note_creek/article/details/129714938
https://juejin.cn/post/7083146700939853832
https://blog.csdn.net/sinat_31213021/article/details/134195881
https://blog.csdn.net/m0_37937502/article/details/124986762