Webpack系列-第三篇流程杂记

偏执的太偏执、 2022-10-01 09:55 10阅读 0赞

## 系列文章 ##

[Webpack系列-第一篇基础杂记][Webpack_-]  
[Webpack系列-第二篇插件机制杂记][Webpack_- 1]  
[Webpack系列-第三篇流程杂记][Webpack_- 2]

## 前言 ##

本文章个人理解， 只是为了理清webpack流程， 没有关注内部过多细节， 如有错误， 请轻喷~

## 调试 ##

1.使用以下命令运行项目，`./scripts/build.js`是你想要开始调试的地方

node --inspect-brk ./scripts/build.js --inline --progress
    复制代码

2.打开`chrome://inspect/#devices`即可调试

## 流程图 ##

## 入口 ##

入口处在`bulid.js`,可以看到其中的代码是先实例化webpack，然后调用`compiler的run方法`。

function build(previousFileSizes) {
      let compiler = webpack(config);
      return new Promise((resolve, reject) => {
        compiler.run((err, stats) => {
          ...
      });
    }
    复制代码

## entry-option（compiler） ##

### webpack.js ###

webpack在node\_moduls下面的`\webpack\lib\webpack.js`（在此前面有入口参数合并），找到该文件可以看到相关的代码如下

可以看出options保存的就是本次webpack的一些配置参数，而其中的 `plugins属性则是webpack中最重要的插件`。

### new WebpackOptionsApply().process ###

process(options, compiler) {
        let ExternalsPlugin;
        compiler.outputPath = options.output.path;
        compiler.recordsInputPath = options.recordsInputPath || options.recordsPath;
        compiler.recordsOutputPath =
        	options.recordsOutputPath || options.recordsPath;
        compiler.name = options.name;
        compiler.dependencies = options.dependencies;
        if (typeof options.target === "string") {
        	let JsonpTemplatePlugin;
        	let FetchCompileWasmTemplatePlugin;
        	let ReadFileCompileWasmTemplatePlugin;
        	let NodeSourcePlugin;
        	let NodeTargetPlugin;
        	let NodeTemplatePlugin;
        
        	switch (options.target) {
        		case "web":
        			JsonpTemplatePlugin = require("./web/JsonpTemplatePlugin");
        			FetchCompileWasmTemplatePlugin = require("./web/FetchCompileWasmTemplatePlugin");
        			NodeSourcePlugin = require("./node/NodeSourcePlugin");
        			new JsonpTemplatePlugin().apply(compiler);
        			new FetchCompileWasmTemplatePlugin({
        				mangleImports: options.optimization.mangleWasmImports
        			}).apply(compiler);
        			new FunctionModulePlugin().apply(compiler);
        			new NodeSourcePlugin(options.node).apply(compiler);
        			new LoaderTargetPlugin(options.target).apply(compiler);
        			break;
        		case "webworker":......
        		......
        	}
        }
        new JavascriptModulesPlugin().apply(compiler);
        new JsonModulesPlugin().apply(compiler);
        new WebAssemblyModulesPlugin({
        	mangleImports: options.optimization.mangleWasmImports
        }).apply(compiler);
        
        new EntryOptionPlugin().apply(compiler);
        // 触发事件点entry-options并传入参数 context和entry 
        compiler.hooks.entryOption.call(options.context, options.entry);
        new CompatibilityPlugin().apply(compiler);
        ......
        new ImportPlugin(options.module).apply(compiler);
        new SystemPlugin(options.module).apply(compiler);
    }
    复制代码

## run（compiler） ##

调用run时，会先在内部触发`beforeRun事件点`，然后再在读取`recodes`（[关于records可以参考该文档][records]）之前触发run事件点，这两个事件都是异步的形式，注意`run方法是实际上整个webpack打包流程的入口`。可以看到，最后调用的是`compile`方法，同时传入的是onCompiled函数

run(callback) {
        if (this.running) return callback(new ConcurrentCompilationError());
        const finalCallback = (err, stats) => {
        	......
        };
        this.running = true;
        
        const onCompiled = (err, compilation) => {
        	....
        };
        
        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);
        		});
        	});
        });
    }
    复制代码

## compile（compiler） ##

compile方法主要上触发`beforeCompile、compile、make等事件点`，并`实例化compilation`，这里我们可以看到传给compile的`newCompilationParams`参数， 这个参数在后面相对流程中也是比较重要，可以在这里先看一下

compile(callback) {
        const params = this.newCompilationParams();
        // 触发事件点beforeCompile，并传入参数CompilationParams
        this.hooks.beforeCompile.callAsync(params, err => {
        	if (err) return callback(err);
            // 触发事件点compile，并传入参数CompilationParams
        	this.hooks.compile.call(params);
            // 实例化compilation
        	const compilation = this.newCompilation(params);
            // 触发事件点make
        	this.hooks.make.callAsync(compilation, err => {
        		....
        	});
        });
    }
    复制代码

newCompilationParams返回的参数分别是两个工厂函数和一个Set集合

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

## compilation（compiler） ##

从上面的compile方法看， compilation是通过newCompilation方法调用生成的，然后触发事件点`thisCompilation和compilation`，可以看出`compilation在这两个事件点中最早当成参数传入`，如果你在编写插件的时候需要尽快使用该对象，则应该在该两个事件中进行。

createCompilation() {
    	return new Compilation(this);
    }
    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;
        // 触发事件点thisCompilation和compilation， 同时传入参数compilation和params
        this.hooks.thisCompilation.call(compilation, params);
        this.hooks.compilation.call(compilation, params);
        return compilation;
    }
    复制代码

下面是打印出来的compilation属性

关于这里`为什么要有thisCompilation这个事件点和子编译器（childCompiler）`，可以参考该[文章][Link 1]  
总结起来就是:

> 子编译器拥有完整的模块解析和chunk生成阶段,但是少了某些事件点，如"make", "compile", "emit", "after-emit", "invalid", "done", "this-compilation"。 也就是说我们可以利用子编译器来独立（于父编译器）跑完一个核心构建流程，额外生成一些需要的模块或者chunk。

## make（compiler） ##

从上面的compile方法知道， 实例化Compilation后就会`触发make事件点`了。  
触发了make时， 因为webpack在前面`实例化SingleEntryPlugin或者MultleEntryPlugin`，SingleEntryPlugin则在其apply方法中注册了一个make事件，

apply(compiler) {
        compiler.hooks.compilation.tap(
        	"SingleEntryPlugin",
        	(compilation, { normalModuleFactory }) => {
        		compilation.dependencyFactories.set(
        			SingleEntryDependency,
        			normalModuleFactory  // 工厂函数，存在compilation的dependencyFactories集合
        		);
        	}
        );
        
        compiler.hooks.make.tapAsync(
        	"SingleEntryPlugin",
        	(compilation, callback) => {
        		const { entry, name, context } = this;
        
        		const dep = SingleEntryPlugin.createDependency(entry, name);
        		// 进入到addEntry
        		compilation.addEntry(context, dep, name, callback);
        	}
        );
    }
    复制代码

事实上addEntry调用的是`Comilation._addModuleChain`,acquire函数比较简单，主要是处理module时如果任务太多，就将moduleFactory.create存入队列等待

_addModuleChain(context, dependency, onModule, callback) {
        ......
        // 取出对应的Factory
        const Dep = /** @type {DepConstructor} */ (dependency.constructor);
        const moduleFactory = this.dependencyFactories.get(Dep);
        ......
        this.semaphore.acquire(() => {
        	moduleFactory.create(
        		{
        			contextInfo: {
        				issuer: "",
        				compiler: this.compiler.name
        			},
        			context: context,
        			dependencies: [dependency]
        		},
        		(err, module) => {
        			......
        		}
        	);
        });
        }
    复制代码

moduleFactory.create则是`收集一系列信息然后创建一个module传入回调`

## buildModule（compilation） ##

回调函数主要上执行`buildModule`方法

this.buildModule(module, false, null, null, err => {
        ......
        afterBuild();
    });
    复制代码

buildModule(module, optional, origin, dependencies, thisCallback) {
        // 处理回调函数
        let callbackList = this._buildingModules.get(module);
        if (callbackList) {
        	callbackList.push(thisCallback);
        	return;
        }
        this._buildingModules.set(module, (callbackList = [thisCallback]));
        
        const callback = err => {
        	this._buildingModules.delete(module);
        	for (const cb of callbackList) {
        		cb(err);
        	}
        };
        // 触发buildModule事件点
        this.hooks.buildModule.call(module);
        module.build(
        	this.options,
        	this,
        	this.resolverFactory.get("normal", module.resolveOptions),
        	this.inputFileSystem,
        	error => {
        		......
        	}
        );
        }
    复制代码

`build方法中调用的是doBuild，doBuild又通过runLoaders获取loader相关的信息并转换成webpack需要的js文件，最后通过doBuild的回调函数调用parse方法，创建依赖Dependency并放入依赖数组`

return this.doBuild(options, compilation, resolver, fs, err => {
        // 在createLoaderContext函数中触发事件normal-module-loader
        const loaderContext = this.createLoaderContext(
        	resolver,
        	options,
        	compilation,
        	fs
        );
        .....
        const handleParseResult = result => {
        	this._lastSuccessfulBuildMeta = this.buildMeta;
        	this._initBuildHash(compilation);
        	return callback();
        };
        
        try {
            // 调用parser.parse
        	const result = this.parser.parse(
        		this._ast || this._source.source(),
        		{
        			current: this,
        			module: this,
        			compilation: compilation,
        			options: options
        		},
        		(err, result) => {
        			if (err) {
        				handleParseError(err);
        			} else {
        				handleParseResult(result);
        			}
        		}
        	);
        	if (result !== undefined) {
        		// parse is sync
        		handleParseResult(result);
        	}
        } catch (e) {
        	handleParseError(e);
        }
        });
    复制代码

`在ast转换过程中也很容易得到了需要依赖的哪些其他模块`。

## succeedModule（compilation） ##

最后执行了module.build的回调函数，触发了`事件点succeedModule`，并回到Compilation.buildModule函数的回调函数

module.build(
        this.options,
        this,
        this.resolverFactory.get("normal", module.resolveOptions),
        this.inputFileSystem,
        error => {
        	......
        	触发了事件点succeedModule
        	this.hooks.succeedModule.call(module);
        	return callback();
        }
    );
    
    this.buildModule(module, false, null, null, err => {
        ......
        // 执行afterBuild
        afterBuild();
    });
    复制代码

对于当前模块，或许存在着多个依赖模块。当前模块会开辟一个依赖模块的数组，在`遍历 AST 时，将 require() 中的模块通过 addDependency() 添加到数组中。当前模块构建完成后，webpack 调用 processModuleDependencies 开始递归处理依赖的 module`，接着就会重复之前的构建步骤。

Compilation.prototype.addModuleDependencies = function(module, dependencies, bail, cacheGroup, recursive, callback) {
      // 根据依赖数组(dependencies)创建依赖模块对象
      var factories = [];
      for (var i = 0; i < dependencies.length; i++) {
        var factory = _this.dependencyFactories.get(dependencies[i][0].constructor);
        factories[i] = [factory, dependencies[i]];
      }
      ...
      // 与当前模块构建步骤相同
    }
    复制代码

最后， 所有的模块都会被放入到`Compilation的modules`里面， 如下：

总结一下：

> module 是 webpack 构建的核心实体，也是所有 module 的 父类，它有几种不同子类：NormalModule , MultiModule , ContextModule , DelegatedModule 等，一个依赖对象（Dependency，还未被解析成模块实例的依赖对象。比如我们运行 webpack 时传入的入口模块，或者一个模块依赖的其他模块，都会先生成一个 Dependency 对象。）经过对应的工厂对象（Factory）创建之后，就能够生成对应的模块实例（Module）。

## seal（compilation） ##

`构建module后， 就会调用Compilation.seal， 该函数主要是触发了事件点seal， 构建chunk`， 在所有 chunks 生成之后，webpack 会对 chunks 和 modules 进行一些优化相关的操作，比如分配id、排序等，并且触发一系列相关的事件点

seal(callback) {
        // 触发事件点seal
        this.hooks.seal.call();
        // 优化
        ......
        this.hooks.afterOptimizeDependencies.call(this.modules);
        
        this.hooks.beforeChunks.call();
        // 生成chunk
        for (const preparedEntrypoint of this._preparedEntrypoints) {
        	const module = preparedEntrypoint.module;
        	const name = preparedEntrypoint.name;
        	// 整理每个Module和chunk，每个chunk对应一个输出文件。
        	const chunk = this.addChunk(name);
        	const entrypoint = new Entrypoint(name);
        	entrypoint.setRuntimeChunk(chunk);
        	entrypoint.addOrigin(null, name, preparedEntrypoint.request);
        	this.namedChunkGroups.set(name, entrypoint);
        	this.entrypoints.set(name, entrypoint);
        	this.chunkGroups.push(entrypoint);
        
        	GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk);
        	GraphHelpers.connectChunkAndModule(chunk, module);
        
        	chunk.entryModule = module;
        	chunk.name = name;
        
        	this.assignDepth(module);
        }
        this.processDependenciesBlocksForChunkGroups(this.chunkGroups.slice());
        this.sortModules(this.modules);
        this.hooks.afterChunks.call(this.chunks);
        
        this.hooks.optimize.call();
        
        ......
        this.hooks.afterOptimizeModules.call(this.modules);
        
        ......
        this.hooks.afterOptimizeChunks.call(this.chunks, this.chunkGroups);
        
        this.hooks.optimizeTree.callAsync(this.chunks, this.modules, err => {
            ......
            this.hooks.beforeChunkAssets.call();
        	this.createChunkAssets();  // 生成对应的Assets
        	this.hooks.additionalAssets.callAsync(...)
        });
        }
    复制代码

每个 chunk 的生成就是找到需要包含的 modules。这里大致描述一下 chunk 的生成算法：

> 1.webpack 先将 entry 中对应的 module 都生成一个新的 chunk  
> 2.遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中  
> 3.如果一个依赖 module 是动态引入的模块，那么就会根据这个 module 创建一个新的 chunk，继续遍历依赖  
> 4.重复上面的过程，直至得到所有的 chunks

chunk属性图

## beforeChunkAssets && additionalChunkAssets（Compilation） ##

在触发这两个事件点的中间时， 会`调用Compilation.createCHunkAssets来创建assets`,

createChunkAssets() {
        ......
        // 遍历chunk
        for (let i = 0; i < this.chunks.length; i++) {
        	const chunk = this.chunks[i];
        	chunk.files = [];
        	let source;
        	let file;
        	let filenameTemplate;
        	try {
        	    // 调用何种Template
        		const template = chunk.hasRuntime()
        			? this.mainTemplate
        			: this.chunkTemplate;
        		const manifest = template.getRenderManifest({
        			chunk,
        			hash: this.hash,
        			fullHash: this.fullHash,
        			outputOptions,
        			moduleTemplates: this.moduleTemplates,
        			dependencyTemplates: this.dependencyTemplates
        		}); // [{ render(), filenameTemplate, pathOptions, identifier, hash }]
        		for (const fileManifest of manifest) {
        			.....
        			}
        			.....
        			// 写入assets对象
        			this.assets[file] = source;
        			chunk.files.push(file);
        			this.hooks.chunkAsset.call(chunk, file);
        			alreadyWrittenFiles.set(file, {
        				hash: usedHash,
        				source,
        				chunk
        			});
        		}
        	} catch (err) {
        		......
        	}
        }
        }
    复制代码

createChunkAssets会生成文件名和对应的文件内容，并放入`Compilation.assets对象`， 这里有四个Template 的子类，分别是`MainTemplate.js ， ChunkTemplate.js ，ModuleTemplate.js ， HotUpdateChunkTemplate.js`

*  MainTemplate.js: 对应了在 entry 配置的入口 chunk 的渲染模板
 *  ChunkTemplate: 动态引入的非入口 chunk 的渲染模板
 *  ModuleTemplate.js: chunk 中的 module 的渲染模板
 *  HotUpdateChunkTemplate.js: 对热替换模块的一个处理。

模块封装（引用自http://taobaofed.org/blog/2016/09/09/webpack-flow/）  
模块在封装的时候和它在构建时一样，都是调用各模块类中的方法。封装通过调用 module.source() 来进行各操作，比如说 require() 的替换。

MainTemplate.prototype.requireFn = "__webpack_require__";
    MainTemplate.prototype.render = function(hash, chunk, moduleTemplate, dependencyTemplates) {
        var buf = [];
        // 每一个module都有一个moduleId,在最后会替换。
        buf.push("function " + this.requireFn + "(moduleId) {");
        buf.push(this.indent(this.applyPluginsWaterfall("require", "", chunk, hash)));
        buf.push("}");
        buf.push("");
        ... // 其余封装操作
    };
    复制代码

最后看看Compilation.assets对象

## done（Compiler） ##

最后一步，webpack 调用 Compiler 中的 emitAssets() ，按照 output 中的配置项将文件输出到了对应的 path 中，从而 webpack 整个打包过程结束。要注意的是，若想对结果进行处理，则需要在 emit 触发后对自定义插件进行扩展。

## 总结 ##

webpack的内部核心还是在于compilation\\compiler\\module\\chunk等对象或者实例。写下这篇文章也有助于自己理清思路，学海无涯~~~

## 引用 ##

[玩转webpack（一）：webpack的基本架构和构建流程][webpack_webpack]  
[玩转webpack（二）：webpack的核心对象][Link 1]  
[细说 webpack 之流程篇][webpack]

转载于:https://juejin.im/post/5c84a331e51d453a47623447

[Webpack_-]: https://juejin.im/post/5c6d3dca6fb9a04a060574b9
[Webpack_- 1]: https://juejin.im/post/5c7d15bf6fb9a049ac79e536
[Webpack_- 2]: https://juejin.im/post/5c84a331e51d453a47623447
[records]: https://link.juejin.im?target=https%3A%2F%2Fwebpack.docschina.org%2Fconfiguration%2Fother-options%2F%23recordspath
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Flxzjj.github.io%2F2017%2F11%2F08%2F%25E7%258E%25A9%25E8%25BD%25ACwebpack%25EF%25BC%2588%25E4%25BA%258C%25EF%25BC%2589%2F
[webpack_webpack]: https://link.juejin.im?target=https%3A%2F%2Flxzjj.github.io%2F2017%2F11%2F02%2F%25E7%258E%25A9%25E8%25BD%25ACwebpack%25EF%25BC%2588%25E4%25B8%2580%25EF%25BC%2589%2F
[webpack]: https://link.juejin.im?target=http%3A%2F%2Ftaobaofed.org%2Fblog%2F2016%2F09%2F09%2Fwebpack-flow%2F