上一章是探索完Tapable的使用方式，相信大家干翻了前几个boss.js，已经收刮到不少装备，也升了不少级了，有把属性点加在智力上吗？没有的话可能要save/load一下了，回到第一章重新开始加点了哦哈哈哈哈。
把属性点加在智力上的就继续到下一张地图的boss吧，今天是来到compiler.js这张地图。
这里主要是写compiler的运作方式，咱们开始刷怪吧。
我们先从constructor下手吧，从顺序来说不应该先看这里，但是最后还是会回到这里，所以还是先科普一下吧。
class Compiler extends Tapable {
constructor() {
// something code ...
this.hooks = {
// a pile of hooks
}
// something code ...
}
otherMethods() {
// something code ...
}
}
为什么要先介绍constructor呢，主要是因为compiler.js主要就是把成个编译流程，通过Tapable的钩子写好了，Tapable在 探索webpack源码（三）已经介绍过了。
compiler.js的核心就在于constructor的this.hooks钩子里，这里定义了许多不同阶段的钩子，了解完这里以后，我们就可以继续往下看了。
在 探索webpack源码（一）中最后的代码块里，来一波回忆杀：
function processOptions(options) {
// 各种if else 过滤和配置
// something code...
let compiler;
try {
// 运行webpack函数，返回一个compiler对象
compiler = webpack(options);
} catch (err) {
// something code...
}
// 执行compiler中的run，开始编译。
compiler.run(compilerCallback);
}
没错就是 compiler.run 这个api，说明在命令行输入webpack的时候，进入编译模式走的就是这一段代码。
// webpack-cli.js
let compiler = webpack(options);
compiler.run(compilerCallback);
在webpack-cli.js已经把webpack实例化，得到了compiler，然后执行了run方法。
所以我们看完constructor就看run方法：
// 1
const startTime = Date.now();
// 2
const onCompiled = (err, compilation) => {
// something code;
};
// 3
this.hooks.beforeRun.callAsync(this, err => {
// something code;
});
run方法里面主要就是这三段话。
1、startTime就是用来计算编译器所消耗时间的初始时间点。
2、当编译完成后需要执行的函数，处理编译完成后的事情。
3、编译钩子的开端。
这里主要讲的顺序也是从第3点的beforeRun钩子开始讲，讲完整个第3点后，再开始讲第2点编译完成后的函数。
第3点这里的代码也不多，就直接全部贴上来吧：
this.hooks.beforeRun.callAsync(this, err => {
if (err) return callback(err);
this.hooks.run.callAsync(this, err => {
if (err) return callback(err);
this.readRecords(err => {
if (err) return callback(err);
this.compile(onCompiled);
});
});
});
讲真，我把源码看到这里的时候是一脸懵逼，为啥 async钩子 只接收一个参数的时候，还可以带一个 error-first 风格的回调函数？
而我用各种IDE去搜索，最后都只找到 beforeRun.tap 的方式来绑定tapable事件，这里我一度是认为IDE搜索不全面，然后手动找了半天源码也无果，仔细思考也无果（因为也想不到除了webpack内部还有哪里会绑定beforeRun这个钩子），然后再去看doc，咦？还真有这种用法。
最后自己创建了一个文件才搞清楚，用tap绑定后，callAsync时，最后一个参数会接收一个 error-first 风格的回调函数。只有async钩子并且用tap绑定才有哦。
这一段思维上的bug也更新在 探索webpack源码（三）--- Tapable插件使用 里头。（我真的没有在给自己卖广告，只是方便你们阅读，逃。
废话了那么多，现在进入正题：
上面的代码段只有俩钩子，分别是beforeRun和run。
beforeRun：异步钩子，用于运行前。
run：异步钩子，用于运行时。
它们都接收一个 "compilation" 作为参数，这个可以在constructor的this.hooks里找到定义，我们来拆解一下这部分代码：
// this.hooks.beforeRun
// this === class Compiler
// callback === webpack-cli.js定义的一个compilerCallback函数。
// 似乎用来处理编译完成输出用的，有输出流也有hash处理，没细看。
//（有挺多callback传进来的，目前我按着顺序来看就是这个callback）
// 先接收了自己，再接收一个回调函数
// 如果beforeRun.tap里面有错误，就停止编译，将错误返回出去处理。
this.hooks.beforeRun.callAsync(this, err => {
if(err) return callback(err);
// somthingcode ...
})
// 同理
this.hooks.run.callAsync(this, err => {
if(err) return callback(err);
// something code...
})
这样基本的两个钩子都弄懂了，可是为什么要这么写呢？我感觉是为了更好的把代码模块化吧，这里就是骨架，把 beforeRun，run 这个流程骨架定义好了，beforeRun 要做什么，run 要做什么，就由得用户自己去填了，这个应该是面向切面编程吧，跟建房子一样，钢筋搭好了，剩下的就是填水泥了（填代码了），个人愚见哈。
上面说的可能抽象了一点，下面我们可以看看给beforeRun.tap过事件，和run.tap过事件的js，因为不是我现在探索的重点，我就把几个js都放一个代码块了：
// NodeEnvironmentPlugin.js
compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
if (compiler.inputFileSystem === inputFileSystem) inputFileSystem.purge();
});
// CachePlugin.js
compiler.hooks.run.tapAsync("CachePlugin", (compiler, callback) => {
// something code...
});
以上代码块就是用来 "填充" 刚刚写好的 "骨架" ，分别都是由其他js文件，作为插件的形式在对应的 "生命周期"，或者说是 "骨架的节点"来进行填充你想要的代码，是不是有点豁然开朗的感觉？
这次就到这里吧。。还有很多东西没写完，写的有点久了，太长看着也很恶心。
网友评论