老vue项目webpack3升级到webpack5全过程记录(二)

本文详述了将项目从webpack4升级到webpack5的过程中遇到的关键点,包括mode的设置、loader写法变化、file-loader与url-loader的替换、插件引用和使用方式的更新,以及报错处理。升级后,构建和打包速度显著提升,虽然过程中遇到一些坑,但对webpack配置的理解更加深入。建议项目打包慢的开发者考虑进行类似升级。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文接上篇博客记录一些配置的升级过程中遇到的坑。

1、设置mode

通过指定mode参数,启用对应环境下webpack内置的优化。有三个可选参数:development,production,none。默认值为production,生产环境在production模式下,会自动压缩代码,可以去除之前配置的一些压缩代码的插件。

在这里插入图片描述

2、use写法不同

rules 中对loader的指定写法,支持写对象和数组模式

在这里插入图片描述

3、改写file-loader 和 url-loader

在webpack4前我们对一些静态资源的配置,都是通过file-loader 和 url-loader,webpack5引入资源模块的配置,不需要再配置了

在这里插入图片描述

4、对插件的引用和使用的更改

merge 的引用改成:

在这里插入图片描述

CopyWebpackPlugin的写法改成:

在这里插入图片描述

分离css的组件改成 mini-css-extract-plugin

对文件的压缩处理,放在optimization里性能更好

在这里插入图片描述

弃用之前的文件分离,采用新的分离和缓存机制

在这里插入图片描述

CompressionWebpackPlugin的写法改写

在这里插入图片描述

5、报错处理

在这里插入图片描述

出现类似的报错,查出原因是写法不对,版本太低,直接升级对应组件的版本就可以了

但是后来发现 iview 也有类似的报错,于是痛定思痛一起把iview的版本也升级了。升级iview还是蛮无缝的,目前遇到的不一致的有:

1、任何使用 from ‘iview’ 的都要替换为 from 'view-design’

2、新版的组件默认文字像素大小是14px

3、tree 的 render自定义写法有区别

6、结束语

升级后的构建和打包速度还是很感人的,尽管升级过程中遇到不少细节坑,但是进一步对webpack的配置有了更多理解,还是比较有收获的,如果你的项目打包构建很慢,也是时候更新一把了~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值