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

相关推荐
前端Hardy11 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy11 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙12 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
总有刁民想爱朕ha12 小时前
车牌模拟生成器:Python3.8+Opencv代码实现与商业应用前景(C#、python 开发包SDK)
开发语言·python·数据挖掘
web前端12312 小时前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天12 小时前
前端 9大 设计模式
前端
搞个锤子哟12 小时前
网站页面放大缩小带来的问题
前端
hj5914_前端新手12 小时前
React 基础 - useState、useContext/createContext
前端·react.js
半花12 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试12 小时前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端