探索webpack源码（五） Compiler.js（下） 2018-05-04

0x03 readRecords方法

上一次我们刚刚看完为什么要用tapable把beforeRun与run的callAsync调用的 "骨架" 先写好，这次我们就继续往下看吧。

this.hooks.run.callAsync(this, err => {
    if (err) return callback(err);

    this.readRecords(err => {
        if (err) return callback(err);

        this.compile(onCompiled);
    });
});

这里就是run节点调用完了以后执行的回调代码，首先就调用了 this.readRecords 。

readRecords(callback) { 
  if (!this.recordsInputPath) {
    this.records = {};
    return callback();
  }
  // something code...
}

在compiler.js可以直接找到这个函数，这里要回顾以下之前说的重点，这次是重点探索在命令行输入 "webpack" 之后的代码，但是单纯输入 "webpack" 却直接在if里被干掉了，下面的代码没有继续，目前猜可能是其他js里面会用到，例如watch？（瞎猜一下）

执行了if，return并执行了callback，就进入了刚刚的this.readRecords的回调，执行编译的方法：

this.compile(onCompiled)

0x04 compile方法

接下来看 compile 方法

compile(callback) {
  const params = this.newCompilationParams();
  // something code...
}

首先，执行了 compile 进行编译，编译的话就需要一个编译环境，那么自然就会有一个对应的 compilation。

所以第一行就初始化了编译环境的参数 compilation params。

0x05 newCompilationParams方法

可以在当前的js追溯一下这个方法：

newCompilationParams() {
    const params = {
        normalModuleFactory: this.createNormalModuleFactory(),
        contextModuleFactory: this.createContextModuleFactory(),
        compilationDependencies: new Set()
    };
    return params;
}

这里的参数有三个，创建完就返回出去待用，但是暂时还没发现用处，可能下一波 compilation.js 探索时能发现。
normalModuleFactory：普通模块工厂
contextModuleFactory：上下文模块工厂
compilationDependencies：编译环境的依赖项

0x06 beforeCompile与compile钩子。

好的，之前是在webpack调用了compiler.run函数，然后执行run钩子。现在在run钩子中调用compiler.compile函数，所以现在就开始执行compile的钩子了。

this.hooks.beforeCompile.callAsync(params, err => {
  if (err) return callback(err);
  this.hooks.compile.call(params);
  // something code ...
})

这里就是接着刚刚 newCompilationParams 创建参数之后的代码。

这里有俩钩子，一个编译前，一个编译中的钩子。之前怎么读这里的讲的很详细，相信把属性点加到智力上的同学都能看懂，我就不细说了，只提示要注意的地方。

所以这里要注意的有两点：

1、compile 的钩子，这里主要就是tap了三个插件， DelegatedPlugin、DllReferencePlugin、ExternalsPlugin，分别的 委派插件、DLL渲染插件、扩展插件，这里有疑问是好是，但是我暂时也不知道他们是干嘛的（逃

2、而 beforeCompile 的钩子似乎只有两个地方绑定，一个只是报消息：

compiler.hooks.beforeCompile.tap("WebpackInfo", compilation => {
  console.log("\nCompilation starting…\n");
});

相信大家都看过。

而另一个应该是用于处理刚刚 newCompilationParams 创建的params，因为我看到它有对 compilation.dependencies 做处理，详情在 DllReferencePlugin.js 文件，全局搜索 beforeCompile.tap 即可。

0x07 newCompilation

接下来就是创建编译环境了

const compilation = this.newCompilation(params);

这一段主要是 compilation.js 的内容，我这里只粗略的介绍一下。

newCompilation(params) {
    const compilation = this.createCompilation();
    compilation.fileTimestamps = this.fileTimestamps;
    compilation.contextTimestamps = this.contextTimestamps;
    compilation.name = this.name;
    compilation.records = this.records;
    compilation.compilationDependencies = params.compilationDependencies;
    this.hooks.thisCompilation.call(compilation, params);
    this.hooks.compilation.call(compilation, params);
    return compilation;
}

放眼一看，主要就是创建了一个 compilation 实例对象，然后对它进行各种配置，并且执行了它的俩钩子，分别是 thisCompilation 与 compilation。

也就是编译环境 开始之前 与 正在进行时 的钩子。

最后返回创建好的编译环境实例。

0x08 make钩子

创建完 compilation 编译环境后，就要开始构建了，

this.hooks.make.callAsync(compilation, err => {
  if (err) return callback(err);
  compilation.finish();
  // something code ...
});

make 负责构建webpack各模块之间的内容，看到把 compilation 当作参数传入就知道什么原因了，就是要开始操作编译环境了。

0x09 构建完成与封装构建

上面已经经过make构建了，现在是操作构建完成后的事情。

// 编译完成，关闭编译环境
compilation.finish();

// 封装编译构建的结果。
compilation.seal(err => {
  if (err) return callback(err);
  // something code...
});

0x0A afterCompile编译完成后钩子

接着就是封装完成后的钩子 afterCompile 钩子。

this.hooks.afterCompile.callAsync(compilation, err => {
  if (err) return callback(err);
  return callback(null, compilation);
})

这里也是如题所示，最后就是执行callback了。

这个 callback 不知道有没被大家遗忘啊，不过相信大部分玩家都有印象。

就是执行最初 compiler.compile(onCompiled) 时传的callback onCompiled 。

0x0B run函数中的callback onCompiled

又回到最初的起点，最后一点了，直入正题吧。

const onCompiled = (err, compilation) => {
  if (err) return callback(err);
  // something code ...
  this.emitAssets(compilation, err => {
    if (err) return callback(err);
    // something code ...
    this.emitRecords(err => {
      if (err) return callback(err);
      // something code ...
      this.hooks.done.callAsync(stats, err => {
        if (err) return callback(err);
        return callback(null, stats);
      });
    });
  });
};

这里一顿钩子操作，把输出的资源钩子都罗列出来了。

钩子	作用
emitAssets	输出资源
emitRecords	记录输出
done	结束钩子

当然 onCompiled 肯定不止这几个钩子，但是其他的钩子在if中，执行的时候并没有进入判断，所以先忽略吧。

---

杀青，杀青！下一次有可能就是Compilation.js的，请期待哦。