一、什么是 loader
loader 和 plugins 是 webpack 系统的两大重要组成元素。依靠对 loader、plugins 的不同组合搭配，我们可以灵活定制出高度适配自身业务的打包构建流程。
loader 是 webpack 容纳各类资源的一个重要手段，它用于对模块的源代码进行转换，允许你在 import 或加载模块时预处理文件，利用 loader，我们可以将各种类型的资源转换成 webpack 本质接受的资源类型，如 javascript。
二、如何编写一个 yaml-loader
1、YAML
yaml 语言多用于编写配置文件，结构与 JSON 类似，但语法格式比 JSON 更加方便简洁。yaml 支持注释，大小写敏感，使用缩进来表示层级关系：
#对象
version: 1.2.4
#数组
author:
- Mike
- Hankle
#常量
name: "my project" #定义一个字符串
limit: 30 #定义一个数值
es6: true #定义一个布尔值
openkey: Null #定义一个null
#锚点引用
server:
base: &base
port: 8005
dev:
ip: 120.168.117.21
<<: *base
gamma:
ip: 120.168.117.22
<<: *base
等同于：
{
"version": "1.2.4",
"author": ["Mike", "Hankle"],
"name": "my project",
"limit": 30,
"es6": true,
"openkey": null,
"server": {
"base": {
"port": 8005
},
"dev": {
"ip": "120.168.117.21",
"port": 8005
},
"gamma": {
"ip": "120.168.117.22",
"port": 8005
}
}
}
在基于 webpack 构建的应用中，如果希望能够引用 yaml 文件中的数据，就需要一个 yaml-loader 来支持编译。一般情况下，你都能在 npm 上找到可用的 loader，但如果万一没有对应的支持，或者你希望有一些自定义的转换，那么就需要自己编写一个 webpack loader 了。
2、loader 的原理
loader 是一个 node 模块，它导出为一个函数，用于在转换资源时调用。该函数接收一个 String/Buffer 类型的入参，并返回一个 String/Buffer 类型的返回值。一个最简单的 loader 是这样的：
// loaders/yaml-loader.js
module.exports = function(source) {
return source;
};
loader 支持管道式传递，对同一类型的文件，我们可以使用多个 loader 进行处理，这批 loader 将按照“从下到上、从右到左”的顺序执行，并以前一个 loader 的返回值作为后一个 loader 的入参。这个机制无非是希望我们在编写 loader 的时候能够尽量避免重复造轮子，只关注需要实现的核心功能。因此配置的时候，我们可以引入 json-loader：
// webpack.config.js
const path = require("path");
module.exports = {
// ...
module: {
rules: [
{
test: /\.yml$/,
use: [
{
loader: "json-loader"
},
{
loader: path.resolve(__dirname, "./loaders/yaml-loader.js")
}
]
}
]
}
};
3、开始
这样一来，我们需要的 yaml-loader，就只做一件事情：将 yaml 的数据转化成为一个 JSON 字符串。因此，我们可以很简单地实现这样一个 yaml-loader：
var yaml = require("js-yaml");
module.exports = function(source) {
this.cacheable && this.cacheable();
try {
var res = yaml.safeLoad(source);
return JSON.stringify(res, undefined, "\t");
} catch (err) {
this.emitError(err);
return null;
}
};
就是这么简单。但是可能有朋友会问，这里是因为有个现成的模块 js-yaml，可以直接将 yaml 转换成 JavaScript 对象，万一没有这个模块，该怎么做呢？是的，loader 的核心工作其实就是字符串的处理，这是个相当恶心的活儿，尤其是在这类语法转换的场景上，对源代码的字符串处理将变得极其复杂。这个情况下，我们可以考虑另外一种解法，借助 AST 语法树，来协助我们更加便捷地操作转换。
4、利用 AST 作源码转换
yaml-ast-parser 是一个将 yaml 转换成 AST 语法树的 node 模块，我们把字符串解析的工作交给了 AST parser，而操作 AST 语法树远比操作字符串要简单、方便得多：
const yaml = require("yaml-ast-parser");
class YamlParser {
constructor(source) {
this.data = yaml.load(source);
this.parse();
}
parse() {
// parse ast into javascript object
}
}
module.exports = function(source) {
this.cacheable && this.cacheable();
try {
const parser = new YamlParser(source);
return JSON.stringify(parser.data, undefined, "\t");
} catch (err) {
this.emitError(err);
return null;
}
};
这里我们可以利用 AST parser 提供的方法直接转化出 json，如果没有或者有所定制，也可以手动实现一下 parse 的过程，仅仅只是一个树结构的迭代遍历而已，关键步骤是对 AST 语法树的各类型节点分别进行处理：
const yaml = require("yaml-ast-parser");
const types = yaml.Kind;
class YamlParser {
// ...
parse() {
this.data = this.traverse(this.data);
}
traverse(node) {
const type = types[node.kind];
switch (type) {
// 对象
case "MAP": {
const ret = {};
node.mappings.forEach(mapping => {
Object.assign(ret, this.traverse(mapping));
});
return ret;
}
// 键值对
case "MAPPING": {
let ret = {};
// 验证
const keyValid =
yaml.determineScalarType(node.key) == yaml.ScalarType.string;
if (!keyValid) {
throw Error("键值非法");
}
if (node.key.value == "<<" && types[node.value.kind] === "ANCHOR_REF") {
// 引用合并
ret = this.traverse(node.value);
} else {
ret[node.key.value] = this.traverse(node.value);
}
return ret;
}
// 常量
case "SCALAR": {
return node.valueObject !== undefined ? node.valueObject : node.value;
}
// 数组
case "SEQ": {
const ret = [];
node.items.forEach(item => {
ret.push(this.traverse(item));
});
return ret;
}
// 锚点引用
case "ANCHOR_REF": {
return this.traverse(node.value);
}
default:
throw Error("unvalid node");
}
}
}
// ...
当然这样的实现略为粗糙，正常来说，一些完备的 AST parser 一般都会自带遍历方法（traverse），这样的方法都是有做过优化的，我们可以直接调用，尽量避免自己手动实现。
按照相同的做法，你还可以实现一个 markdown-loader，甚至更为复杂的 vue-loader。
三、loader 的一些开发技巧
1、单一任务
只做一件事情，做好一件事情。loader 的管道（pipeline）设计正是希望能够将任务拆解并独立成一个个子任务，由多个 loader 分别处理，以此来保证每个 loader 的可复用性。因此我们在开发 loader 前一定要先给 loader 一个准确的功能定位，从通用的角度出发去设计，避免做多余的事。
2、无状态
loader 应该是不保存状态的。这样的好处一方面是使我们 loader 中的数据流简单清晰，另一方面是保证 loader 具有良好可测性。因此我们的 loader 每次运行都不应该依赖于自身之前的编译结果，也不应该通过除出入参外的其他方式与其他编译模块进行数据交流。当然，这并不代表 loader 必须是一个无任何副作用的纯函数，loader 支持异步，因此是可以在 loader 中有 I/O 操作的。
3、尽可能使用缓存
在开发时，loader 可能会被不断地执行，合理的缓存能够降低重复编译带来的成本。loader 执行时默认是开启缓存的，这样一来， webpack 在编译过程中执行到判断是否需要重编译 loader 实例的时候，会直接跳过 rebuild 环节，节省不必要重建带来的开销。
当且仅当有你的 loader 有其他不稳定的外部依赖（如 I/O 接口依赖）时，可以关闭缓存：
this.cacheable && this.cacheable(false);
如果你觉得这篇内容对你有价值，欢迎点赞并关注我们前端团队的 官网 和我们的微信公众号 WecTeam，每周都有优质文章推送~
