loader 可以说是 webpack 的核心，没有 loader，webpack 基本就做不了什么事。
那什么是 loader 呢？从字面意思来看，就是用来加载东西的。
那加载的是什么，为什么需要它？
首先，我们要知道，webpack 它本身只能处理 js 或 json 这些基本的，和 js 相关的格式，简单来说就是 webapck 只认 js。
而如果你用了 loader，就可以让 webpack 来处理 js 以外的东西，比如 css 文件，less 文件，vue 文件，图片，视频等等。
说白了，就是 webpack 不认识的东西，就需要 loader 来识别和处理。
接下来，我们就一起来看下，loader 这个东西怎么用的。
首先，我们仍然是先初始化 npm init -y
然后，我们先下载2个 loader：npm install style-loader css-loader -D
然后，我们创建一个 webpack.config.js，并写入基础配置：
接着在 src/js/index.js 中写入代码 alert('a')，编译后，在 index.html 中引用。
可以看到，一切都很正常。
但是一般来说，我们页面中都是有一些元素的，比如我们添加一个 div，并添加一个 class = 'box'。
但是这时候，我不想用 link 标签去引入 css 文件，因为在整个 index.html 里面，我就只想引入一个 bundle.min.js。
那么，我们可以在 index.js 里面引入 css：
import '../css/main.css' 的意思就是：我只是引入这个 main.css，我并不去用它里面的东西。
这样做，是为了让 main.css 成为打包结果的一部分。
那么我们来编译试下：
可以看到，结果出错了，它说：
我在处理 main.css 的第一行就出问题了，我没有办法去解析它，你可能需要某种 loader 去处理这个文件。
其实这个报错很正常，因为在默认的情况下，webpack 会认为所有的东西都是 js，你在上面引入了一个 css 文件，那它当然会认为你的语法不合要求。
那么接下来，我们就要给 webpack 增加 loader 了，那它怎么写呢？
module 就是模块的意思，就是说 webpack 我在工作的时候，需要一些其他的模块来帮我。
说白了， webpack 如果你有不认识，不知道怎么处理的东西，过来我这个模块里面，找方案解决就行了。
然后它下面有个 rules，就是规则的意思。简单来说，就是如果你碰到这种文件，就这样来处理，碰到那种文件，就那样处理。
rule + s，意思就是它里面可以有很多很多的规则，所以它的值是一个数组。（一般来说，webpack 里面的配置，后面带 s 的，对应的值基本都是数组）
rules 里面就是一个个的 json，这个 json 里面也没别的，就2个东西，test 和 use。
test 就是一个用来检测的正则表达式，如果符合规则，就用 use 里面的东西来处理它。
那么我们回到主题，上面之所以报错，是因为它根本就不认识 css 文件，那这里我们就来配置下：
{ test: /\.css$/, use: 'css-loader' } 的意思是：只要是 .css 结尾的文件，你就去用 css-loader 来处理它。
那么配置好之后，让我们重新编译下：
可以看到，编译成功，因为 webpack 已经知道如何来处理 css 文件了。
那么接下来，我们打开页面：
我们发现，div 的颜色并没有改变，这是为什么呢，我们的 css 文件不是已经成功处理了吗？
其实我们的 loader 是可以配合起来用的，单靠一个 css-loader 是处理不了事情的，我们还需要一个 style-loader。
可以看到，这里 use 的值，对应的是一个数组。
其实 use 不仅仅可以是一个字符串，它还可以是一个数组，意思就是你可以用多个 loader 来处理。
那么这时候，我们再来看看：
OK，样式出来了。那么它中间到底发生了什么？
首先，我们需要知道一件事，loader 的执行是有顺序的，不是说可以随便乱放，它是从后往前执行的。
也就是说，如果碰到了 .css 结尾的文件，它是先用 css-loader 处理一遍，
然后把 css-loader 处理后的结果，再交给 style-loader 来处理，
然后 style-loader 处理完了，再给到 webpack。
也就是说，use 的第一个值其实是 webapck 本身：
use: [ webapck, 'style-loader', 'css-loader' ]
那么，我们关心的是 css-loader 和 style-loader 都有什么用呢？
简单来说， css-loader 作用就是：用来读取、并且解析 css 文件、包括去解析 css 里面的 import，就是我可以从这个 css 里面去引另外的 css 文件、并且还可以解析它里面的 scoped。
就像我们前面看到的，如果没有它，在编译的时候，就会报错。而 css-loader 可以帮助 webpack 把 css 文件解析出来，然后包装成一个 js 的字符串。
我们可以试下，如果去掉 style-loader，只用 css-loader 会怎么样：
编译后，我们打开 bundle.min.js 可以看到：
它其实就是把样式给读出来，然后变成了一个字符串。这样的话，webpack 就能认识了，因为字符串也是 js 里面的东西。
其实这时候，它读出来，仅仅只是放到结果文件里面，是没有用的，因为它并不会真正的让页面里面的元素产生效果，毕竟它这里只是一个字符串而已。
所以接下来，我们就需要 style-loader 的帮助，那么 style-loader 的作用是什么呢？
它的作用是可以把你的样式，输出到 head 里面的一个 style 标签里面。
那么我们重新加上 style-loader 之后，编译并刷新页面：
可以看到，加了 style-loader 之后，head 标签里面就多了一个 style 标签，里面的样式就是我们 main.css 的样式。
所以 css-loader 其实就是负责把 css 文件给读出来，并且变成 js 的字符串。
而 style-loader 其实用的就是 css-loader 处理后的成品字符串，然后把这个字符串输出到 style 标签里面，就是一个 createElement 的操作。
所以它们两个需要配合，并且是 css-loader 先处理。
我们可以看下，如果调换下顺序，让 style-loader 先处理会怎么样：
可以看到，直接就报错了，说你这根本就不是一个 css 啊。
因为 css-loader 需要的是一个原始的 css 文件，而调换顺序之后，我们是先用 style-loader 处理，并且把结果给到 css-loader，那肯定是出不来的。
css-loader 分析模块之间的关系，合成一个 css，然后包装成一个 js 的字符串。
style-loader 会把 css-loader 生成的内容，以 style 挂载到页面的 head 部分。
那么关于 loader 需要注意 2 点：
1，当 webpack 遇到不认识的东西的时候，就应该去找相对应的 loader 解决。
2，loader 的先后顺序很重要。
