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

相关推荐
@PHARAOH11 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
驰羽11 小时前
[GO]golang接口入门:从一个简单示例看懂接口的多态与实现
开发语言·后端·golang
undefined在掘金3904111 小时前
flutter 仿商场_首页
前端
少卿11 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>11 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
ii_best11 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器
王夏奇12 小时前
C++友元函数和友元类!
开发语言·c++
Full Stack Developme12 小时前
jdk.random 包详解
java·开发语言·python
懒羊羊不懒@12 小时前
Java基础入门
java·开发语言
JYeontu12 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript