前言
基于 Vue2.x 的項目和組件庫開發(fā)于 2019 年 ，那時對 Webpack 版本沒有概念，項目和組件庫的版本混亂…有的使用 v3，有的使用 v4…
對于現(xiàn)今 2023 年（或 2024 年）的整個生態(tài)環(huán)境是不夠用的，無法使用較新和更優(yōu)秀的插件。所以升級勢在必行！
注意 本篇是基于 Vue2.x 組件庫 的升級，如果想了解 基于 Vue2.x 項目 的升級。
請移步《Vue2.x 項目 Webpack 4 升級 5（半自動升級）》
實現(xiàn)
升級
- 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",
- 安裝相關(guān)插件
npm i vue@2.6.14
npm 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 -D
npm 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 -D
npm 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 ，如果沒有就創(chuàng)建一個（兩者其一即可），配置如下：
// .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"http:// 錯誤
},
編譯時報錯
錯誤 1： Uncaught ReferenceError: exports is not defined
解決方案：第三方參考，也可研究 babel-loader。沒真正解決，因為僅在開發(fā)聯(lián)調(diào)環(huán)境下報此錯誤。
組件庫文件 index.js 導(dǎo)出組件，要判斷當(dāng)前環(huán)境是否為 production
// 合并導(dǎo)出
if (process.env.NODE_ENV === 'production') {
Object.assign(exports, { MyTestComponents });
}
export {
MyTestComponents
}
錯誤 2： 使用相對路徑引用的圖片解析后的地址不正確
解決方案： 未解決，把小圖片改為 base64 配置（待研究）；
項目版本是 Webpack4，但使用 Webpack5 組件庫的解決方案
vue.config.js 加上如下代碼第 2 行：文章來源：http://www.zghlxwxcb.cn/news/detail-775847.html
module.exports = {
productionSourceMap: false,
// 你的組件庫名稱
transpileDependencies: ['my-components-test'],
}
最后
想要了解更多，請查看官網(wǎng) 《從 v4 升級到 v5》文章來源地址http://www.zghlxwxcb.cn/news/detail-775847.html
到了這里，關(guān)于《Webpack5 升級》- Vue2.x 組件庫 Webpack3 升 5的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
