Webpack轻松入门（三）——图片打包

我们知道，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。

上一节

我们讲到如何使用css-loader和style-loader两个loader来打包CSS代码，这次我将继续讲解如何使用loader将图片类型文件进行打包处理。

一、上节回顾

为了让大家思路更加明朗，我还是先将上一节结束时的目录结构和一些关键文件内容展示一下吧。

目录结构

index.js：

二、图片打包

图片打包关键要用到file-loader或url-loader，其中url-loader与file-loader功能基本一致，只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。

1. CSS中的图片

比如，我现在在src目录下新增一个images文件夹，再在images中添加一张图片“1.jpg”。然后我在style.css中添加以下代码：

如果这时直接进行打包，那么肯定会报错，比如像这样的：

① 输入命令安装file-loader

其实对于只有单个loader的，我们还可以将其简化成下面这样：

接下来，我们只需执行命令进行打包即可。

虽然我们已经将图片但是打包后，我们会发现打包后的图片名发生了变化：

那么如何才能保持图片名不变，而且也能够添加到指定目录下呢？

我们只需要再添加一个options属性即可：

其中name属性其实就是图片打包后的路径，其中包括图片名（[name]）和图片格式（[ext]）。

此时打包后的dist目录结构如下：

2. JS中的图片

file-loader能自动识别CSS代码中的图片路径并将其打包至指定目录，但是JS就不同了，我们来看下面的例子。

如果不使用Webpack打包，正常情况下只要路径正确图片是能够正常显示的。然而，当使用Webpack打包后，我们会发现图片并未被成功打包到dist目录，自然图片也无法显示出来。

这其实是因为Webpack并不知道'../images/1.jpg'是一张图片，如果要正常打包的话需要先将图片资源加载进来，然后再将其作为图片路径添加至图片对象。具体代码如下：

3. 浅谈url-loader

除了使用file-loader对图片进行打包处理外，我们同样也可以使用url-loader代替，另外我们还可以对小于某个大小的图片进行base64格式的转化处理。

这里limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理，例如：

当然，如果不写limit属性，那么url-loader就会默认将所有图片转成base64。

本文重点总结

① 使用file-loader或url-loader可对图片进行打包操作

② url-loader可将图片转成base64格式