深入webpack4源码（三）—— complier
在继续看上节里react-script里的代码：
const webpack = require('webpack');
function build(previousFileSizes) {
let compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
// ....
})
})
}
得到compiler之后，我们就开始正式编译了，这个时候就是调用的compiler.run()。
之前说webpack就是定义了一系列勾子和调用一系列勾子，这里其实就是调用一系列勾子：
this.hooks.beforeRun.callAsync(this, err => {
if (err) return finalCallback(err);
this.hooks.run.callAsync(this, err => {
if (err) return finalCallback(err);
this.readRecords(err => {
if (err) return finalCallback(err);
this.compile(onCompiled);
});
});
});
这里先调用了beforeRun勾子然后回调函数中调用run勾子，接着是readRecords勾子，最终才调用了compile方法，并且传入了一个回调函数onCompiled：
const onCompiled = (err, compilation) => {
if (err) return finalCallback(err);
if (this.hooks.shouldEmit.call(compilation) === false) {
const stats = new Stats(compilation);
stats.startTime = startTime;
stats.endTime = Date.now();
this.hooks.done.callAsync(stats, err => {
if (err) return finalCallback(err);
return finalCallback(null, stats);
});
return;
}
this.emitAssets(compilation, err => {
if (err) return finalCallback(err);
if (compilation.hooks.needAdditionalPass.call()) {
compilation.needAdditionalPass = true;
const stats = new Stats(compilation);
stats.startTime = startTime;
stats.endTime = Date.now();
this.hooks.done.callAsync(stats, err => {
if (err) return finalCallback(err);
this.hooks.additionalPass.callAsync(err => {
if (err) return finalCallback(err);
this.compile(onCompiled);
});
});
return;
}
this.emitRecords(err => {
if (err) return finalCallback(err);
const stats = new Stats(compilation);
stats.startTime = startTime;
stats.endTime = Date.now();
this.hooks.done.callAsync(stats, err => {
if (err) return finalCallback(err);
return finalCallback(null, stats);
});
});
});
};
这里的流程也比较能理解，这里其实就是完成编译之后需要做的事情，一般就是两件事：
- 输出打包后的资源；
- console出打包后的资源信息：大小耗时等；
但是他是先调用了一个勾子shouldEmit，明确的返回了false后就不再输出资源了。不然就是调用this.emitAssets() 输出资源。
然后在emitAssets中的回调里又做了判断，调用了一个勾子needAdditionalPass，如果为true就继续调用additionalPass并且再次编译。否则继续调用this.emitRecords()输出打包记录，再最终的回调里再调用done的勾子，然后再finalCallback，也是我们最开始传入的compiler.run的callback。
这里是把回调讲完了，但其实这是一层一层的调用，先是this.compile() 回调里再 this.emitAssets() 回调里再 this.emitRecords()。我们一个函数一个函数看。
emitRecords
emitRecords(callback) {
if (!this.recordsOutputPath) return callback();
const idx1 = this.recordsOutputPath.lastIndexOf("/");
const idx2 = this.recordsOutputPath.lastIndexOf("\\");
let recordsOutputPathDirectory = null;
if (idx1 > idx2) {
recordsOutputPathDirectory = this.recordsOutputPath.substr(0, idx1);
} else if (idx1 < idx2) {
recordsOutputPathDirectory = this.recordsOutputPath.substr(0, idx2);
}
const writeFile = () => {
this.outputFileSystem.writeFile(
this.recordsOutputPath,
JSON.stringify(this.records, undefined, 2),
callback
);
};
if (!recordsOutputPathDirectory) {
return writeFile();
}
this.outputFileSystem.mkdirp(recordsOutputPathDirectory, err => {
if (err) return callback(err);
writeFile();
});
}
没啥好说的，更具系统拿到recordsOutput的相对路径，然后写入文件。
emitAssets
源码太长了，这里其实拿到了conpiler编辑后得到的compilation，而compilation的assets就代表输出的静态资源对象数组，引用了一个库const asyncLib = require("neo-async");并行输出资源，其中如果配置了output.futureEmitAssets会启用一个新的资源输出逻辑，暂时还不是很明白这里的作用，输出的具体内容是调用了compilation.assets里对象的source方法得到content，然后调用之前讲的webpack的文件输出系统输出。
compile
const params = this.newCompilationParams();
this.hooks.beforeCompile.callAsync(params, err => {
if (err) return callback(err);
this.hooks.compile.call(params);
const compilation = this.newCompilation(params);
this.hooks.make.callAsync(compilation, err => {
if (err) return callback(err);
compilation.finish(err => {
if (err) return callback(err);
compilation.seal(err => {
if (err) return callback(err);
this.hooks.afterCompile.callAsync(compilation, err => {
if (err) return callback(err);
return callback(null, compilation);
});
});
});
});
});
首先调用了this.newCompilationParams这个方法，他的主要作用是创建了两个工厂对象NormalModuleFactory、ContextModuleFactory，然后并且把这俩对象作为参数传入给了this.newCompilation里，然后最好调用了一系列勾子make勾子，这个勾子实际上就是真正编译的开始。
目前就阅读到了这个地方，其实很多细节没有讲到，比如初始化NormalModuleFactory、ContextModuleFactory，还有Stats这个对象是怎么利用compilation生成信息的，其实都需要等看完了compilation是如何生成才能明白。 之前我们说过make是真正编译的开始，其实这个时候就改看哪些地方调用了make这个勾子做了什么操作，然后接下来才能顺理成章。
