webpack 图片处理和优化

本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。

而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。

如何在webpack中打包图片

在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别：

• file-loader：能够根据配置项复制使用到的资源到构建之后的文件夹，并且能够更改对应的链接。
• url-loader ：包含 file-loader 的全部功能，并且能够根据配置将符合配置的文件转换成 Base64 方式引入，将小体积的图片 Base64 引入项目可以减少 http 请求，也是一个前端常用的优化方式。

下面我们使用 url-loader 为例，说明一下在 webpack 中打包图片的方法。

示例：

例如继续使用之前的 xkd_webpack 项目，在项目根目录下创建一个用于存放图片的 images 文件夹。然后在这个文件夹下面任意添加一张图片，例如img1.png。

然后我们在 xkd.css 中使用这张图片，代码如下所示：

html{
    
    background: url("./images/img1.png"