9-webpack-url-loader使用

这里,问题,解决方法,实现方法,图片配置
https://blog.csdn.net/u012138032/article/details/78342149

image.png

哈希值
通过哈希算法,将较长的数据映射为较短的数据,相当于文件的DNA是唯一的,源文件如果发生变化,哈希值也会发生变化,常用来校验从网络上下载的文章是否发生损坏

一.问题

当我们用到url来引入一张图片时,由于webpack不认识除js以外的其它任何文件,所以会发生错误

二.解决方法

通过url-loader和file-loader将图片转换为webpack可以解析的文件格式,这里file-loader只是url-loader依赖的一个转换器,不用加入图像转换规则

三.实现方法

• 安装处理图片的loader
  npm i url-loader file-loader -D
• 配置处理图片的loader规则
  {test:/.jpg|png|gif|bmp/,use:"url-loader"}

四.配置方法

• 默认情况下,url-loader会把所有传过来的图片转换为base64字符串格式的图片,这样做的好处是可以提升访问速度,坏处是会画质受损

base64:用字符串标识一张图片,会提升访问速度,压缩画质

• 通过给配置url-loader,是图片保留默认格式
  url-loader?limit=值
  如果图片大小(字节)小于值,会转换为base64
  如果大于等于值,不会转换为base64

• 默认情况下会修改图片的路径和名称

• &name=[name]:保持原有文件名称

• &name=[name].[ext]:保持原有文件名称和后缀

  
  image.png
  image.png
  image.png

• 如果在不同的文件夹下有同名的图片,会出现后面的覆盖前面的这种情况,为了避免这种情况,我们给每张图片名称加上哈希值,即所谓的图片DNA
  &name=[name]-[hash:8].[ext]
  

  image.png
  image.png
  image.png
  image.png
  image.png