持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

file-loader

file-loader:处理静态资源模块的。
是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称。
我们知道webpack默认只支持js、json，如果我们要在页面上显示一张图片的话，webpack默认是不支持的，例如，

src/index.js :

引入了一个01.jpg的图片文件,执行一下：
报错了，需要安装一个支持jpg图片的loader,并让在webpack文档中的查找对应的loader,file-loader就可以，现在安装一下file-loader:
npm install file-loader
安装成功后，看下package.json:

成功安装了，并且安装的是6.2.0版本的，有同学依旧报错的话，可尝试一下降级，因为webpack高版本不稳定，可以装一个稳定的版本。
完了，也要配置一下，在webpack.config.js中：

在执行一下构建npm run ... 看效果：

这次肯定不会报错了，首先出口文件中dist下面多了一个我入口文件里引入的jpg图片文件。
再看看dist/index.html的效果，这个dist/index.html是我自己手动添加的，为了方便看我们的代码效果。
此html里引入了出口文件index.js,而出口文件index.js是由入口文件src/index.js生成的，所以出口文件里的dist/index.html其实是引进了我入口文件src/index.js里面的代码啦，入口文件src/index.js代码如下：

出口文件dist/index.html代码：

index.js里我先把01.jpg引进来，然后做了打印，最后把图片添加到id为app的div里面。我们看下效果：

可以看到打印的是一个地址名称，图片也成功显示出来啦。

配置选项（ext、name、path）

但是我们可以看一下，出口文件里面的图片名字太长了，应该是个默认的哈希格式的文件名称，这个太长了不雅观也看不出是哪个图片。

这个我们也可以配置一下，可以在loader官网里面查阅。
我们这样配置，以自己入口文件的名字为出口文件的名字

[ext]: 资源扩展名的意思
[name]:资源的基本名称
执行构建，看效果：

出口文件里多了一下01.jpg跟我们入口文件里的名字一样。
我们再配置一下path,就是入口在哪个文件路径里，出口时这个图片也在对应的文件路径里。
path: 资源相对于 context的路径
webpack.config.js:

执行够建，看效果：

跟入口文件里的路径是一样的。
但是我们有没有发现一个问题，我们每次打包的时候，出口文件里面前几次生成的文件依旧存在。

按理说最新打包文件里面是没有这两个的， 看起来也很繁琐，不好看，不便于管理。所以，我们可以用这个插件clean-webpack-plugin。

clean-webpack-plugin

清除dist打包文件里多余的文件.
安装：
npm install clean-webpack-plugin

配置：
webpack.config.js:

执行构建，看效果：

ok, 打包文件里干净了。