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格式的字符串了

相关推荐
许嵩661 分钟前
IC脚本之perl
开发语言·perl
长亭外的少年12 分钟前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
直裾12 分钟前
Scala全文单词统计
开发语言·c#·scala
心仪悦悦13 分钟前
Scala中的集合复习(1)
开发语言·后端·scala
JIAY_WX15 分钟前
kotlin
开发语言·kotlin
会发光的猪。31 分钟前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客1 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
代码小鑫1 小时前
A043-基于Spring Boot的秒杀系统设计与实现
java·开发语言·数据库·spring boot·后端·spring·毕业设计
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html