在项目中添加两个图片，一个大于20kb，一个小于20kb的图片，在css中引用这两个图片
此时我们直接打包，会出现如下问题：
解决方案：
使用url-loader处理，先安装url-loader
npm install --save-dev url-loader
修改webpack.config.js配置文件
再次打包，运行index.html，会发现背景图片出来了，而且图片是以base64显示出来的，因为limit属性的作用
当图片小于20kb时，对图片进行base64编码
当图片大于20kb时，需要通过file-loader进行处理，安装file-loader
npm install --save-dev file-loader
再次打包会发现dist文件夹下多了一个图片文件
我们会发现webpack自动帮我们生成了一个非常长的名字
这是一个32位hash值，目的是防止名字重复，但真实开发中，我们可能对打包的图片名字有一定的要求，比如将所有的图片放到一个文件夹中，跟上图片原来的名字，同时也要防止重复
所以，我们可以在options中添加如下选项：
img：文件要打包到的文件夹
name：获取图片原来的名字，存在该位置
hash8：为了防止图片名称冲突，依然使用hash，但我们只保留8位
ext：使用图片原来的扩展
但我们发现图片并没有显示出来，这是因为图片使用的路径不正确
默认情况下，webpack会将生成的路径直接返回给使用者
但我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/
执行npm run build打包
