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

Z编程2024-03-17 23:53

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