webpack入门（五）-- 处理图片资源

webpack入门（五）-- 处理图片资源

处理图片资源

过去在 Webpack4 时，我们处理图片资源通过file-loader和url-loader进行处理。
但是webpack5是直接内置这两个加载器，我们只需要配置即可。

• ①配置内置loader
  

• ②添加图片资源，并且在样式模块中引用。
  

• ③打包编译
  
  打开 index.html 页面查看效果
  
  注意：
  
  此时如果查看打包后的 dist 目录的话，会发现多了图片资源，因为 Webpack会将所有打包好的资源输出到 dist 目录下。
  那为什么样式输出没有文件呢？
  因为style-loader将样式文件打包到main.js中去了，所以没有额外输出。

• ④优化图片资源打包
  刚刚的配置方式，只是让webpack原样输出图片资源。不过我们可以通过配置解析规则，去将图片资源按照不同大小采用不同的方式。
  将小于某个大小的图片转化成 data URI 形式（Base64 格式）
  什么是data url形式呢？就是将图片资源转换为一长串字符串资源。而这个字符串会内置到js中，就是说资源会随着js的加载一起被加载。
  这样做的好处就是，减少了额外的网络资源请求。但是有个问题是，图片资源转base64后会变大，而且是越大的图片，转为base64后增加的体积越多。
  通常是设置小于15k左右的资源转为base64格式。
  总结：
  优点：减少请求数量
  缺点：体积变得更大
  
  可以看到打包后图片资源不再单独输出，而是转为base64字符串格式。（注意：需要将上次打包生成的文件清空，再重新打包才有效果）
  

总结

webpack5已经内置了图片的资源处理，我们只需配置即可。
可以配置解析规则，让小于一定大小的图片资源转为base64格式，减少网络资源请求优化