上一节生成Compilation实例后，添加了一些属性，随后触发this-compilation事件流，如下：
Compiler.prototype.newCompilation = (params) => {
// new Compilation()
const compilation = this.createCompilation();
compilation.fileTimestamps = this.fileTimestamps;
compilation.contextTimestamps = this.contextTimestamps;
compilation.name = this.name;
compilation.records = this.records;
compilation.compilationDependencies = params.compilationDependencies;
// Go!
this.applyPlugins("this-compilation", compilation, params);
this.applyPlugins("compilation", compilation, params);
return compilation;
}事件流的名字this-compilation我想了半天也不懂啥意思，从其内容来看其实也只算是一个预编译，叫pre-compilation似乎更好。
总之先不管那么多，继续跑流程，流程图如下：
this-compilation事件流的plugin来源有两个地方，分别是：
// JsonpTemplatePlugin
class JsonpTemplatePlugin {
apply(compiler) {
compiler.plugin("this-compilation", (compilation) => {
compilation.mainTemplate.apply(new JsonpMainTemplatePlugin());
compilation.chunkTemplate.apply(new JsonpChunkTemplatePlugin());
compilation.hotUpdateChunkTemplate.apply(new JsonpHotUpdateChunkTemplatePlugin());
});
}
}
// CachePlugin
compiler.plugin("this-compilation", compilation => {
// TODO remove notCacheable for webpack 4
if (!compilation.notCacheable) {
compilation.cache = cache;
compilation.plugin("child-compiler", (childCompiler, compilerName, compilerIndex) => { /**/ });
} else if (this.watching) {
compilation.warnings.push(
new Error(`CachePlugin - Cache cannot be used because of: ${compilation.notCacheable}`)
);
}
});
两者都出现在WebpackOptionsApply模块中，依次看具体内容。
JsonpTemplatePlugin
这里依次在上节中提到的Compilation几个属性上加载插件(Tapable)，首先是：
compilation.mainTemplate.apply(new JsonpMainTemplatePlugin());
该插件源码整理如下：
"use strict";
const Template = require("./Template");
class JsonpMainTemplatePlugin {
apply(mainTemplate) {
// this.plugin("startup", (source, chunk, hash) => { /**/ });
// this.plugin("render", (bootstrapSource, chunk, hash, moduleTemplate, dependencyTemplates) => { /**/ });
// this.plugin("local-vars", (source, chunk, hash) => { /**/ });
// this.plugin("require", (source, chunk, hash) => { /**/ });
// this.plugin("module-obj", (source, chunk, hash, varModuleId) => { /**/ });
// this.plugin("require-extensions", (source, chunk, hash) => { /**/ });
mainTemplate.plugin("local-vars", function(source, chunk) { /**/ });
mainTemplate.plugin("jsonp-script", function(_, chunk, hash) { /**/ });
mainTemplate.plugin("require-ensure", function(_, chunk, hash) { /**/ });
mainTemplate.plugin("require-extensions", function(source, chunk) { /**/ });
mainTemplate.plugin("bootstrap", function(source, chunk, hash) { /**/ });
mainTemplate.plugin("hot-bootstrap", function(source, chunk, hash) { /**/ });
mainTemplate.plugin("hash", function(hash) { /**/ });
}
}
module.exports = JsonpMainTemplatePlugin;
可见，这里只是注入对应的事件流，这里我在注释同时给出了该属性初始化时的plugin，可以对比一下，只有local-vars是重复的。
既然没有任何的apply操作，就暂时先跳过。
然后是第二个：
compilation.chunkTemplate.apply(new JsonpChunkTemplatePlugin());
源码如下：
"use strict";
const ConcatSource = require("webpack-sources").ConcatSource;
class JsonpChunkTemplatePlugin {
apply(chunkTemplate) {
chunkTemplate.plugin("render", function(modules, chunk) { /**/ });
chunkTemplate.plugin("hash", function(hash) { /**/ });
}
}
module.exports = JsonpChunkTemplatePlugin;
同样只是注入事件流，该属性在初始化没有做操作，所有事件流只有这两。
第三个：
compilation.hotUpdateChunkTemplate.apply(new JsonpHotUpdateChunkTemplatePlugin());
"use strict";
const ConcatSource = require("webpack-sources").ConcatSource;
class JsonpHotUpdateChunkTemplatePlugin {
apply(hotUpdateChunkTemplate) {
hotUpdateChunkTemplate.plugin("render", function(modulesSource, modules, removedModules, hash, id) { /**/ });
hotUpdateChunkTemplate.plugin("hash", function(hash) { /**/ });
}
}
module.exports = JsonpHotUpdateChunkTemplatePlugin;
与上面那个类似。
该模块注入完结。
CachePlugin
该插件注入了多个事件流，直接上与this-compilation事件流相关的代码：
compiler.plugin("this-compilation", compilation => {
// TODO remove notCacheable for webpack 4
// 这个属性我从头到尾找不到哪出现的
// 反正注释说webpack4会将其移除
if (!compilation.notCacheable) {
// cache => {}
compilation.cache = cache;
// 注入事件流
compilation.plugin("child-compiler", (childCompiler, compilerName, compilerIndex) => { /**/ });
}
// 不可能到达的else
else if (this.watching) {
compilation.warnings.push(
new Error(`CachePlugin - Cache cannot be used because of: ${compilation.notCacheable}`)
);
}
});果然是只是注入事件流，这里的notCacheable不知道在哪定义的，也不知道如何修改。
总之this-compilation也并不是编译，只是为一些辅助模块注入事件流。