重学webpack系列(八) -- webpack的运行机制与工作原理

前面几个章节我们分别去探索了webpack的loader机制、plugin机制、devServer、sourceMap、HMR，但是你是否知道这些配置项是怎么去跟webpack本身执行机制挂钩的呢？这一章我们就来探索一下webpack的运行机制与工作原理吧。

webpack核心工作过程

我们打开webpack官网，我们可以看到这样的一张图。

上图陈述了任意资源文件模块，经过webpack处理会生成相对应的资源文件，在这里你可能会问，webpack输出不是只有.js文件吗，为什么会有.css、.jpg呢，各位同学不要着急，请听我慢慢向你道来。

画图解释

以一般的项目来讲，整个项目由下面的这几类模块组成，当我们接入了webpack之后，webpack会根据entry的指定文件开始，根据代码中的import或者require语句找到对应模块的依赖，从而形成依赖树，比如。

构建成了依赖树之后，webpack会递归遍历当前的依赖树，使用我们在配置中写的loader进行对应的模块加载，加载完毕之后会进行output的配置选项进行文件输出，一般我们默认的是dist/main.js为输出文件。我们也称之为bundle.js。

至此我们就完成了整个项目的打包过程。

webpack是怎么去处理那些不能被js处理的文件的呢

对于依赖模块中，那些无法被js解释描述的模块，比如图片，字体等等，那么会有对应的loader，比如file-loader，会把这些资源直接输出到打包目录，然后会把当前资源的访问路径作为模块的导出成员暴露出来，以供外部成员调用。

plugin是怎么工作的呢

plugin在webpack打包的任意阶段中，可以通过hooks往阶段中去注入某些功能，去完成某些构建任务。

webpack核心工作的原理

上面也提到webpack打包的核心流程，我们在package.json里面配置了"build": webpack && webpack-cli，之后只需要在terminal中键入npm run build就可以让webpack自动打包构建了，然后webpack会经历如下步骤。

• webpack-cli启动。
• 载入配置项参数，初始化Compiler对象，加载所有配置项plugin。
• 使用Compiler对象的run方法开始编译项目。
• 通过entry找到入口文件，解析模块依赖，形成依赖树。
• 递归遍历依赖树，让loader去加载对应的模块以及依赖模块。
• 合并loader处理结果，组装成chunks，转换成文件，输出到build目录。

如果你看文字比较烦闷，那么我也可以画成概念图：

深入webpack的源码

那么webpack5是怎么进行构建的呢，我们还是得来深入一下源码，我们在webpack-cli文件夹下的bin目录找到入口文件。

// webpack/node_modules/webpack-cli/bin/cli.js
#!/usr/bin/env node

"use strict";

const importLocal = require("import-local");
const runCLI = require("../lib/bootstrap");

...
process.title = "webpack";
// 执行runCLI函数
// process.argv = [
//  '/usr/local/bin/node',
//  '/Users/mac/Desktop/webpack/webpack/node_modules/.bin/webpack-cli'
//] 
runCLI(process.argv);

// webpack/node_modules/webpack-cli/lib/bootstrap.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// 导入WebpackCLI
const WebpackCLI = require("./webpack-cli");

const runCLI = async (args) => {
    //创建一个webpack-cli实例
    const cli = new WebpackCLI();
    
    try {
        await cli.run(args);
    }
    catch (error) {
        cli.logger.error(error);
        process.exit(2);
    }
};
module.exports = runCLI;

上述代码表明webpack在工作的时候创建了一个WebpackCli的实例，之后去调用类的run方法执行流程，我们这里先大致看一下WebpackCli的实现。

run方法的执行

run方法里面去加载了构建配置项、版本配置项、监听配置项、帮助配置项等，代码足足有500多行，我们只关注于核心代码。

...
 run(args, parseOptions){
     // args为process.argv
     // parseOptions为装填的解析配置项
     ...
     const loadCommandByName = async (commandName, allowToInstall = false) => {
         ...
         if (isBuildCommandUsed || isWatchCommandUsed) {
             console.log(options, 'options') 
             // options : {}
             // 这里执行runWebpack
             await this.runWebpack(options, isWatchCommandUsed);
             console.log(options, 'options')  
             // options : { argv: { env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true } } }
         }
         ...
     };
     ...
 }
 
 // runWebpack
runWebpack(options, isWatchCommand){
     // options : {}
     // isWatchCommand : false
     ...
      console.log(options, isWatchCommand, '配置5') // { argv: { env: { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true } } } false
      compiler = await this.createCompiler(options, callback);
      console.log(compiler, '配置6') // compiler对象属性太多，这里不展示，这里就拿到了我们上文说的Compiler对象了，然后我们用这个对象去进行编译。
      ...
}

createCompiler函数里面调用了loadConfig、buildConfig，去加载构建配置项以及webpack核心属性，使用webpack函数调用这些核心模块，其中在loadConfig函数里面我们可以看到这样的一处代码。

// webpack-cli.js
async loadConfig(options) {
    ...
    const loadedConfigs = await Promise.all(options.config.map((configPath) => loadConfigByPath(path.resolve(configPath), options.argv)));
}    
    ...

上述代码loadConfig通过loadConfigByPath执行tryRequireThenImport函数，去加载编译所需模块和我们用户写的webpack.config.js配置。在buildConfig中我们会去传入loadConfig函数的执行结果，也就是options，去加载配置中的plugin。

// webpack-cli.js
buildConfig(config, options){
    ...
    const CLIPlugin = await this.tryRequireThenImport("./plugins/CLIPlugin");
    ...
    if (!item.plugins) {
        item.plugins = [];
    }
    item.plugins.unshift(new CLIPlugin({
        configPath: config.path.get(item),
        helpfulOutput: !options.json,
        hot: options.hot,
        progress: options.progress,
        prefetch: options.prefetch,
        analyze: options.analyze,
    }));         
}

new CLIPlugin

// CLiPlugin.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CLIPlugin = void 0;
// CLIPlugin类
class CLIPlugin {
    constructor(options) {
        this.options = options;
    }
    // 热更新插件
    setupHotPlugin(compiler) {
        // 如果用户没有配置HotModuleReplacementPlugin插件，则会自动从webpack中引入
        const { HotModuleReplacementPlugin } = compiler.webpack || require("webpack");
        
        const hotModuleReplacementPlugin = Boolean(compiler.options.plugins.find((plugin) => plugin instanceof HotModuleReplacementPlugin));
        if (!hotModuleReplacementPlugin) {
            // 插件执行，使用apply方法
            new HotModuleReplacementPlugin().apply(compiler);
        }
    }
    // PrefetchPlugin 插件
    setupPrefetchPlugin(compiler) {
        const { PrefetchPlugin } = compiler.webpack || require("webpack");
        new PrefetchPlugin(null, this.options.prefetch).apply(compiler);
    }
    // BundleAnalyzerPlugin插件
    async setupBundleAnalyzerPlugin(compiler) {
        const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
        ...
    }
    // ProgressPlugin插件
    setupProgressPlugin(compiler) {
        const { ProgressPlugin } = compiler.webpack || require("webpack");
        ...
    }
    // 执行配置里的插件，我们可以通过compiler.options.plugins获取到插件数组配置项
    setupHelpfulOutput(compiler) {
        const pluginName = "webpack-cli";
        // 把上下文的name变成字符串
        const getCompilationName = () => (compiler.name ? `'${compiler.name}'` : "");
        ...
        
        const { configPath } = this.options;
        // hooks.run方法，参考https://www.webpackjs.com/api/compiler-hooks/#run
        compiler.hooks.run.tap(pluginName, () => {
            const name = getCompilationName();
            ...
            if (configPath) {
                this.logger.log(`Compiler${name ? ` ${name}` : ""} is using config: '${configPath}'`);
            }
        });
        // watchRun钩子方法，查看https://www.webpackjs.com/api/compiler-hooks/#watchrun
        // 监听模式下，在编译之前，把插件挂到钩子里面去
        compiler.hooks.watchRun.tap(pluginName, (compiler) => {
            const { bail, watch } = compiler.options;
            ...
            const name = getCompilationName();
            ...
        });
        // 监听模式下，编译失效的时候，查看https://www.webpackjs.com/api/compiler-hooks/#invalid
        compiler.hooks.invalid.tap(pluginName, (filename, changeTime) => {
            const date = new Date(changeTime);
            ...
        });
        
        // 编译完成，查看https://www.webpackjs.com/api/compiler-hooks/#invalid
        // 官网上面并没有afterDone这个钩子，不知道是什么原因，afterEmit？？
        (compiler.webpack ? compiler.hooks.afterDone : compiler.hooks.done).tap(pluginName, () => {
            const name = getCompilationName();
            ...
            ...
        });
    }
    apply(compiler) {
        this.logger = compiler.getInfrastructureLogger("webpack-cli");
        // 安装内置插件
        if (this.options.progress) {
            this.setupProgressPlugin(compiler);
        }
        if (this.options.hot) {
            this.setupHotPlugin(compiler);
        }
        if (this.options.prefetch) {
            this.setupPrefetchPlugin(compiler);
        }
        if (this.options.analyze) {
            this.setupBundleAnalyzerPlugin(compiler);
        }
        // 安装配置插件插件
        this.setupHelpfulOutput(compiler);
    }
}
exports.CLIPlugin = CLIPlugin;
module.exports = CLIPlugin;

说到这里，我们大致就知道了webpack的plugin是怎么去执行的吧，因为在webpack执行阶段，对应的每一个阶段都有一个钩子，我们在自定义插件的时候，我们也依赖这些钩子去执行。但到这里仅仅还是webpack的前置工作。 继续调试，我们发现webpack流程会走到webpack/lib/index.js目录下的fn函数，并导入了Compiler类。

fn是一个懒加载的函数的结果，在webpack函数里面，会去执行new Compiler，把编译上下文和配置项，全部传给了Compiler类，得到了compiler实例。执行Compiler的run方法开始编译。编译的流程就是根据webpack核心模块和我们写的配置文件，去解析entry中的模块，构建依赖树。编译完成之后会走到_doBuild函数这里。值得一说的是在创建webpack自己的Compiler的时候，会根据option的类型，选择是否选择直接创建(单线打包)，还是多个创建(多线打包)，提高编译性能。

webpack是怎么集成loader的呢

webpack执行_doBuild函数，表示真正的构建流程开始了，webpack先会根据解析过后的配置项，编译上下文等去创建loader加载执行上下文，并挂载到了webpack的beforeLoaders的钩子上，然后执行runLoaders方法，进行loader的加载。

    ...
    this.buildInfo.fileDependencies = new LazySet();
    this.buildInfo.contextDependencies = new LazySet();
    this.buildInfo.missingDependencies = new LazySet();
    this.buildInfo.cacheable = true;
    ...
    // 加载loader函数
    runloaders({resource: this.resource, loaders: this.loaders, context: loaderContext,}, fn);

其中runLoaders第一个参数传的是一个对象，第二个参数是一个函数。根据buildInfo的依赖，把result中的依赖通过add方法添加进去，result就是在执行build时候的source || _ast

我们具体来看一看runLoaders的实现吧。

runLoaders

exports.runLoaders = function runLoaders(options, callback) {
	// 需要处理的资源绝对路径
	var resource = options.resource || "";
        // 需要处理的所有loaders 组成的绝对路径数组
	var loaders = options.loaders || [];
        // loader执行上下文对象 每个loader中的this就会指向这个loaderContext
	var loaderContext = options.context || {};
        
        // 读取资源文件内容的方法
	var processResource = options.processResource || ((readResource, context, resource, callback) => {
		context.addDependency(resource);
		readResource(resource, callback);
	}).bind(null, options.readResource || readFile);

	//
	var splittedResource = resource && parsePathQueryFragment(resource);
	var resourcePath = splittedResource ? splittedResource.path : undefined;
	var resourceQuery = splittedResource ? splittedResource.query : undefined;
	var resourceFragment = splittedResource ? splittedResource.fragment : undefined;
	var contextDirectory = resourcePath ? dirname(resourcePath) : null;

	// 其他执行所依赖的状态
	var requestCacheable = true;
	var fileDependencies = [];
	var contextDependencies = [];
	var missingDependencies = [];

	// 根据loaders路径数组创建loaders对象
	loaders = loaders.map(createLoaderObject);
        
        // 给执行上下文对象绑定属性
	loaderContext.context = contextDirectory;
	loaderContext.loaderIndex = 0;
	loaderContext.loaders = loaders;
	loaderContext.resourcePath = resourcePath;
	loaderContext.resourceQuery = resourceQuery;
	loaderContext.resourceFragment = resourceFragment;
        // 异步执行的标识与回调
	loaderContext.async = null;
	loaderContext.callback = null;
        // 缓存标识
	loaderContext.cacheable = function cacheable(flag) {
		if(flag === false) {
			requestCacheable = false;
		}
	};
        // 依赖
	loaderContext.dependency = loaderContext.addDependency = function addDependency(file) {
		fileDependencies.push(file);
	};
        // 添加上下文依赖方法
	loaderContext.addContextDependency = function addContextDependency(context) {
		contextDependencies.push(context);
	};
        // 添加缺失依赖方法
	loaderContext.addMissingDependency = function addMissingDependency(context) {
		missingDependencies.push(context);
	};
        // 获得依赖方法
	loaderContext.getDependencies = function getDependencies() {
		return fileDependencies.slice();
	};
        // 获得上下文依赖方法
	loaderContext.getContextDependencies = function getContextDependencies() {
		return contextDependencies.slice();
	};
        // 获得缺失依赖方法
	loaderContext.getMissingDependencies = function getMissingDependencies() {
		return missingDependencies.slice();
	};
        // 清空依赖方法
	loaderContext.clearDependencies = function clearDependencies() {
		fileDependencies.length = 0;
		contextDependencies.length = 0;
		missingDependencies.length = 0;
		requestCacheable = true;
	};
        // 劫持上下文中的resource属性
	Object.defineProperty(loaderContext, "resource", {
		enumerable: true,
		get: function() {
			if(loaderContext.resourcePath === undefined)
				return undefined;
			return loaderContext.resourcePath.replace(/#/g, "\0#") + loaderContext.resourceQuery.replace(/#/g, "\0#") + loaderContext.resourceFragment;
		},
		set: function(value) {
			var splittedResource = value && parsePathQueryFragment(value);
			loaderContext.resourcePath = splittedResource ? splittedResource.path : undefined;
			loaderContext.resourceQuery = splittedResource ? splittedResource.query : undefined;
			loaderContext.resourceFragment = splittedResource ? splittedResource.fragment : undefined;
		}
	});
        // 劫持上下文中的request属性
	Object.defineProperty(loaderContext, "request", {
		enumerable: true,
		get: function() {
			return loaderContext.loaders.map(function(o) {
				return o.request;
			}).concat(loaderContext.resource || "").join("!");
		}
	});
        // 劫持上下文中的remainingRequest属性
	Object.defineProperty(loaderContext, "remainingRequest", {
		enumerable: true,
		get: function() {
			if(loaderContext.loaderIndex >= loaderContext.loaders.length - 1 && !loaderContext.resource)
				return "";
			return loaderContext.loaders.slice(loaderContext.loaderIndex + 1).map(function(o) {
				return o.request;
			}).concat(loaderContext.resource || "").join("!");
		}
	});
        // 劫持上下文中的currentRequest属性
	Object.defineProperty(loaderContext, "currentRequest", {
		enumerable: true,
		get: function() {
			return loaderContext.loaders.slice(loaderContext.loaderIndex).map(function(o) {
				return o.request;
			}).concat(loaderContext.resource || "").join("!");
		}
	});
        // 劫持上下文中的previousRequest属性
	Object.defineProperty(loaderContext, "previousRequest", {
		enumerable: true,
		get: function() {
			return loaderContext.loaders.slice(0, loaderContext.loaderIndex).map(function(o) {
				return o.request;
			}).join("!");
		}
	});
        // 劫持上下文中的query属性
	Object.defineProperty(loaderContext, "query", {
		enumerable: true,
		get: function() {
			var entry = loaderContext.loaders[loaderContext.loaderIndex];
			return entry.options && typeof entry.options === "object" ? entry.options : entry.query;
		}
	});
        // 劫持上下文中的data属性
	Object.defineProperty(loaderContext, "data", {
		enumerable: true,
		get: function() {
			return loaderContext.loaders[loaderContext.loaderIndex].data;
		}
	});

	// finish loader context
	if(Object.preventExtensions) {
		Object.preventExtensions(loaderContext);
	}

	var processOptions = {
		resourceBuffer: null,
		processResource: processResource
	};
        // 开始迭代处理完的loader
	iteratePitchingLoaders(processOptions, loaderContext, function(err, result) {
		if(err) {
			return callback(err, {
				cacheable: requestCacheable,
				fileDependencies: fileDependencies,
				contextDependencies: contextDependencies,
				missingDependencies: missingDependencies
			});
		}
		callback(null, {
			result: result,
			resourceBuffer: processOptions.resourceBuffer,
			cacheable: requestCacheable,
			fileDependencies: fileDependencies,
			contextDependencies: contextDependencies,
			missingDependencies: missingDependencies
		});
	});
};

// iteratePitchingLoaders
function iteratePitchingLoaders(options, loaderContext, callback) {
	// loader的pitch是按照loaderIndexpitch的，如果loader数组的长度，表示pitch完了
        // 此时就需要调用processResource方法读取资源文件内容了
	if(loaderContext.loaderIndex >= loaderContext.loaders.length)
		return processResource(options, loaderContext, callback);

	var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];

	// 当前loader的pitch已经执行过了 继续递归执行下一个
	if(currentLoaderObject.pitchExecuted) {
		loaderContext.loaderIndex++;
		return iteratePitchingLoaders(options, loaderContext, callback);
	}

	// 以对象的形式加载loader
	loadLoader(currentLoaderObject, function(err) {
		if(err) {
			loaderContext.cacheable(false);
			return callback(err);
		}
                // 取loader对象的pitch属性
		var fn = currentLoaderObject.pitch;
                // pitch过了，就把pitchExecuted置为true
		currentLoaderObject.pitchExecuted = true;
                // 如果没有pitch过，则需要再经过iteratePitchingLoaders函数处理一遍
		if(!fn) return iteratePitchingLoaders(options, loaderContext, callback);
                
                // 同步和异步执行loader
		runSyncOrAsync(
			fn, // pitch执行返回的
			loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
			function(err) {
                                // 存在错误直接调用callback 表示runLoaders执行完毕
				if(err) return callback(err);
				var args = Array.prototype.slice.call(arguments, 1);
				var hasArg = args.some(function(value) {
					return value !== undefined;
				});
				if(hasArg) {
                                        // 中断当前loader执行index回退，执行iterateNormalLoaders
					loaderContext.loaderIndex--;
					iterateNormalLoaders(options, loaderContext, args, callback);
				} else {
                                        // 当前loader执行完毕，执行下一个loader
					iteratePitchingLoaders(options, loaderContext, callback);
				}
			}
		);
	});
}

// runSyncOrAsync
function runSyncOrAsync(fn, context, args, callback) {
	var isSync = true; // 默认同步
	var isDone = false; // 标记执行过了，不重复执行
	var isError = false; // internal error
	var reportedError = false;
        // 定义异步loader，如果loader中有this.async，则走async函数
	context.async = function async() {
		if(isDone) {
			if(reportedError) return; // ignore
			throw new Error("async(): The callback was already called.");
		}
                // 置为异步
		isSync = false;
		return innerCallback;
	};
        // 定义 this.callback，第3章里面有提到过
	var innerCallback = context.callback = function() {
		if(isDone) {
			if(reportedError) return; // ignore
			throw new Error("callback(): The callback was already called.");
		}
		isDone = true;
		isSync = false;
		try {
			callback.apply(null, arguments);
		} catch(e) {
			isError = true;
			throw e;
		}
	};
	try {
                // 取得pitch执行的结果
		var result = (function LOADER_EXECUTION() {
			return fn.apply(context, args);
		}());
                
		if(isSync) {
                        // 同步且执行有执行结果
			isDone = true;
			if(result === undefined)
                                // 不存在执行结果，直接熔断执行
				return callback();
                                // 通过.then来判断是不是一个Promise表示一个异步loader
			if(result && typeof result === "object" && typeof result.then === "function") {
                                // 如果是Promise，应该在.then之后进行熔断执行
				return result.then(function(r) {
					callback(null, r);
				}, callback);
			}
                        // 不满足上面的情况，那就直接熔断
			return callback(null, result);
		}
	} catch(e) {
                // 错误处理
		if(isError) throw e;
		if(isDone) {
			// loader is already "done", so we cannot use the callback function
			// for better debugging we print the error on the console
			if(typeof e === "object" && e.stack) console.error(e.stack);
			else console.error(e);
			return;
		}
		isDone = true;
		reportedError = true;
		callback(e);
	}

}

所以runLoaders会去处理options里面的源文件的绝对路径成一个数组，并生成loader执行上下文对象，通过给上下文对象绑定一系列的方法，属性以便于在loader调用加载的时候使用。处理完毕之后会去迭代loader数组，这里数组传入的方式为[...post, ...inline, ...normal, ...pre]， 在iteratePitchingLoaders函数中，会去判断loaderIndex与length的值，依次来进行对应loader的文件内容读取。每一个loader都会存在pitch阶段，picth完毕的loader会把pitchExecuted置为true并会去同步或者异步执行自己，如果还存在于还未pitch，那就需要重新走一遍iteratePitchingL-oaders。

loader为什么要熔断执行呢

因为我们知道loader本身是支持链式执行的，并不是说必要性的去执行整个链条，有些loader在执行开始前，也就是pitch阶段，它返回了不为undefined的值，就不会走之后的 loader，并将返回值返回给之前的 loader。所以熔断后就回去执行iterateNormalLoaders方法。

如果没有熔断则当前继续执行normal阶段，以及执行完毕之后回去执行下一个loader的过程。

processResource

// webpack/node_modules/loader-runner/lib/LoaderRunner.js
function processResource(options, loaderContext, callback) {
	// pre -> normal -> inline -> post
	loaderContext.loaderIndex = loaderContext.loaders.length - 1;
        
        // 获取绝对路径
	var resourcePath = loaderContext.resourcePath;

	if(resourcePath) {
                // 读取文件内容
		options.processResource(loaderContext, resourcePath, function(err) {
			if(err) return callback(err);

			var args = Array.prototype.slice.call(arguments, 1);
                        // 保存原始文件内容的buffer，挂在相当于processOptions上
			options.resourceBuffer = args[0];
			
                        // 传入iterateNormalLoaders，执行normal阶段
			iterateNormalLoaders(options, loaderContext, args, callback);
		});
	} else {
                // 没有路径的话，直接走normal阶段
		iterateNormalLoaders(options, loaderContext, [null], callback);
	}
}

至此loader就完成了文件的加载。

插件执行的时机

在createCompiler函数里面，我们会去判断配置里面的plugins是不是数组，遍历执行插件。

// webpack/node_modules/webpack/lib/webpack.js
// 单线打包开始
const createCompiler = rawOptions => {
        // 获得默认配置项options
	const options = getNormalizedWebpackOptions(rawOptions);
        // 应用配置
	applyWebpackOptionsBaseDefaults(options);
        // 创建Compiler实例
	const compiler = new Compiler(options.context, options);
        // 获得plugin执行环境，包含hooks等
	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);
			}
		}
	}
        // 应用配置， 包含处理过后的plugins
	applyWebpackOptionsDefaults(options);
        // 环境钩子执行
	compiler.hooks.environment.call();
	compiler.hooks.afterEnvironment.call();
	new WebpackOptionsApply().process(options, compiler);
	compiler.hooks.initialize.call();
	return compiler;
};

总结

webpack的运行机制就是上面说的那样子，我们深入了源码看了一下她是怎么去加载配置项的，怎么创建Compiler对象的，怎么去编译项目以及插件的加载与执行，loader的集成处理等。下一章我们将回去讨论一下webpack一些高级特性所带来的项目的性能优化，直通车 >>> 重学webpack系列(九) -- webpack的高级特性与前端性能优化