webpack源码解析一

先上一张流程图，小伙伴可以跟着这个流程图结合代码往下走：

图片来源于：细说webpack之流程篇

开始

git clone https://github.com/webpack/webpack.git
yarn
yarn setup

打包

node ./bin/webpack.js

bin/webpack.js

//判断有没有安装webpack-cli，没有话的就提示是否需要安装
const question = `Do you want to install 'webpack-cli' (yes/no): `;
//确定有webpack-cli之后开始执行
require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));

webpack-cli/bin/cli.js

//创建compiler编译引擎
let compiler;
			try {
				compiler = webpack(options);
			} catch (err) {
			}
   compiler.run((err, stats) => {}         

整个made过程

lib/webpack.js

const webpack = (options, callback) => {
	let compiler;
		compiler = createCompiler(options);
		watch = options.watch;
		watchOptions = options.watchOptions || {};
	return compiler;
};
//创建编译器
const createCompiler = options => {
    //获取默认的webpack参数
	options = new WebpackOptionsDefaulter().process(options);
	const compiler = new Compiler(options.context);
	compiler.options = options;
    //配置全局api插件比如（fs文件api、infrastructureLogger日志log、）
	new NodeEnvironmentPlugin({
		infrastructureLogging: options.infrastructureLogging
	}).apply(compiler);
    // 执行我们在配置文件中配置的所有插件
	if (Array.isArray(options.plugins)) {
		for (const plugin of options.plugins) {
			if (typeof plugin === "function") {
				plugin.call(compiler, compiler);
			} else {
				plugin.apply(compiler);
			}
		}
	}
    //开启默认的所有插件（比较重要）
	compiler.options = new WebpackOptionsApply().process(options, compiler);
	return compiler;
};

lib/WebpackOptionsApply.js

    //设置默认的一些插件
	process(options, compiler) {
        //入口文件插件注册
        new EntryOptionPlugin().apply(compiler);
        //调用入口文件插件注册钩子函数
		compiler.hooks.entryOption.call(options.context, options.entry);
    }

lib/EntryOptionPlugin.js

module.exports = class EntryOptionPlugin {
	/**
	 * @param {Compiler} compiler the compiler instance one is tapping into
	 * @returns {void}
	 */
	apply(compiler) {
        //注册入口文件插件注册钩子函数
		compiler.hooks.entryOption.tap("EntryOptionPlugin", (context, entry) => {
            
			const applyEntryPlugins = (entry, name) => {
				if (typeof entry === "string") {
                    //调用入口插件
					new EntryPlugin(context, entry, name).apply(compiler);
				} else if (Array.isArray(entry)) {
					for (const item of entry) {
						applyEntryPlugins(item, name);
					}
				}
			};
            //options的entry支持string||array比如：(entry: "src/main.js")||(entry: ["pollyfill.js","src/main.js"])
			if (typeof entry === "string" || Array.isArray(entry)) {
				applyEntryPlugins(entry, "main");
             //options的entry支持object类型比如：（entry:{main: "src/main.js"}）
			} else if (typeof entry === "object") {
				for (const name of Object.keys(entry)) {
					applyEntryPlugins(entry[name], name);
				}
                //options的entry支持function类型比如：（entry:()=>"src/main.js")}）
			} else if (typeof entry === "function") {
				new DynamicEntryPlugin(context, entry).apply(compiler);
			}
			return true;
		});
	}
};

EntryPlugin.js

apply(compiler) {
        //注册compiler的make钩子函数（后面会用到）
		compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {
			const { entry, name, context } = this;

			const dep = EntryPlugin.createDependency(entry, name);
			compilation.addEntry(context, dep, name, err => {
				callback(err);
			});
		});
	}

lib/Compiler.js:

//开始编译
run(callback) {
        //整个打包编译执行完毕回调
		const finalCallback = (err, stats) => {
			if (logger) logger.time("beginIdle");
			this.cache.beginIdle();
			if (logger) logger.timeEnd("beginIdle");
			this.running = false;
			if (err) {
				this.hooks.failed.call(err);
			}
			if (callback !== undefined) callback(err, stats);
			this.hooks.afterDone.call(stats);
		};
        //编译完毕回调
		const onCompiled = (err, compilation) => {
			if (err) return finalCallback(err);
				logger = compilation.getLogger("webpack.Compiler");
				logger.time("emitAssets");
                //执行打包操作
				this.emitAssets(compilation, err => {
					logger.timeEnd("emitAssets");
					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();
						logger.time("done hook");
						this.hooks.done.callAsync(stats, err => {
							logger.timeEnd("done hook");
							if (err) return finalCallback(err);

							this.hooks.additionalPass.callAsync(err => {
								if (err) return finalCallback(err);
								this.compile(onCompiled);
							});
						});
						return;
					}
			});
		};

		this.cache.endIdle(err => {
			if (err) return finalCallback(err);
            //调用编译打包前钩子函数
			this.hooks.beforeRun.callAsync(this, err => {
				if (err) return finalCallback(err);
                //调用运行中钩子函数
				this.hooks.run.callAsync(this, err => {
					if (err) return finalCallback(err);
                    //读取Records文件
					this.readRecords(err => {
						if (err) return finalCallback(err);
                        //开始编译
						this.compile(onCompiled);
					});
				});
			});
		});
}

//编译
compile(callback) {
            //创建编译器的参数（重要）
    		const params = this.newCompilationParams();
            //创建一个编译器
            const compilation = this.newCompilation(params);
                //执行前面## EntryPlugin.js注册的make钩子函数并把编译器传递给插件
    			this.hooks.make.callAsync(compilation, err => {
}

//创建编译器的参数
newCompilationParams() {
		const params = {
			normalModuleFactory: this.createNormalModuleFactory(), //创建一个模块工厂（主要用于模块的构建，也就是我们说的js文件等等）
			contextModuleFactory: this.createContextModuleFactory() //创建一个上下文工厂（主要用于整个工程的文件路径加载）
		};
		return params;
	}
//创建模块工厂
createNormalModuleFactory() {
		const normalModuleFactory = new NormalModuleFactory({
			context: this.options.context, 
			fs: this.inputFileSystem,
			resolverFactory: this.resolverFactory,
			options: this.options.module || {}
		});
		this.hooks.normalModuleFactory.call(normalModuleFactory);
		return normalModuleFactory;
}
    

前面注册的钩子函数 lib/EntryPlugin.js

compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {
            //执行编译器的addEntry方法加载入口文件
			compilation.addEntry(context, dep, name, err => {
				callback(err);
		});

lib/Compilation.js

//加载入口文件
addEntry(context, entry, name, callback) {
		this.addModuleChain(context, entry, (err, module) => {
			if (err) {
				this.hooks.failedEntry.call(entry, name, err);
				return callback(err);
			}
			this.hooks.succeedEntry.call(entry, name, module);
			return callback(null, module);
		});
	}
    
addModuleChain(context, dependency, callback) {
    	this.handleModuleCreation(
			{
				factory: moduleFactory,
				dependencies: [dependency],
				originModule: null,
				context
			},
}

handleModuleCreation(
		{ factory, dependencies, originModule, context },
		callback
	) { 
            //遍历工程中所有的模块并且创建模块
        	this.factorizeModule(
                //创建模块
        	    this.buildModule(module, err => {
}

//开始创建模块
_buildModule(module, callback) {
    //开始执行模块的构建方法
    	module.build(
					this.options,
					this,
					this.resolverFactory.get("normal", module.resolveOptions),
					this.inputFileSystem,
					err => {
}
 //遍历工程中所有的模块
_factorizeModule(
		{ currentProfile, factory, dependencies, originModule, context },
		callback
	) {
		if (currentProfile !== undefined) {
			currentProfile.markFactoryStart();
		}
        //调用前面创建的NormalModuleFactory的create方法
		factory.create(
			{

lib/NormalModuleFactory.js

//构造方法
constructor({ context, fs, resolverFactory, options }) {
        //注册开始构建模块钩子函数
    		this.hooks.factorize.tapAsync(
			{
				name: "NormalModuleFactory",
				stage: 100
			},
			(resolveData, callback) => {
                //触发开始解析模块钩子函数(注册“解析模块钩子函数”也在NormalModuleFactory.js里面，主要就是获取我们配置的“loader”，重要)
				this.hooks.resolve.callAsync(resolveData, (err, result) => {
					//模块解析完毕后
					this.hooks.afterResolve.callAsync(resolveData, (err, result) => {
							if (err) return callback(err);

						if (typeof result === "object")
							throw new Error(deprecationChangedHookMessage("afterResolve"));

						// Ignored
						if (result === false) return callback();

						const createData = resolveData.createData;

						let createdModule = this.hooks.createModule.call(createData);
						if (!createdModule) {
							if (!resolveData.request) {
								return callback(new Error("Empty dependency (no request)"));
							}

							createdModule = new NormalModule(createData);
						}
                        //创建一个新的模块（包含模块的各种信息，比如模块的路径、能被哪些loader加载器加载等等）
						createdModule = this.hooks.module.call(
							createdModule,
							createData,
							resolveData
						);

						return callback(null, createdModule);
					});
				});
			}
		);
}
//创建工程的所有模块
create(data, callback) {
        //获取所有的模块
		const dependencies = /** @type {ModuleDependency[]} */ (data.dependencies);
		if (this.unsafeCache) {
			const cacheEntry = dependencyCache.get(dependencies[0]);
			if (cacheEntry) return callback(null, cacheEntry);
		}
            //触发开始构建模块钩子函数（在构造函数中注册）
			this.hooks.factorize.callAsync(resolveData, (err, module) => {
				
			});
		});
	}

lib/NormalModule.js

    //被上面的Compilation.js中的_buildModule方法中的module.build调用
	build(options, compilation, resolver, fs, callback) {
        	return this.doBuild(options, compilation, resolver, fs, err => {

            }
    }
    //开始构建
    doBuild(options, compilation, resolver, fs, callback) {
        //处理loader加载过后的源码
        const processResult = (err, result) => {
            this._source = this.createSource(
				options.context,
				this.binary ? asBuffer(source) : asString(source),
				sourceMap,
				compilation.compiler.root
			);
        }
        //运行我们在配置文件中配置的所有loader，比如babel-loader，然后返回处理完毕后的源码
        runLoaders(
			{
				resource: this.resource,
				loaders: this.loaders,
				context: loaderContext,
				readResource: fs.readFile.bind(fs)
			},
			(err, result) => {
				if (!result) {
					processResult(
						err || new Error("No result from loader-runner processing"),
						null
					);
				}
                processResult(err, result.result);
			}
		);
    }
    //创建源码
    createSource(context, content, sourceMap, associatedObjectForCache) {
		if (Buffer.isBuffer(content)) {
            //获取构建过后的源码
			return new RawSource(content);
		}
	}

整个made过程结束

seal封装过程开始(1、优化我们编译过后的代码（代码混淆、分包优化等等）、2、生成我们最后需要的打包过后的文件)

Compiler.js文件

compile(callback) {
    	logger.time("seal compilation");
        //开始封装并打包文件
		compilation.seal(err => {
                            
        }
}

lib/Compilation.js(重要，了解webpack的插件)

/**
	 * @param {Callback} callback signals when the call finishes
	 * @returns {void}
	 */
	seal(callback) {
		const chunkGraph = new ChunkGraph(this.moduleGraph);
		this.chunkGraph = chunkGraph;

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

		this.hooks.seal.call();

		while (this.hooks.optimizeDependencies.call(this.modules)) {
			/* empty */
		}
		this.hooks.afterOptimizeDependencies.call(this.modules);

		this.hooks.beforeChunks.call();
		for (const [name, dependencies] of this.entryDependencies) {
			const chunk = this.addChunk(name);
			chunk.name = name;
			const entrypoint = new Entrypoint(name);
			entrypoint.setRuntimeChunk(chunk);
			this.namedChunkGroups.set(name, entrypoint);
			this.entrypoints.set(name, entrypoint);
			this.chunkGroups.push(entrypoint);
			connectChunkGroupAndChunk(entrypoint, chunk);

			for (const dep of dependencies) {
				entrypoint.addOrigin(null, { name }, dep.request);

				const module = this.moduleGraph.getModule(dep);
				if (module) {
					chunkGraph.connectChunkAndModule(chunk, module);
					chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint);
					this.assignDepth(module);
				}
			}
		}
		buildChunkGraph(
			this,
			/** @type {Entrypoint[]} */ (this.chunkGroups.slice())
		);
		this.hooks.afterChunks.call(this.chunks);

		this.hooks.optimize.call();

		while (this.hooks.optimizeModules.call(this.modules)) {
			/* empty */
		}
		this.hooks.afterOptimizeModules.call(this.modules);

		while (this.hooks.optimizeChunks.call(this.chunks, this.chunkGroups)) {
			/* empty */
		}
		this.hooks.afterOptimizeChunks.call(this.chunks, this.chunkGroups);

		this.hooks.optimizeTree.callAsync(this.chunks, this.modules, err => {
			if (err) {
				return callback(
					makeWebpackError(err, "Compilation.hooks.optimizeTree")
				);
			}

			this.hooks.afterOptimizeTree.call(this.chunks, this.modules);

			while (this.hooks.optimizeChunkModules.call(this.chunks, this.modules)) {
				/* empty */
			}
			this.hooks.afterOptimizeChunkModules.call(this.chunks, this.modules);

			const shouldRecord = this.hooks.shouldRecord.call() !== false;

			this.hooks.reviveModules.call(this.modules, this.records);
			this.hooks.beforeModuleIds.call(this.modules);
			this.hooks.moduleIds.call(this.modules);
			this.hooks.optimizeModuleIds.call(this.modules);
			this.hooks.afterOptimizeModuleIds.call(this.modules);

			this.hooks.reviveChunks.call(this.chunks, this.records);
			this.hooks.beforeChunkIds.call(this.chunks);
			this.hooks.chunkIds.call(this.chunks);
			this.hooks.optimizeChunkIds.call(this.chunks);
			this.hooks.afterOptimizeChunkIds.call(this.chunks);

			this.sortItemsWithChunkIds();

			if (shouldRecord) {
				this.hooks.recordModules.call(this.modules, this.records);
				this.hooks.recordChunks.call(this.chunks, this.records);
			}

			this.hooks.optimizeCodeGeneration.call(this.modules);

			this.hooks.beforeModuleHash.call();
			this.createModuleHashes();
			this.hooks.afterModuleHash.call();

			this.hooks.beforeCodeGeneration.call();
			this.codeGenerationResults = this.codeGeneration();
			this.hooks.afterCodeGeneration.call();

			this.hooks.beforeRuntimeRequirements.call();
			this.processRuntimeRequirements(this.entrypoints.values());
			this.hooks.afterRuntimeRequirements.call();

			this.hooks.beforeHash.call();
			this.createHash();
			this.hooks.afterHash.call();

			if (shouldRecord) {
				this.hooks.recordHash.call(this.records);
			}

			this.clearAssets();

			this.hooks.beforeModuleAssets.call();
			this.createModuleAssets();

			const cont = () => {
				this.hooks.additionalChunkAssets.call(this.chunks);
				this.summarizeDependencies();
				if (shouldRecord) {
					this.hooks.record.call(this, this.records);
				}

				this.hooks.additionalAssets.callAsync(err => {
					if (err) {
						return callback(
							makeWebpackError(err, "Compilation.hooks.additionalAssets")
						);
					}
					this.hooks.optimizeChunkAssets.callAsync(this.chunks, err => {
						if (err) {
							return callback(
								makeWebpackError(err, "Compilation.hooks.optimizeChunkAssets")
							);
						}
						this.hooks.afterOptimizeChunkAssets.call(this.chunks);
						this.hooks.optimizeAssets.callAsync(this.assets, err => {
							if (err) {
								return callback(
									makeWebpackError(err, "Compilation.hooks.optimizeAssets")
								);
							}
							this.hooks.afterOptimizeAssets.call(this.assets);
							if (this.hooks.needAdditionalSeal.call()) {
								this.unseal();
								return this.seal(callback);
							}
							this.hooks.finishAssets.callAsync(this.assets, err => {
								if (err) {
									return callback(
										makeWebpackError(err, "Compilation.hooks.finishAssets")
									);
								}
								this.hooks.afterFinishAssets.call(this.assets);
								this.cache.storeBuildDependencies(
									this.buildDependencies,
									err => {
										if (err) {
											return callback(err);
										}
										return this.hooks.afterSeal.callAsync(callback);
									}
								);
							});
						});
					});
				});
			};

			if (this.hooks.shouldGenerateChunkAssets.call() !== false) {
				this.hooks.beforeChunkAssets.call();
				this.createChunkAssets(err => {
					if (err) {
						return callback(err);
					}
					cont();
				});
			} else {
				cont();
			}
		});
	}

lib/Compilation.js

	seal(callback) {
		//根据每个模块创建asset文件
		this.createModuleAssets();
		//提交所有的asset
		this.emitAsset(
						fileName,
						module.buildInfo.assets[assetName],
						assetsInfo ? assetsInfo.get(assetName) : undefined
					);
	}
	//提交asset
	emitAsset(file, source, assetInfo = {}) {
		//把所有的asset存在compilation对象的assets属性中
		this.assets[file] = source;
		this.assetsInfo.set(file, assetInfo);
	}

整个seal过程结束

lib/Compiler.js（emitAssets生成打包过后的文件过程开始）

compile(callback) {
		
	compilation.seal(err => {
		//整个seal过程执行完毕后开始执行callback方法
		return callback(null, compilation);
	}
	run(callback) {
		//seal过程执行完毕后执行onCompiled方法
		const onCompiled = (err, compilation) => {
			//如果有错误的话，就直接结束
			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;
			}

			process.nextTick(() => {
				//开始提交assets
				this.emitAssets(compilation, err => {
						this.hooks.done.callAsync(stats, err => {
							//webpack整个过程结束
							return finalCallback(null, stats);
				});
			});
		};

		this.readRecords(err => {
			//整个seal过程执行完毕后开始执行onCompiled方法
			this.compile(onCompiled);
		});
	//提交并生成打包出来的所有文件
	emitAssets(compilation, callback) {
		let outputPath;
		//开始提交（生成打包过后的文件）
		this.hooks.emit.callAsync(compilation, err => {
			//获取输出文件的目标地址
			outputPath = compilation.getPath(this.outputPath, {});
			//生成目标文件夹
			mkdirp(this.outputFileSystem, outputPath, emitFiles);
		});
	}
	//输入所有的文件到指定文件夹
	const emitFiles = err => {
			asyncLib.forEachLimit(
				//获取所有的文件
				compilation.getAssets(),
				15,
				//列出打包过后的文件
				({ name: file, source, info }, callback) => {
					if (targetFile.match(/\/|\\/)) {
						const fs = this.outputFileSystem;
						const dir = dirname(fs, join(fs, outputPath, targetFile));
						mkdirp(fs, dir, writeOut);
					} else {
						//输出文件
						writeOut();
					}
				}
	}

}

emitAssets生成打包过后的文件过程结束

整个webpack打包结束

先到这里啦～ 后面再针对每个钩子函数，modulefactory、compilation做解析。

欢迎志同道合的小伙伴入群，一起交流一起学习～～ 加油骚年！！

文献参考：

细说webpack之流程篇