《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5
前言
基于 Vue2.x 的项目和组件库开发于 2019 年 ，那时对 Webpack 版本没有概念，项目和组件库的版本混乱…有的使用 v3，有的使用 v4…
对于现今 2023 年（或 2024 年）的整个生态环境是不够用的，无法使用较新和更优秀的插件。所以升级势在必行！
注意 本篇是基于 Vue2.x 组件库 的升级，如果想了解 基于 Vue2.x 项目 的升级。
请移步《Vue2.x 项目 Webpack 4 升级 5（半自动升级）》
实现
升级
- package.json 删除冗余依赖
"extract-text-webpack-plugin": "^3.0.2","vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-glob-entry": "^2.1.1" "babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-3": "^6.24.1","file-loader": "^1.1.6",
- 安装相关插件
npm i vue@2.6.14npm i vue-template-compiler@2.6.14 -D
npm i vue-loader@15.9.8 -D
npm i file-loader@6.2.0 -D
npm i babel-loader@8.3.0 -Dnpm i @babel/core@7.2.2 -D
npm i @babel/plugin-transform-runtime@7.22.5 -D
npm i @babel/preset-env@7.3.1 -D
npm i @babel/preset-react@7 -D
npm i @vue/cli-plugin-babel@5.0.6 -D
npm i @vue/cli-service@5.0.6 -Dnpm i axios@1.6.0
注意千万不要安装，这是给vue3和vue2的兼任版本使用
@vue/compiler-sfc
- 安装
webpack5
npm install webpack@5.89.0 webpack-cli@5.1.4 -D
- 安装
npm i mini-css-extract-plugin -D
npm i css-minimizer-webpack-plugin -D
npm i javascript-obfuscator webpack-obfuscator -D
npm i style-loader@2 -D
- 修改文件
.npmrc
init.author.name 改为 --init-author-name
init.author.email 改为 --init-author-email
- 修改文件
packages.json的编译命令
"scripts": {"build": "webpack --config ./webpack.config.js --progress"
},
- 修改文件
.babelrc
{ "presets":[["@babel/preset-env",{ "targets": "> 1% in AU and not dead", "shippedProposals": true },],["@babel/preset-react", { "runtime": "automatic" }]]
}
启动时报错
错误 1： VueLoaderPlugin is not a constructor
解决方案：vue-loader 必须在 15+，且在 webpack.config.js做如下配置：
const { VueLoaderPlugin } = require('vue-loader')plugins: [// 引入VueLoader插件new VueLoaderPlugin(),
],
错误 2： The code generator has deoptimised the styling
解决方案： 在项目根目录下查找文件 .babelrc 或 babel.config.js ，如果没有就创建一个（两者其一即可），配置如下：
// .babelrc:
{"compact": false
}// babel.config.js:
module.exports = {compact: false,
}
错误 3： Missing class properties transform
解决方案： 在文件 .babelrc或babel.config.js` 下配置
{ "presets":[["@babel/preset-env",{ "targets": "> 1% in AU and not dead", "shippedProposals": true },],["@babel/preset-react", { "runtime": "automatic" }]]
}
错误 4： Uncaught ReferenceError: Cannot access 'l' before initialization
解决方案： 在文件 .babelrc 或 babel.config.js ，webpack.config.js 下配置
// .babel 或 babel.config.js
"plugins": ["@babel/plugin-transform-runtime"
]// webpack.config.js
module.exports = {target: ['web', 'es5'],
}
错误 5： 插件 xlsx 报错
解决方案： 如下方式引入
import * as XLSX from "xlsx";
错误 6： Can't resolve '[object Module]
解决方案： 字体库报错，属于资源配置错误。 文件 webpack.config.js 中配置
{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,type: "asset/resource", // 正确// loader: "file-loader"// 错误
},
编译时报错
错误 1： Uncaught ReferenceError: exports is not defined
解决方案：第三方参考，也可研究 babel-loader。没真正解决，因为仅在开发联调环境下报此错误。
组件库文件 index.js 导出组件，要判断当前环境是否为 production
// 合并导出
if (process.env.NODE_ENV === 'production') {Object.assign(exports, { MyTestComponents });
}export {MyTestComponents
}
错误 2： 使用相对路径引用的图片解析后的地址不正确
解决方案： 未解决，把小图片改为 base64 配置（待研究）；
项目版本是 Webpack4，但使用 Webpack5 组件库的解决方案
vue.config.js 加上如下代码第 2 行：
module.exports = { productionSourceMap: false,// 你的组件库名称transpileDependencies: ['my-components-test'],
}
最后
想要了解更多，请查看官网 《从 v4 升级到 v5》