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

相关推荐
Apifox6 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞9 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行9 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581010 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周13 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队32 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
The Future is mine34 分钟前
Python计算经纬度两点之间距离
开发语言·python
Enti7c35 分钟前
HTML5和CSS3的一些特性
开发语言·css3
爱吃巧克力的程序媛42 分钟前
在 Qt 创建项目时,Qt Quick Application (Compat) 和 Qt Quick Application
开发语言·qt
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯