# webpack源码 Compilation

  • class Compilation
  • 专注编译100年
    • 添加入口entry - 通过entry分析模块 - 分析依赖构建图表 - seal封装 - 输出
  • 是每次构建的上下文对象,每次热更新都会重新构建一个新的compilation对象负责更新的构建过程
  • 模版替换也是在这里执行的,指挥按顺序编译

# constructor(compiler)

	this.hooks = Object.freeze({

...
// 模版
	this.mainTemplate = new MainTemplate(this.outputOptions, this);
		this.chunkTemplate = new ChunkTemplate(this.outputOptions, this);
		this.runtimeTemplate = new RuntimeTemplate(
			this,
			this.outputOptions,
			this.requestShortener
		);

# func addEntry()

  • 我觉得是通过别的plugin帮助调用compilation.addEntry() 来做入口的
	addEntry(context, entry, optionsOrName, callback) {
		// TODO webpack 6 remove
		const options =
			typeof optionsOrName === "object"
				? optionsOrName
				: { name: optionsOrName };

		this._addEntryItem(context, entry, "dependencies", options, callback);
	}

# func seal(callback)

  • 来自 Compilercompile() 的调用
  • 将格式化的js通过模版聚合,回调compile生成文件
	const finalCallback = err => {
			...clear...
			return callback(err);
		};
		const chunkGraph = new ChunkGraph(
			this.moduleGraph,
			this.outputOptions.hashFunction
		);
		this.chunkGraph = chunkGraph;

		for (const module of this.modules) {
			ChunkGraph.setChunkGraphForModule(module, chunkGraph);
		}

		this.hooks.seal.call();
        ...
                    }
Last Updated: 2021/9/26 下午12:23:31