vue.js学习笔记二十 四——webpack中url-loader的使用之处理图片

接昨天的内容，在src目录下新建一个目录images，在目录中放入图片123.jpg

在index.css文件中引入图片做背景

.box {
    margin: 0;
    padding: 0;
    width: 300px;
    height: 400px;
    /*background-color: red;*/
    background: url('../images/123.jpg');
    background-size: cover;
}

保存，运行，发现报错了，是因为在默认情况下，webpack无法处理css文件中的URL地址，不管是图片还是字体库，只要是URL地址，都处理不了。

根据错误信息“You may need an appropriate loader to handle this file type”，知道是缺少一个loader，这个loader就是url-loader

1. 安装url-loader

npm i url-loader file-loader -D

注意：url-loader依赖file-loader，所以这里需要安装两个loader

2. 添加配置节点

在webpack.confg.js文件中加入配置文件

// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader' }

注意：

1. 因为图片后缀有多种，所以这里用正则表达式来表示所有的后缀名

2. 这里明明有两个loader，为什么use后面只写了一个url-loader了？这是因为file-loader是url-loader内部依赖的，所以这里不需要在use中定义

3. 当use后面只有一个loader的时候，可以用字符串表示，不需要用数组的形式

3. 运行

npm run dev

页面正常显示图片

用开发者工具查看图片链接，发现图片链接被转码成了base64的字符串，但是实际中，我们并不需要每一个图片都转成base64编码，有时候大图片是不需要转的。这时候，我们需要给url-loader配置所需要的参数

4. loader传参

传参的格式和url地址传参的格式一模一样。

4.1 limit参数

但是，这里传参有一个固定的参数limit

格式：?limit=文件限制的大小

limit给定的值是图片的大小，单位是byte，如果引用的图片的字节大于或等于给定的值，那么不进行base64编码的字符串

例如：当图片大小大于7632个字节的时候不进行base64编码

// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7632' }

4.2 name参数

limit参数解决了图片进行base64编码的问题，但是，我们发现，图片的在url中图片的名称发生了变化，变成一连串的字符串，这样是为了保证图片的唯一性，但是当我们在网页中多处引入同一张图片的时候，就无法实现了，需要引入多次，这时候，就需要使用name参数来指定图片的名称为原本的名称。

格式：name=[name].[ext]  ，[name]表示原来的图片加什么名称，现在还叫什么名。[ext]表示，后缀名和原来保持一致

例如：

// 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=391&name=[name].[ext]' }

但是，这样会出现一个问题，就是当我们有两个images目录，分别放置了两张不一样的图片，但是名称都是一样的，在页面中分别引用这两张图片的时候，webpack会帮我们打包解析成后引入的图片，也就是页面都会显示后面引入的图片。

那要怎么办呢，我们可以在图片名称前面加上hash值，用于区分。

格式：[hash:8]-  ，表示在名称前面加上一个8位的hash值并用“ - ”连接

例如：

 // 处理图片路径的loader
{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=391&name=[hash:8]-[name].[ext]' }

注意：hash值是一个32位的字符串，所以这里最大值为32,每一张图片的hash值都不一样，hash:8表示从该图片的32位hash值中截取前8位