一、首先，什么是loader？
对于webpack来说，默认只能打包处理JS文件，或者说JS模块，但是webpack作为模块打包工具，需要打包的模块肯定不仅仅只有JS模块，还有：图片模块，CSS模块等等；但是webpack默认是没有图片模块、CSS模块打包功能的，所以问题来了，webpack如何打包除了JS模块之外的其他模块哪？那就得用到第三方loader了，所以按照我们表面理解：loader就是帮助webpack打包那些webpack默认打包不了的模块的工具；
二、如何在webpack中配置第三方loader
如下图：配置第三方loader，需要在webpack的配置文件中新增一个module节点，节点中是一个一个的规则集合，集合名字是rules，需要添加loader就在rules的集合中新增一个规则；每个规则必须的两个配置：
（1）test ：test搭配的是键值对，值是一个正则表达式，用来匹配要处理的文件类型；
（2）use ：用来指定使用哪个loader模块来打包处理该文件；
三、file-loader的作用
1、作用：file-loader可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；
2、使用file-loader打包图片的结果：使用file-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字；
四、file-loader打包图片的流程：
当webpack对项目代码进行打包构建时，遇到图片文件的时候，会去webpack的配置文件中，查找module节点，看看有没有对应的配置节点去处理图片的打包，发现图片文件是用file-loader进行打包的，就把图片文件交给file-loader进行打包，file-loader会首先将图片移动到出口文件夹下（我的项目时在bundle中），并且随机生成一个hash值，当做图片的名字；并将打包后的图片名称返回给require函数；
如下图：require函数加载的其实是打包后的图片文件名字；
五、file-loader的常用配置项：
file-loader的配置项，是在use节点下新增一个options节点；
（1）name配置项是配置打包生成的文件的名字，使用的是placeholder语法，
[name] 表示的是原文件的名字；[hash] 表示的是这次打包的hash值 [ext]表示的是原文件的后缀；
因此通过这个配置项，我们可以修改打包文件的名称；
（2）outputPath配置项配置的打包生成的文件存放的路径，这个路径是在出口文件夹（我的是bundle文件夹）中的位置；
如图，是我配置过后打包生成的图片名字，以及存放路径；
