Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。
以处理 SCSS 文件为例：
- SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS；
- 把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；
- 把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码；
可以看出以上的处理过程需要有顺序的链式执行，先 sass-loader 再 css-loader 再 style-loader。
Loader 的职责
一个 Loader 的职责是单一的，只需要完成一种转换。
如果一个源文件需要经历多步转换才能正常使用，就通过多个 Loader 去转换。
在调用多个 Loader 去转换一个文件时，每个 Loader 会链式的顺序执行，
第一个 Loader 将会拿到需处理的原内容，上一个 Loader 处理后的结果会传给下一个接着处理，最后的 Loader 将处理后的最终结果返回给 Webpack。
所以，在开发一个 Loader 时，需要保持其职责的单一性，我们只需关心输入和输出。
参考链接地址：https://segmentfault.com/a/1190000012718374