《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5

这篇具有很好参考价值的文章主要介绍了《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

基于 Vue2.x 的项目和组件库开发于 2019 年 ,那时对 Webpack 版本没有概念,项目和组件库的版本混乱…有的使用 v3,有的使用 v4
对于现今 2023 年(或 2024 年)的整个生态环境是不够用的,无法使用较新和更优秀的插件。所以升级势在必行
注意 本篇是基于 Vue2.x 组件库 的升级,如果想了解 基于 Vue2.x 项目 的升级。
请移步《Vue2.x 项目 Webpack 4 升级 5(半自动升级)》

实现

升级

  1. 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",
  1. 安装相关插件
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
  1. 安装 webpack5
npm install webpack@5.89.0 webpack-cli@5.1.4 -D
  1. 安装
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
  1. 修改文件 .npmrc
init.author.name 改为 --init-author-name
init.author.email 改为 --init-author-email
  1. 修改文件 packages.json 的编译命令
"scripts": {
	"build": "webpack --config ./webpack.config.js --progress"
},
  1. 修改文件 .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

解决方案: 在项目根目录下查找文件 .babelrcbabel.config.js ,如果没有就创建一个(两者其一即可),配置如下:

// .babelrc:
{
  "compact": false
}

// babel.config.js:
module.exports = {
    compact: false,
}

错误 3: Missing class properties transform

解决方案: 在文件 .babelrcbabel.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

解决方案: 在文件 .babelrcbabel.config.jswebpack.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》文章来源地址https://www.toymoban.com/news/detail-775847.html

到了这里,关于《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件

    基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件,开箱即用 A Vue 3.x Table Component built on Webpack 5 该组件库可供学习、参考和用于二次开发。 1.基于 Webpack 5 构建 2.全面支持 Vue 3 3.支持 JSON 序列化表格快速配置 4.已内置 Pagination 分页 5.支持自定义 prop 列名 6.支持单元格内容自

    2024年04月13日
    浏览(77)
  • 使用Vue3和Vite升级你的Vue2+Webpack项目

    🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页 ——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文并茂🦖生动形象🐅简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》 🐾 学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础

    2024年02月09日
    浏览(67)
  • 《基于 Vue 组件库 的 Webpack5 配置》7.路径别名 resolve.alias 和 性能 performance

    路径别名 resolve.alias 性能 performance

    2024年02月11日
    浏览(44)
  • 《基于 Vue 组件库 的 Webpack5 配置》9.module.exports 可为数组类型且注意编译顺序

    module.exports 常见是对象类型,其实也可用数组类型; 注意编译顺序, 从后往前 编: 也就是说先编 another.js ,再编 index.js ; 所以 代码第 9 行 不能设置为 true ,仅在第一次,也就是 代码第19行 设置 一次 即可清空整个 output 文件夹; 如果 代码第 9 行 设置为 true ,则在编 i

    2024年02月08日
    浏览(47)
  • vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex

    同学们可以私信我加入学习群! 我的项目是从vue2+webpack升级为vue3+vite,这种升级工作,其实最重要的不是如何快速准确地把原有vue2项目全部重构为vue3项目,因为这是不现实的。 升级工作一定是一个长久的持续过程,所以如何保证旧的vue2项目与新的vue3模块之间互相兼容,才

    2024年01月18日
    浏览(54)
  • 《基于 Vue 组件库 的 Webpack5 配置》6.将字体库和图片等静态资料,编译后打包至指定文件夹

    参考 Rule.generator.filename package.json 的配置如下

    2024年02月11日
    浏览(66)
  • vue2+webpack升级vue3+vite,报错Cannot read properties of null (reading ‘isCE‘)

    同学们可以私信我加入学习群! 系列文章:vue2+webpack升级vue3+vite,修改插件兼容性bug 前面的文章主要是介绍,在升级初始阶段遇到的一些显而易见的兼容性问题和bug。随着项目迭代的不断深入,一些不容易暴露的问题也渐渐呈现。 本文主要记录一些开发重构过程中的bug vu

    2024年01月18日
    浏览(52)
  • Webpack5 搭建Vue项目(进阶版)

    提示:中间隔了好长时间,我胡汉三又回来继续更新了!!!😂😂😂 提示:文章涉及的一些内容仅供参考: 大多数情况下,大家在项目开发的过程中,基本很少去说让开发人员去自助的搭建一个Vue项目。 基本都是使用现成的一些模版项目,直接在上面进行一个二次的开发

    2024年02月09日
    浏览(37)
  • Webpack5 vue-loader和VueLoaderPlugin

    .vue 文件是用户用 HTML-like 的语法编写的 Vue 组件。每个vue 文件都包括三部分 , VueLoaderPlugin 是一个解析 Vue.js 的插件,用于在 webpack 构建过程中解析和转换 .vue 单文件组件。它的作用是将 .vue 文件中的模板、样式和脚本进行编译,并将其转换为 JavaScript 模块,以供Webpack打包使

    2024年02月15日
    浏览(38)
  • 基于vue3+webpack5+qiankun实现微前端

    一 主应用改造(又称基座改造) 1 在主应用中安装qiankun(npm i qiankun -S)  2 在src下新建micro-app.js文件,用于存放所有子应用。  3 改造vue.config.js,允许跨域访问子应用页面  4 改造main.js   5 在App.vue中写响应跳转子应用(根据自己的项目找对应位置写,不局限于App.vue)   需要注

    2024年02月13日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包