升级webpack5主要是想用模块联邦实现微前端,随着单体项目会越来越大,打包效率及开发效率都受影响,所以可以像服务端那样拆出微服务,方便独立开发,独立打包部署。因为微前端涉及多个子项目,所以可以用monorepo来管理项目集,monorepo是把多个项目放到同一个代码仓库管理(包括vue3、babel、react在内的众多国内外著名的项目都采用了这种方式),我采用了lerna多包管理工具来构建项目仓库,本文先介绍初始化项目仓库以及用vuecli脚手架搭建vue3项目。
一、lerna构建项目集
安装: npm install lerna -g
1、本地创建项目文件夹lernapro,在lernapro下:
初始化项目仓库:lerna init
2、创建子项目,在lernapro下
lerna create project1
会在packages下创建一个project1子项目
3、用vuecli脚手架在packages下创建vue3项目
vue create vue3pro
4、用lerna list找不到新建的vue3项目
删除package.json中的private:true属性
这时候用lerna list 就能找到两个子项目了。
5、改造vue3项目,删除自带的vue-cli脚手架
- 必须删除vuecli相关的包,因为@vue/cli内置了webpack4,可以看到node_modules下webpack包的版本
- 添加webpack5相关的包
- 修改script命令
启动开发环境的服务器脚本是webpack server
webpack server --config ./script/webpack.dev.js
打包项目脚本命令:
webpack --config ./script/webpack.prod.js
- 新增script文件夹,在script下添加webapck的配置文件
- 删除node_modules包,重新install
可以用 lerna clean删除之前的包,然后lerna bootstrap安装子项目的依赖包,安装报错,需要升级less-loader包,添加vue-loader、style-loader、babel-loader、copy-webpack-plugin、html-webpack-plugin,package.json中的包改为:
"css-loader": "6.6.0",
"less-loader": "10.2.0",
"html-webpack-plugin": "5.5.0",
"copy-webpack-plugin": "5.1.2",
"babel-loader": "^8.2.3",
"vue-loader": "17.0.0",
"style-loader": "3.3.1",
- 进入vue3pro,执行npm run serve,能正常访问页面
至此项目已经从vuecli脚手架创建生成的项目升级成webpack5的vue项目