Webpack4升级至Webpack5：构建效率翻倍，性能全面升级为什么要升级 最近团队有人分享了模块联邦，我们系统用的

为什么要升级

1. 最近团队有人分享了模块联邦，我们系统用的是qiankun，有一个子应用是低代码的，通过loadMicroApp加载出来比较慢，想比较下两者的加载速度
2. 测试环境加载前端资源缓慢，需要对前端包进行精简

备注：因为我这里用的是vue Cli,主要是介绍vue Cli3升级到vue Cli5的步骤

带来的好处

更快的启动速度

vue Cli3（webpack4）	vue Cli5(webpack5)
初次构建	初次构建
再次构建	再次构建

更小的包

项目名称	升级之前	升级后
子应用A	14.6M	7.9M
子应用B	11M	6.12M

新的ES语法默认支持

不再需要babel安装另外的包（之前需要单独安装@babel/plugin-proposal-optional-chaining），

1. 使用?.语法

1. 使用??=语法

2. 空值合并运算符（??）

一些新特性

稳定的缓存、模块联邦的支持等点我查看官方的说明

升级步骤（两种）

按照官网的方式升级（我是升级失败了，没按照这个步骤）

官方文档

升级全局的 Vue CLI 包

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

项目依赖

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

构建空项目，然后将依赖挪到你的项目

•  主要升级vuecli和babel

•  修改vue.config.js

•  用sass替代node-sass（点我查看为什么替换）

•  移除plugin-proposal-optional-chaining.babel7已经默认支持ES2020的语法比如?.

按照你的项目配置进行初始化配置

一些eslint、babel什么的参照着目前的项目配置选择后进行创建

升级依赖

参照着新建的项目，将代码中关于vue的依赖进行升级,注意要把node-saas包也移除,改为sass

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^7.20.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }

修改vue.config.js

这个时候查看你的vue.config.js，应该是如下的

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
});

基本用法不变 我这边的主要修改点如下

1. devserver节点修改

1. output节点修改 参考issue

修改babel.config.js

修改完后执行npm install。当你安装完后直接去运行项目，可能有如下的报错

使用sass替代了node-saas 所以要全局搜索替换：/deep/ 替换为 ::v-deep即可解决

全局配置检查

1. 全局搜索是否使用了Buffer

假如项目中使用了Buffer会出现如下报错

原因是webpack5有如下改动

修改vue.config.js，引入即可修复

2. webpack-inject注入位置

正常改造后发版或在基座中报错

此时，需要在配置中手动设置打包后的js注入位置（inject和scriptLoading都可以，推荐scriptLoading），

否则默认打包是注入head中

qiankun默认找最后一个js作为入口文件，如果项目中存在自定义的一些js引入或者依赖js顺序的，会导致异常。具体可参考官方配置：github.com/jantimon/ht…

可选的修改（升级nodejs版本）

既然升级了webpack，顺便升级nodejs版本到20.11.1，也可以继续使用目前的nodejs版本

添加.nvmrc文件

方便切换nodejs 的版本，我这边使用的nodejs 版本是20.11.1。当使用的时候直接在命令行输入nvm use 即可。

命令行输入nvm use

当在命令行输入nvm use，当检测到.nvmrc的时候会默认将node的版本变为.nvmrc中设置的nodejs版本

当你升级了nodejs 的版本需要同步修改jenkins的构建

将nodejs 的版本指定为20.11.1即可