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

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

js 复制代码

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

默认不再包含Node.js核心模块的polyfills 需要重新安装

2.1. path需要安装

2.2. process.env需要安装插件DefinePlugin 或EnvironmentPlugin(但是vue-cli本身就是用的这两个注入环境变量的
script-ext-html-webpack-plugin不再适配webpack 5,需要去掉
css失效->sass,sass-loader 升级

4.1. sass-loader:^7.1.0->^12.0.0

4.2.sass:1.26.10->^1.26.10
>>>样式穿透失效需改用::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中都没有意义