Vue CLI 搭建Vue3项目升级webpack5（一）

升级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项目