webpack5零基础入门-6webpack处理图片资源

1.在webpack5中file-loader和url-loader为内置模块

通过在加载器中配置rule即可激活

复制代码
	{
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset'
            }

2.使用webpack进行打包

执行npx webpack

可以看到图片资源打包后都被放到了dist文件目录下

3.使用webpack进行图片格式转换为base64

优势:base64格式能被浏览器直接识别,无需额外发起请求

劣势:图片体积会变大,图片越大体积增加越多,越小增加越少,所以大图片不能转成 base64,小图片可以。

配置:

复制代码
{
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        //小于200kb的图标转base64,减少请求数量
                        maxSize: 200 * 1024 // 200kb
                    }
                }
            }

配置parser属性下的dataUrlCondition属性即可根据设置的规则将图片资源转换为base64格式

这里为了测试将maxSize设置成200kb

重新打包

可以发现图片资源都没了,都打包成了base64格式的字符串了

相关推荐
树上有只程序猿9 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥15 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸15 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin18 分钟前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊23 分钟前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆31 分钟前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术39 分钟前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙1 小时前
GIT 配置别名&脚本自动化执行
前端·git