在Webpack中，js文件是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行打包。
一、图片打包
图片打包要用到file-loader或url-loader，其中url-loader与file-loader功能基本一致，只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。
1. CSS中的图片
比如，我现在在src目录下新增一个images文件夹，再在images中添加一张图片“1.jpg”。然后我在style.css中添加以下代码：
html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}
如果这时直接进行打包，那么肯定会报错，比如像这样的：
第三行它提示你需要使用一个loader来处理图片这种类型的文件，这时，我们只需把file-loader装上，并在webpack.config.js中添加相应配置就ok了。
① 输入命令安装file-loader
npm i -D file-loader
② 在webpack.config.js中的rules数组中添加file-loader的相关配置
{
test: /\.(png|jpg|gif|svg)$/,
use: ['file-loader']
}
其实对于只有单个loader的，我们还可以将其简化成下面这样：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader'
}
接下来，我们只需执行npm build命令进行打包即可。
虽然我们已经将图片但是打包后，我们会发现打包后的图片名发生了变化：
那么如何才能保持图片名不变，而且也能够添加到指定目录下呢？
我们只需要再添加一个options属性即可：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
其中name属性其实就是图片打包后的路径，其中包括图片名（[name]）和图片格式（[ext]）。
此时打包后的dist目录结构如下：
2. j s中的图片
file-loader能自动识别CSS代码中的图片路径并将其打包至指定目录，但是JS就不同了，我们来看下面的例子。
// index.js
var img = new Image();
img.src = '../images/1.jpg';
document.body.appendChild(img);
如果不使用Webpack打包，正常情况下只要路径正确图片是能够正常显示的。然而，当使用Webpack打包后，我们会发现图片并未被成功打包到dist目录，自然图片也无法显示出来。
这其实是因为Webpack并不知道'../images/1.jpg'是一张图片，如果要正常打包的话需要先将图片资源加载进来，然后再将其作为图片路径添加至图片对象。具体代码如下：
// index.js
var imgSrc = require('../images/1.jpg');
var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);
3. url-loader
除了使用file-loader对图片进行打包处理外，我们同样也可以使用url-loader代替，另外我们还可以对小于某个大小的图片进行base64格式的转化处理。
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: './images/[name].[ext]',
limit: 8192
}
}
这里limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理，例如：
当然，如果不写limit属性，那么url-loader就会默认将所有图片转成base64。
