这两个 loader 都挺常用的，并且它们之间也是相互依赖。
file-loader：从名字就可以看出来，它是用来处理文件的。当然我们平常真正需要编译的，往往是一些比较简单的文件，比如说图片，字体文件等等。
理论上 file-loader 可以编译任何文件，只不过一般比较大的文件，比如视频，音频等等，我们不会把它们编译到文件里面，而是会作为静态资源放到外面。
那么接下来就让我们一起来了解他们的作用和写法：
首先，我们继续用之前的项目结构，因为这里要用到文件，所以我们创建一个 imgs 目录，里面放一张图片。
然后我们写个背景图的样式，并且引入这个 css 文件，然后在 index.html 中引用：
接下来，我们将 webpack.config.js 中的配置回复到基础配置，并且编译：
可以看到，直接报错了，它说：我在处理 main.css 的时候出了一个问题，它里面有我不认识的东西。
其实很正常，因为我现在的 webpack.config.js 里面的配置，并没有任何 loader，所以它不会处理 css 文件。
OK，那么我们加上之后，再重新编译：
这时候会发现，结果还是报错，这次是 kebi.png 出问题了。
因为到目前为止，我们的 webpack 其实只认识两种文件：一种是 js 和 json，另一种就是 css。
所以现在它检测到，你引入了一个 png 文件，它是不认识的。那么没关系，我们继续加 loader。
我们先把 2 个 loader 都下下来： npm install file-loader url-loader -D
然后我们开始配置 file-loader，并且编译：
可以看到，编译成功，左上角也多出了一个图片文件。
所以 file-loader 其实也就是把 imgs/kebi.png 这张原始的图片，给你改了个名字，然后放到 dest 目录下边。
然后我们打开浏览器看下效果：
可以看到，图片并没有显示出来，但是我们会发现 style 标签里面，图片的 url 变成了一大串乱码。
然后我们可以看到上面的 index.html，它是在根目录下面的，那么可以根据它的位置，在浏览器上，手动的来引入 dest 下的图片：
但是我们需要它能自动的去添加，不可能以后每张图片都要我们手动的去添加。
那么我们就来解决这个问题：
我们知道 loader 是有两种写法的，我们还可以写成 json 格式，里面的 options 可以添加各种配置：
那么这里配置的 outputPath 是什么意思呢？
说白了，就是你的那些文件，图片，到底输出到哪个目录去。我这里就希望它能给我输出到 imgs 下面。
注意：这个 imgs 它不是相对于我整个项目的根，而是相对于我 output 里面的 path。
也就是说 outputPath: 'imgs/' 设置的目录其实是：D:/webpack_csdn/dest/imgs
当然，我们在这里加一层目录，只要是为了看起来方便，同时也是为了便于管理。
因为我们现在这里只是一张图片，但是我们的项目中可能有几十上百张，如果都放到 dest 一个目录下边，就没法看，太乱了。
那么我们编译下看看效果：
然后我们打开浏览器：
可以看到，虽然它的 url 已经是 imgs/xxx....，但还是没有图片。
原因很简单，它还是没有在 index.html 相对的 dest 那一层目录。
只有我们手动的，在浏览器上加上：dest/，就可以看到图片了。
所以问题仍然没有解决，那么怎么办呢？
没关系，我们只需要在加上一个 publicPath 就可以了：
publicPath 就是对外的路径。
这里稍微注意下，2个路径不要搞混了：
outputPath：是把文件放到哪儿去的路径。
publicPath：是输出到 css 里面的路径。
然后，我们重新编译之后，再打开浏览器，就可以看到图片正常显示了：
但是，我们都知道一件事，就是项目的文件越多，我们网页的性能就越差。
因为它需要不停的连接服务器，请求，关闭，又连接，又请求，又关闭......所以我们都知道 http 的连接数越多，那么我们网页的网络性能就越差。
那么为了解决这个问题，我们这里就不会再用 file-loader，而是改用 url-loader。
url-loader 和 file-loader，其实它们的配置，以及作用都差不多，只不过 url-loader 多了一个功能，就是：limit（限制）
limit: 8 * 1024 是什么意思呢？
意思就是说，如果说文件大小，超过 8 KB 的，我依然用 file-loader。
而如果文件小于 8 KB 的，都用 base64，直接存在 css 里面。
base64 就是把图片的内容，都给转成另外一个编码，因为 base64 是纯文本的，可以放到 css 里面，然后以此来减少重新请求的次数。（如果不懂 base64，你就把它理解成一大长串的字符串就好了。）
当然 base64 有一个缺陷，就是它会略微的增大文件的体积，比如说我原来是一个 100 KB 的文件，经过 base64 编码之后，它一般会达到 120 ~ 130 KB 左右。
所以我们这里设置 limit 的值，就不能过大。不然文件都给转成 base64，那整个文件的体积就太大了。
一般来说，我们在项目中设置 limit 的值，都是 2 ~ 4 KB 左右。
那么回到正题，我们先看下 kebi.png 图片的大小：
kebi.png 是 30KB，是大于我们设置的 limit，8 KB。那么我们编译后看下有什么效果：
可以看到，和刚才一样，和 file-loader 没什么区别。
所以，这就是文件大小 大于 limit 的情况下，就完全还是用 file-loader 那套。
那如果我这里设置 limit: 50 * 1024 之后，在重新编译：
我们会发现，imgs 文件夹没有了，图片也没有了。
那么我们打开浏览器看看图片还有没：
可以看到，图片依然正常显示，只不过你会发现它的 url 里面就不是一个地址了，而是一个 base64。因为这个图片本身就不小，所以它编译出来的 base64 有点大。
那我们在项目中一般是哪些东西用 url-loader 呢？
像一个小勾，一个小点，一条小横线那样的小图标。这些东西加到一起可能连几 KB 都没有的东西，我们就用 url-loader 会比较好。因为如果这些东西，我们都是从服务器来读取，就太浪费资源了。
所以 url-loader 的 limit 对小体积的图片比较合适，大图片不合适。
其实实际上来说，我们也可以只用 url-loader，因为它能涵盖掉 file-loader。
当然，在最开始我们也说了，url-loader 和 file-loader，它们之间是一个相互依赖的关系，不能独立的去存在。
比如，我们现在把整个 node_modules 都删掉，并且在 package.json 里面也删掉 file-loader。
然后重新 npm install。
也就是说，我们现在项目里面已经没有 file-loader 模块，只有一个 url-loader 了。
然后我们现在再重新编译看下：
可以看到，直接就给报错了，说我找不到 file-loader。
不觉得很奇怪吗？我明明没有用 file-loader 啊？
没错，我们的确没有用它，但是 url-loader，是它内部在调用。
也就是说，如果我们的文件大小，大于了 limit 设置的值，它就会调用 file-loader。
那如果我们把 limit 的值设置为特别大呢？
可以看到，如果我们的文件大小，小于了 limit 设置的值，它就用不着 file-loader 了。
因为它自己就能把事情解决了，所以也就不会报错了。但是我们是不能把 limit 设置这么大，如果这样设置，编译出来的 css 文件就好几十 M 了，就太大了。
所以：url-loader 它内部其实是根据 limit 来调用 file-loader 的。
那么到此，我们就已经知道了 file-loader 和 url-loader 两个东西的用法（其实只用 url-loader 一个就足够了）
其实在项目中，我们并不是只处理这些图片文件就可以了，我们还需要处理一些其他的文件，比如说字体文件。
比如说我们比较熟系的 bootstrap，我们可以用它来做个例子，因为它里面有一些 eot，svg，ttf，woff 之类的。
那么我们先安装它：npm install bootstrap@3 -D
装完之后，我们就直接引入它，但是这里有个小问题，bootstrap 是一个 css 文件，不是 js 文件。
所以我们不能直接引入：
我们其实引入的是 node_modules/bootstrap/dist/css/bootstrap.css
然后我们在 index.html 里面用 bootstrap 写一个简单的面板，并且加上自己的一个样式 my-css：
那么接下来，我们就来编译它看看结果：
可以看到，即使我们配置了 css 和 图片的 loader，但是仍然报了一堆错。
我们刚才在上面已经说了，其实 bootstrap 里面还有一些其他的文件。
比如上面报的：找不到对应的 loader 来处理 woff，eot，svg 等等。
所以，我们就需要第二个 url-loader 或者 file-loader：
然后我们重新编译：
可以看到，编译成功，并且告诉我们，它给我们生成了 woff2，svg，ttf，eot，woff 这几种文件。
然后可以看到，dest/fonts 目录下面也确实有这些文件：
同时，浏览器上也显示出了一个 panel：
那么到这为止，我们就对 file-loader 和 url-loader 有一个非常清晰的了解了。
注意以下两点就行：
1，url-loader 包含 file-loader 的功能，而且可以把文件转换成 base64 格式。
是否转换 base64 决定于：它会判断你文件的体积是多大，当大于一个界值（limit）的时候，就会以文件的形式放到打包文件夹下面。如果说小于这个界值（limit），我就会把它以 base64 的格式存到 html 里面。
2，url-loader 可以单独使用，但是必须要先下载 file-loader，否则无法正常使用。
