第八节、图片处理：css中的图片处理

开发过程中我们都曾在图片的坑中无法自拔过（有些人在开发环境中是可以找到图片的，但是一打包后就找不到图片了，有些人是不知道如何正确引入html或者css中的图片，导致程序出错），从这节内容开始以及后面的两节让我们一起来彻底走出webpack图片的坑。

图片写入css

---

首先我们找一张图片，找到图片后在src目录下建立一个images文件夹，用来存放图片。

在index.html文件中增加一个div标签（需要注意的是这里修改的是src下的index.html文件，不是dist下的），用来把我们添加的图片设置成它的背景图。

<div class="imageBg"> </div>

编写css文件（编写在我们之前设置的index.css文件中），把图片作为被进图设置进去

.imageBg{
    background: url("../images/banner2.jpg");
    width: 100%;
    height: 566px;
}

编写完成后，我们使用webpack去打包的时候，你会发现终端cmd会报错，接下来我们要讲到关键的知识点了

file-loader、url-loader

---

上面的错误是由于缺少loader的解析，对loader我门并不陌生，因为前边第五节css打包已经讲过了loader。我们先安装两个解析图片用的loader。

安装file-loader和url-loader

npm install file-loader  url-loader --save-dev

安装好后我们来讲解一下这两个依赖的作用。

file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

配置url-loader

我们安装好后，就可以使用这个loader了，记得在loader使用时不需要用require引入，在plugins才需要使用require引入。

//模块：例如解读css，图片如何转换，压缩
module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }, {
            test:/\.(png|jpg|gif)/,
            use:[{
                loader:'url-loader',
                options:{
                    limit:500000
                }
            }]
        }
    ]
},

• test:/\.(png|jpg|gif)/是匹配图片文件后缀名称。
• use：是指定使用的loader和loader的配置参数。
• limit：是把小于500000B的文件打成Base64的格式，写入JS。

写好后就可以使用webpack进行打包了，这回你会发现打包很顺利的完成了。具体的Base64的格式，你可以查看视频中的样子。

为什么只使用了url-loader

有的小伙伴会发现我们并没有在webpack.config.js中使用file-loader，但是依然打包成功了。我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：

1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；

2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，我们这里就顺便安装上file-loader。

这里我们补充一点，打包之后会发现图片并没有放到images文件夹下，这里我们只需要配置我们的url-loader选项就可以了。（注意，这里的limit设置的数值过高图片就不会打包到images文件夹下了，这里解释一下，大于你的limit的文件会限制走file-loader，还有一种方法就是直接配置file-loader，见图二）

{
    test:/\.(png|jpg|gif)/,
    use:[{
        loader:'url-loader',
        options:{
            limit:5000,
            outputpath:'images/'
        }
    }]
}

 {
    test:/\.(png|jpe?g|gif|svg)(\?\S*)?$/,
    use:[{
        loader:'file-loader',
        options:{
            name: 'images/[name].[ext]?[hash]'
        }
    }]
}