【构建工具】webpack 3、4 升级指南,摆脱低版本的困扰
一、依赖处理
1.升级通用依赖
借用 ncu 库实现,帮你改写需要升级的package.json 然后再 npm install
ncu -u <packages> # 可以指定依赖
ncu # 升级全部依赖
大概列了下升级的效果
add-asset-html-webpack-plugin ^2.1.3 → ^5.0.2
clean-webpack-plugin ^0.1.14 → ^4.0.0
copy-webpack-plugin ^4.0.1 → ^11.0.0
css-loader ^0.28.7 → ^6.7.3
es6-promise ^4.2.5 → ^4.2.8
friendly-errors-webpack-plugin ^1.6.1 → ^1.7.0
html-webpack-plugin ^2.2.0 → ^5.5.0
sass-loader ^7.1.0 → ^13.2.0
vue-loader ^13.3.0 → ^17.0.1
webpack ^3.9.0 → ^5.75.0
webpack-dev-server ^2.10.0 → ^4.11.1
2.升级babel依赖
babel 升级工具修改配置
npx babel-upgrade --write# 或是安裝 babel-upgrade 在 global 並執行
npm install babel-upgrade -g
babel-upgrade --write
可以看到 package.json 中移除了旧版本的依赖,自动新增了新版名称,.babelrc 文件的配置也会自动修改 但是不会删除已有的插件
移除旧版本依赖后重新安装依赖
rm -rf node_modules
npm install
修改所有 bable-polyfill 为 @babel/polyfill
因为 babel 7 新增的 @babel 命名空间,所以原来的 babel-polyfill 需要修改名称
// index.js 头部导入修改
import '@babel/polyfill'// webpack config 入口修改
entry: ['@babel/polyfill', './src/index.js'],
安装新依赖
mini-csss-extract-plugin替代extract-text-webpack-plugin- 添加
webpack-cli vue-loader需在v15(包含)以下
废除项目中的旧包
// 大概的
url-loader
file-loader
vue-style-loader
extract-text-webpack-plugin
optimize-css-assets-webpack-plugin
clean-webpack-plugin
webpack-hashed-chunk-id-plugin
package.json启动命令修改
webpack-dev-server -> webpack serve
二、plugins及一些依赖使用方式的改变
- 项目webpack-dev-server升到了4版本用来配套webpack5,所以npm run dev的命令需要相改为webpack serve启动
- 需要再plugins里面增加VueLoaderPlugin(vue-loader)
- extract-text-webpack-plugin和optimize-css-assets-webpack-plugin已经过时了需要由mini-css-extract-plugin和css-minimizer-webpack-plugin来代替
- webpack5自带了资源解析,所以不需要什么url-loader,file-loader之类的,直接用assets就可以解析
- 调整copyWebpackPlugin(copy-webpack-plugin)使用方法
- clean-webpack-plugin 废除,是用webpack5自带的 clean 配置
- webpack-merge要解构出来,const { merge } = require(‘webpack-merge’)
- NamedModulesPlugin已过时,由optimization的moduleIds进行替换
- copy-webpack-plugin插件使用方式有变化
- devServer改动很多可以参考以上文章链接,自定义参考官网devserver专题
- UglifyJsPlugin已经过时,可以直接使用webpack5开箱提供的TerserPlugin
- 代码拆分webpack.optimize.CommonsChunkPlugin已经过时现在使用webpack5提供的optimization.splitChunks属性来实现功能来实现
- build->util.js文件中修改了一处 MiniCssExtractPlugin.loader。ExtractTextPlugin(extract-text-webpack-plugin)已过时,使用MiniCssExtractPlugin(mini-css-extract-plugin)进行替换。
- devtool有做一定修改
- 由于vue-loader升级了,所以之前css如果使用/deep/有可能出错。我是在根节点使用/deep/然后换到::v-deep就正常了。如果有类似问题,可以相应调整。
- 去掉了vue-style-loader使用style-loader替代。原因css-loader从V4版本开始默认开启esModule,导致css无法被vue-style-loader解析的问题
- thread-loader 可以支持替换 HappyPack 用法更简单(但是需要注意兼容性问题)
三、配置文件的更改
代码拆分 webpack.optimize.CommonsChunkPlugin 的替代 optimization.splitChunks
optimization: {// 用文件名的 hash 替换打包时候的 ModulesID , 保持 modulesID 不变利于前端持久化moduleIds: 'deterministic',// 抽取出 webpack 的 runtime 代码,避免稍微修改一下入口文件就会改动 commonChunk ,导致原本有效的浏览器缓存失效runtimeChunk: true,splitChunks: {chunks: 'all',cacheGroups: {// 用次数大于等于 2 的模块,单独打包default: {reuseExistingChunk: true,minChunks: 2,priority: -20,filename: webDirName + '/commons/default-[chunkhash:8].js'},// 将所有 node_modules 中的资源单独打包到 vendors-xxx-xx.js 命名的产物defaultVendors: {idHint: 'vendors',reuseExistingChunk: true,test: /[\\/]node_modules[\\/]/i,priority: -10,filename: webDirName + '/commons/defaultVendors-[chunkhash:8].js'}}}}
图片资源 url-loader file-loader 等的替换
// 旧 webpack
{test: /\.(png|svg|jpg|jpeg|gif)(\?.*)?$/i,include: dirConfig.srcDir,loader: 'url-loader',options: {limit: 1024, // 把小于1kB的文件打成 Base64 的格式,写入 JSname: webDirName + '/images/[name].[hash:8].[ext]', // 放在文件夹的路径及命名publicPath: '/', // 路径上添加两个点指向正确路径,cacheDirectory: true}
}
// 新 webpack 5
{test: /\.(png|svg|jpg|jpeg|gif)(\?.*)?$/i,include: dirConfig.srcDir,type: 'asset',generator: {filename: webDirName + '/images/[name].[hash:8].[ext]' // 放在文件夹的路径及命名},parser: {dataUrlCondition: {maxSize: 1024 // 把小于1kB的文件打成 Base64 的格式,写入 JS}}
},
copy-webpack-plugin 用法改变
// 旧
new CopyWebpackPlugin([{from: dirConfig.srcDir + '/temp', // 打包的静态资源目录地址to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的cssflatten: false}
])// 新
new CopyWebpackPlugin({patterns: [{from: 'temp', // 源路径to: path.resolve(dirConfig.buildDir, './' + webDirName + '/temp/'), // 打包到build下面的csscontext: dirConfig.srcDir // 基础目录}]
})
extract-text-webpack-plugin 替换 mini-css-extract-plugin
// 旧
new ExtractTextPlugin(webDirName + '/css/[name]-[contenthash:8].css')
// 新
new MiniCssExtractPlugin({filename: webDirName + '/css/[name]-[contenthash:8].css' // 设置导出路径和文件名
})
html-webpack-plugin 添加 chunks
chunks: ['defaultVendors', 'default', 'commons']
添加 mode
mode: 'production' | 'development' | 'none'
eslint-loader 替换为 vscode 的 eslint 实时检查
eslint-loader是一个Webpack插件,赋予其构建时检测代码的功能,但是会影响构建性能推荐使用,编辑器的
eslint插件,可以在编辑器中实时检查代码,给出错误和警告提示。这种方式可以帮助开发者在编写代码时及时发现问题,而不需要等待打包过程,不会影响Webpack构建性能
相关文章:
【构建工具】webpack 3、4 升级指南,摆脱低版本的困扰
一、依赖处理 1.升级通用依赖 借用 ncu 库实现,帮你改写需要升级的package.json 然后再 npm install ncu -u <packages> # 可以指定依赖 ncu # 升级全部依赖大概列了下升级的效果 add-asset-html-webpack-plugin ^2.1.3 → ^5.0.2 clean-webpack-…...
Javaweb第一个项目——实现简单的登陆功能
第一步:打开idea-->文件-->新建 第二步: 在Demo文件夹 点击右键-->添加框架支持-->找到Web应用程序 勾选 第三步:配置Tomcat 第四步:新建一个lib(建在web-INF文件夹下)文件夹 用于存放jar包…...
OpenKruise 开发者不容错过的带薪实习机会!马上加入 LFX Mentorship 计划
LFX Mentorship 计划由 Linux Foundation 组织发起,为像 OpenKruise 这样的 CNCF 托管项目提供了激励开源贡献、扶植社区发展的优秀土壤。参与其中的开发者不仅有机会在经验丰富的社区 Mentor 指导下贡献开源项目、为职业生涯加分,完成工作后还能获得 $3…...
《c++ primer笔记》第八章 IO库
前言 简单看一下就行 文章目录一、IO类1.1基本概念1.2管理输出缓冲二、文件输入输出2.1文件模式三、string流3.1istringstream3.2ostringstream一、IO类 1.1基本概念 我们常见的流有istream和ostream,这两个流都是有关输入和输出的,此外,…...
web开发 用idea创建一个新项目
这个写着就是给自己当备忘录用的QAQ 这个老师上课一通操作啥也没看清…卑微搞了半天看样子是成功了 记录一下省的以后忘了怎么创建(? zufe lxy 2023.3 先行条件是已经自己装好了Tomcat和idea!!(我的idea是申请了教育…...
【FMCW 03】测速
从上一讲 测距 末尾的frame讲起。我们知道一个chirp对应了一个采样后的IF信号,我们将这些采样后的IF信号按chirp的次序排列成一个帧(frame),这就得到了我们实际中接收后处理的FMCW信号。 由于chirp的发射返回时间很短,…...
ERP(企业资源管理)概述
🌟所属专栏:ERP企业资源管理🐔作者简介:rchjr——五带信管菜只因一枚😮前言:该系列将持续更新ERP的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~👉文章简介&a…...
深入理解java虚拟机精华总结:性能监控和故障处理工具、类加载机制
深入理解java虚拟机精华总结:性能监控和故障处理工具、类加载机制性能监控和故障处理工具、类加载机制jpsjstatjinfojmapjhatjstackVisualVM类加载机制类加载的时机类加载的过程加载验证准备解析初始化类加载器类与类加载器双亲委派模型破坏双亲委派模型往期内容&am…...
推荐系统与推荐算法
文章目录第一章1.1推荐系统意义与价值1.2推荐系统历史与框架1.3推荐算法分类第二章2.1协同过滤的基本思想与分类2.2基于用户的协同过滤2.3基于项目的协同过滤2.4基于邻域的评分预测2.5基于二部图的协同过滤第三章3.1基于关联规则的推荐3.2基于矩阵分解的评分预测3.3概率矩阵分解…...
socket 编程实战(编写客户端程序 )
编写客户端程序 接着上一篇:实战服务端程序 接下来我们再编写一个简单地客户端应用程序,客户端的功能是连接上小节所实现的服务器,连接成功之后向服务器发送数据,发送的数据由用户输入。示例代码如下所示: #include…...
“巨亏成名”的魔鬼交易员,你知道几个?
谁说在期货市场上只有赚大钱才能出名?殊不知还有这样一群特殊的交易员靠着巨额亏损而“一战成名”,亏得是老东家元气大伤,外号“魔鬼交易员”——“不亏不成魔”!接下来火象就给大家盘点几位代表性魔鬼交易员,看看他们…...
1380:分糖果(candy)
1380:分糖果(candy) 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 童年的我们,将和朋友分享美好的事物作为自己的快乐。这天,C小朋友得到了Plenty of candies,将要把这些糖果分给要好的朋友们。已知糖果从一个人传…...
数据挖掘(2.1)--数据预处理
一、基础知识 1.数据的基本概念 1.1基础知识 数据是数据对象(Data Objects)及其属性(Attributes)的集合。 数据对象(一条记录、一个实体、一个案例、一个样本等)是对一个事物或者物理对象的描述。 数据对象的属性则是这个对象的性质或特征,例如一个人的肤色、眼球…...
PMP考前冲刺3.06 | 2023新征程,一举拿证
题目1-2:1.一名团队成员表示,他们的用户故事要等到迭代结束后才能完成,因为他们的职能经理要求他们协助解决高优先级的生产问题。项目经理应该做什么?A.将问题上报给项目发起人以解决和调整项目燃尽图B.与产品负责人讨论用户故事不…...
buuctf-pwn write-ups (11)
文章目录buu083-x_ctf_b0verfl0wbuu084-picoctf_2018_leak_mebuu085-inndy_echobuu086-hitcontraining_unlinkbuu087-ciscn_2019_final_3buu088-axb_2019_fmt64buu089-wustctf2020_name_your_catbuu090-pwnme1buu091-axb_2019_brop64buu092-[极客大挑战 2019]Not Badbuu083-x_c…...
【VTK】VTK隐藏vtkOutputWindow窗口的正确方法
VTK隐藏vtkOutputWindow窗口 要求隐藏vtkOutputWindow窗口,但是不能把Warning警告和Error错误的信息都给屏蔽了 网上常见的错误方法: 现在百度搜索出来的方法几乎都是在这样做:在main文件中使用vtkOutputWindow::SetGlobalWarningDisplay(0…...
顺序表以及链表的应用及区别(包含OJ讲解)
前面我已经发过怎么实现链表以及顺序表,今天大概的总结一下。 顺序表: 1.能够随时的存取,比较方便。 2.插入删除时,需要挪动数据,比较麻烦,因为是连续存储。 3.存储密度相对于链表来说是比较高的&#…...
JVM简介
一、什么是JVM JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 Java语言的一个非常重要的特点就是与平…...
Leetcode.1653 使字符串平衡的最少删除次数
题目链接 Leetcode.1653 使字符串平衡的最少删除次数 Rating : 1794 题目描述 给你一个字符串 s,它仅包含字符 a和 b 。 你可以删除 s中任意数目的字符,使得 s平衡 。当不存在下标对 (i,j)满足 i < j,且 s[i] b的同…...
leetcode 71~80 学习经历
leetcode 71~80 学习经历71. 简化路径72. 编辑距离73. 矩阵置零74. 搜索二维矩阵75. 颜色分类76. 最小覆盖子串77. 组合78. 子集79. 单词搜索80. 删除有序数组中的重复项 II小结71. 简化路径 给你一个字符串 path ,表示指向某一文件或目录的 Unix 风格 绝对路径 &am…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
