2024-01-24 10:43 蚌埠坦克学院 Java

关注

webpack源码分析（九）

回归上节内容，我们讲了一个ResolverFactory的demo，得知，他有一个resolve方法，可以让我们拿到具体的路径。

接下来，我们分析代码，他是怎么运行的。

exports.createResolver = function (options) {
	// 解析并规范化用户传入的配置
	const normalizedOptions = createOptions(options);
	const {
		alias,
		fallback,
		aliasFields,
		cachePredicate,
		cacheWithContext,
		conditionNames,
		descriptionFiles,
		enforceExtension,
		exportsFields,
		extensionAlias,
		importsFields,
		extensions,
		fileSystem,
		fullySpecified,
		mainFields,
		mainFiles,
		modules,
		plugins: userPlugins,
		pnpApi,
		resolveToContext,
		preferRelative,
		preferAbsolute,
		symlinks,
		unsafeCache,
		resolver: customResolver,
		restrictions,
		roots
	} = normalizedOptions;

	const plugins = userPlugins.slice();

	const resolver = customResolver
		? customResolver
		: new Resolver(fileSystem, normalizedOptions);

	//// pipeline ////
	// 确保hook 存在
	resolver.ensureHook("resolve");
	resolver.ensureHook("internalResolve");
	resolver.ensureHook("newInternalResolve");
	resolver.ensureHook("parsedResolve");
	resolver.ensureHook("describedResolve");
	resolver.ensureHook("rawResolve");
	resolver.ensureHook("normalResolve");
	resolver.ensureHook("internal");
	resolver.ensureHook("rawModule");
	resolver.ensureHook("module");
	resolver.ensureHook("resolveAsModule");
	resolver.ensureHook("undescribedResolveInPackage");
	resolver.ensureHook("resolveInPackage");
	resolver.ensureHook("resolveInExistingDirectory");
	resolver.ensureHook("relative");
	resolver.ensureHook("describedRelative");
	resolver.ensureHook("directory");
	resolver.ensureHook("undescribedExistingDirectory");
	resolver.ensureHook("existingDirectory");
	resolver.ensureHook("undescribedRawFile");
	resolver.ensureHook("rawFile");
	resolver.ensureHook("file");
	resolver.ensureHook("finalFile");
	resolver.ensureHook("existingFile");
	resolver.ensureHook("resolved");

	// TODO remove in next major
	// cspell:word Interal
	// Backward-compat
	// @ts-ignore
	resolver.hooks.newInteralResolve = resolver.hooks.newInternalResolve;

	// resolve
	for (const { source, resolveOptions } of [
		{ source: "resolve", resolveOptions: { fullySpecified } },
		{ source: "internal-resolve", resolveOptions: { fullySpecified: false } }
	]) {
		if (unsafeCache) {
			plugins.push(
				new UnsafeCachePlugin(
					source,
					cachePredicate,
					/** @type {import("./UnsafeCachePlugin").Cache} */ (unsafeCache),
					cacheWithContext,
					`new-${source}`
				)
			);
			plugins.push(
				new ParsePlugin(`new-${source}`, resolveOptions, "parsed-resolve")
			);
		} else {
			plugins.push(new ParsePlugin(source, resolveOptions, "parsed-resolve"));
		}
	}

	// parsed-resolve
	plugins.push(
		new DescriptionFilePlugin(
			"parsed-resolve",
			descriptionFiles,
			false,
			"described-resolve"
		)
	);
	plugins.push(new NextPlugin("after-parsed-resolve", "described-resolve"));

	// described-resolve
	plugins.push(new NextPlugin("described-resolve", "raw-resolve"));
	if (fallback.length > 0) {
		plugins.push(
			new AliasPlugin("described-resolve", fallback, "internal-resolve")
		);
	}

	// raw-resolve
	if (alias.length > 0) {
		plugins.push(new AliasPlugin("raw-resolve", alias, "internal-resolve"));
	}
	aliasFields.forEach(item => {
		plugins.push(new AliasFieldPlugin("raw-resolve", item, "internal-resolve"));
	});
	extensionAlias.forEach(item =>
		plugins.push(
			new ExtensionAliasPlugin("raw-resolve", item, "normal-resolve")
		)
	);
	plugins.push(new NextPlugin("raw-resolve", "normal-resolve"));

	// normal-resolve
	if (preferRelative) {
		plugins.push(new JoinRequestPlugin("after-normal-resolve", "relative"));
	}
	plugins.push(
		new ConditionalPlugin(
			"after-normal-resolve",
			{ module: true },
			"resolve as module",
			false,
			"raw-module"
		)
	);
	plugins.push(
		new ConditionalPlugin(
			"after-normal-resolve",
			{ internal: true },
			"resolve as internal import",
			false,
			"internal"
		)
	);
	if (preferAbsolute) {
		plugins.push(new JoinRequestPlugin("after-normal-resolve", "relative"));
	}
	if (roots.size > 0) {
		plugins.push(new RootsPlugin("after-normal-resolve", roots, "relative"));
	}
	if (!preferRelative && !preferAbsolute) {
		plugins.push(new JoinRequestPlugin("after-normal-resolve", "relative"));
	}

	// internal
	importsFields.forEach(importsField => {
		plugins.push(
			new ImportsFieldPlugin(
				"internal",
				conditionNames,
				importsField,
				"relative",
				"internal-resolve"
			)
		);
	});

	// raw-module
	exportsFields.forEach(exportsField => {
		plugins.push(
			new SelfReferencePlugin("raw-module", exportsField, "resolve-as-module")
		);
	});
	modules.forEach(item => {
		if (Array.isArray(item)) {
			if (item.includes("node_modules") && pnpApi) {
				plugins.push(
					new ModulesInHierarchicalDirectoriesPlugin(
						"raw-module",
						item.filter(i => i !== "node_modules"),
						"module"
					)
				);
				plugins.push(
					new PnpPlugin("raw-module", pnpApi, "undescribed-resolve-in-package")
				);
			} else {
				plugins.push(
					new ModulesInHierarchicalDirectoriesPlugin(
						"raw-module",
						item,
						"module"
					)
				);
			}
		} else {
			plugins.push(new ModulesInRootPlugin("raw-module", item, "module"));
		}
	});

	// module
	plugins.push(new JoinRequestPartPlugin("module", "resolve-as-module"));

	// resolve-as-module
	if (!resolveToContext) {
		plugins.push(
			new ConditionalPlugin(
				"resolve-as-module",
				{ directory: false, request: "." },
				"single file module",
				true,
				"undescribed-raw-file"
			)
		);
	}
	plugins.push(
		new DirectoryExistsPlugin(
			"resolve-as-module",
			"undescribed-resolve-in-package"
		)
	);

	// undescribed-resolve-in-package
	plugins.push(
		new DescriptionFilePlugin(
			"undescribed-resolve-in-package",
			descriptionFiles,
			false,
			"resolve-in-package"
		)
	);
	plugins.push(
		new NextPlugin("after-undescribed-resolve-in-package", "resolve-in-package")
	);

	// resolve-in-package
	exportsFields.forEach(exportsField => {
		plugins.push(
			new ExportsFieldPlugin(
				"resolve-in-package",
				conditionNames,
				exportsField,
				"relative"
			)
		);
	});
	plugins.push(
		new NextPlugin("resolve-in-package", "resolve-in-existing-directory")
	);

	// resolve-in-existing-directory
	plugins.push(
		new JoinRequestPlugin("resolve-in-existing-directory", "relative")
	);

	// relative
	plugins.push(
		new DescriptionFilePlugin(
			"relative",
			descriptionFiles,
			true,
			"described-relative"
		)
	);
	plugins.push(new NextPlugin("after-relative", "described-relative"));

	// described-relative
	if (resolveToContext) {
		plugins.push(new NextPlugin("described-relative", "directory"));
	} else {
		plugins.push(
			new ConditionalPlugin(
				"described-relative",
				{ directory: false },
				null,
				true,
				"raw-file"
			)
		);
		plugins.push(
			new ConditionalPlugin(
				"described-relative",
				{ fullySpecified: false },
				"as directory",
				true,
				"directory"
			)
		);
	}

	// directory
	plugins.push(
		new DirectoryExistsPlugin("directory", "undescribed-existing-directory")
	);

	if (resolveToContext) {
		// undescribed-existing-directory
		plugins.push(new NextPlugin("undescribed-existing-directory", "resolved"));
	} else {
		// undescribed-existing-directory
		plugins.push(
			new DescriptionFilePlugin(
				"undescribed-existing-directory",
				descriptionFiles,
				false,
				"existing-directory"
			)
		);
		mainFiles.forEach(item => {
			plugins.push(
				new UseFilePlugin(
					"undescribed-existing-directory",
					item,
					"undescribed-raw-file"
				)
			);
		});

		// described-existing-directory
		mainFields.forEach(item => {
			plugins.push(
				new MainFieldPlugin(
					"existing-directory",
					item,
					"resolve-in-existing-directory"
				)
			);
		});
		mainFiles.forEach(item => {
			plugins.push(
				new UseFilePlugin("existing-directory", item, "undescribed-raw-file")
			);
		});

		// undescribed-raw-file
		plugins.push(
			new DescriptionFilePlugin(
				"undescribed-raw-file",
				descriptionFiles,
				true,
				"raw-file"
			)
		);
		plugins.push(new NextPlugin("after-undescribed-raw-file", "raw-file"));

		// raw-file
		plugins.push(
			new ConditionalPlugin(
				"raw-file",
				{ fullySpecified: true },
				null,
				false,
				"file"
			)
		);
		if (!enforceExtension) {
			plugins.push(new TryNextPlugin("raw-file", "no extension", "file"));
		}
		extensions.forEach(item => {
			plugins.push(new AppendPlugin("raw-file", item, "file"));
		});

		// file
		if (alias.length > 0)
			plugins.push(new AliasPlugin("file", alias, "internal-resolve"));
		aliasFields.forEach(item => {
			plugins.push(new AliasFieldPlugin("file", item, "internal-resolve"));
		});
		plugins.push(new NextPlugin("file", "final-file"));

		// final-file
		plugins.push(new FileExistsPlugin("final-file", "existing-file"));

		// existing-file
		if (symlinks)
			plugins.push(new SymlinkPlugin("existing-file", "existing-file"));
		plugins.push(new NextPlugin("existing-file", "resolved"));
	}

	const resolved =
		/** @type {KnownHooks & EnsuredHooks} */
		(resolver.hooks).resolved;

	// resolved
	if (restrictions.size > 0) {
		plugins.push(new RestrictionsPlugin(resolved, restrictions));
	}

	plugins.push(new ResultPlugin(resolved));

	//// RESOLVER ////

	for (const plugin of plugins) {
		if (typeof plugin === "function") {
			/** @type {function(this: Resolver, Resolver): void} */
			(plugin).call(resolver, resolver);
		} else if (plugin) {
			plugin.apply(resolver);
		}
	}

	return resolver;
};

我先把代码放上来。

一眼望上去400多行代码真多，实际上，他做了3件事情，非常简单

createOptions(options); normalize options 参数
注册tapable钩子resolver.ensureHook("xxx");
注册插件

第一步我们直接跳过，不想讲normalize，因为实在没啥意思，无非就是字符串变成字符串数组，来回的变而已。

const resolver = customResolver? customResolver : new Resolver(fileSystem, normalizedOptions);

这行代码的关键是new Resolver(fileSystem, normalizedOptions);，因为我们不会传入自定义的customResolver

	constructor(fileSystem, options) {
		this.fileSystem = fileSystem;
		this.options = options;
		/** @type {KnownHooks} */
		this.hooks = {
			// 每执行一个插件都会调用
			resolveStep: new SyncHook(["hook", "request"], "resolveStep"),
			// 没有找到具体文件或目录
			noResolve: new SyncHook(["request", "error"], "noResolve"),
			// 开始解析
			resolve: new AsyncSeriesBailHook(
				["request", "resolveContext"],
				"resolve"
			),
			// 解析完成
			result: new AsyncSeriesHook(["result", "resolveContext"], "result")
		};
	}

Resolver的构造函数就是这样，其实和compiler很像，都是有tapable的事件。

我们继续往下看 resolver.ensureHook("xxx");

	ensureHook(name) {
		if (typeof name !== "string") {
			return name;
		}
		name = toCamelCase(name);
		if (/^before/.test(name)) {
			return /** @type {ResolveStepHook} */ (
				this.ensureHook(name[6].toLowerCase() + name.slice(7)).withOptions({
					stage: -10
				})
			);
		}
		if (/^after/.test(name)) {
			return /** @type {ResolveStepHook} */ (
				this.ensureHook(name[5].toLowerCase() + name.slice(6)).withOptions({
					stage: 10
				})
			);
		}
		const hook = /** @type {KnownHooks & EnsuredHooks} */ (this.hooks)[name];
		if (!hook) {
			/** @type {KnownHooks & EnsuredHooks} */
			(this.hooks)[name] = new AsyncSeriesBailHook(
				["request", "resolveContext"],
				name
			);

			return /** @type {KnownHooks & EnsuredHooks} */ (this.hooks)[name];
		}
		return hook;
	}

其实就是注册new AsyncSeriesBailHook（），如果带before前缀优先级会高，带after优先级会低，已经注册过，就走已经注册的。

我们接着往下看,下面是注册插件，我们直接走到最后一步,看起来和webpack没区别啊，没错，enhanced-resolve的设计形式和webpack就是非常像。

    for (const plugin of plugins) {
        if (typeof plugin === "function") {
            (plugin).call(resolver, resolver);
        } else if (plugin) {
            plugin.apply(resolver);
        }
    }

ResolverFactory()我们就说完了，我们再看他上面的resolve方法为啥可以解析到具体的路径。

 resolve(context, path, request, resolveContext, callback) {
        const obj = {
            context: context, //{}
            path: path, //路径
            request: request //.a
        };

        let yield_;
        let yieldCalled = false;
        let finishYield;
        if (typeof resolveContext.yield === "function") {
            const old = resolveContext.yield;
            yield_ = obj => {
                old(obj);
                yieldCalled = true;
            };

            finishYield = result => {
                if (result) {
						 (yield_)(result);
                }
                callback(null);
            };
        }


        const message = `resolve '
${request}' in '
${path}'`;


        /**
         * 
@param {ResolveRequest} result result
         * 
@returns {void}
         */
        const finishResolved = result => {
            return callback(
                null,
                result.path === false
                    ? false
                    : `
${result.path.replace(/#/g, "\0#")}${
                            result.query ? result.query.replace(/#/g, "\0#") : ""
                      }${result.fragment || ""}`,
                result
            );
        };


        /**
         * 
@param {string[]} log logs
         * 
@returns {void}
         */
        const finishWithoutResolve = log => {
            /**
             * 
@type {ErrorWithDetail}
             */
            const error = new Error("Can't " + message);
            error.details = log.join("\n");
            this.hooks.noResolve.call(obj, error);
            return callback(error);
        };


        if (resolveContext.log) {
            // We need log anyway to capture it in case of an error
            const parentLog = resolveContext.log;
            /** 
@type {string[]} */
            const log = [];
            return this.doResolve(
                this.hooks.resolve,
                obj,
                message,
                {
                    log: msg => {
                        parentLog(msg);
                        log.push(msg);
                    },
                    yield: yield_,
                    fileDependencies: resolveContext.fileDependencies,
                    contextDependencies: resolveContext.contextDependencies,
                    missingDependencies: resolveContext.missingDependencies,
                    stack: resolveContext.stack
                },
                (err, result) => {
                    if (err) return callback(err);


                    if (yieldCalled || (result && yield_)) {
                        return /** 
@type {ResolveContextYield} */ (finishYield)(
                            /** 
@type {ResolveRequest} */ (result)
                        );
                    }


                    if (result) return finishResolved(result);


                    return finishWithoutResolve(log);
                }
            );
        } else {
            // Try to resolve assuming there is no error
            // We don't log stuff in this case
            return this.doResolve(
                this.hooks.resolve,
                obj,
                message,
                {
                    log: undefined,
                    yield: yield_,
                    fileDependencies: resolveContext.fileDependencies,
                    contextDependencies: resolveContext.contextDependencies,
                    missingDependencies: resolveContext.missingDependencies,
                    stack: resolveContext.stack
                },
                (err, result) => {
                    if (err) return callback(err);


                    if (yieldCalled || (result && yield_)) {
                        return /** 
@type {ResolveContextYield} */ (finishYield)(
                            /** 
@type {ResolveRequest} */ (result)
                        );
                    }


                    if (result) return finishResolved(result);


                    // log is missing for the error details
                    // so we redo the resolving for the log info
                    // this is more expensive to the success case
                    // is assumed by default
                    /** 
@type {string[]} */
                    const log = [];


                    return this.doResolve(
                        this.hooks.resolve,
                        obj,
                        message,
                        {
                            log: msg => log.push(msg),
                            yield: yield_,
                            stack: resolveContext.stack
                        },
                        (err, result) => {
                            if (err) return callback(err);


                            // In a case that there is a race condition and yield will be called
                            if (yieldCalled || (result && yield_)) {
                                return /** 
@type {ResolveContextYield} */ (finishYield)(
                                    /** 
@type {ResolveRequest} */ (result)
                                );
                            }


                            return finishWithoutResolve(log);
                        }
                    );
                }
            );
        }
    }

看着resolve好像很多的样子，实际上，this.doResolve(）就调用了这个方法而已。

	doResolve(hook, request, message, resolveContext, callback) {
		const stackEntry = Resolver.createStackEntry(hook, request);

		/** @type {Set<string> | undefined} */
		let newStack;
		if (resolveContext.stack) {
			newStack = new Set(resolveContext.stack);
			if (resolveContext.stack.has(stackEntry)) {
				/**
				 * Prevent recursion
				 * @type {Error & {recursion?: boolean}}
				 */
				const recursionError = new Error(
					"Recursion in resolving\nStack:\n  " +
						Array.from(newStack).join("\n  ")
				);
				recursionError.recursion = true;
				if (resolveContext.log)
					resolveContext.log("abort resolving because of recursion");
				return callback(recursionError);
			}
			newStack.add(stackEntry);
		} else {
			newStack = new Set([stackEntry]);
		}
		//默认没有传事件，所以不走
		this.hooks.resolveStep.call(hook, request);

		if (hook.isUsed()) {
			const innerContext = createInnerContext(
				{
					log: resolveContext.log,
					yield: resolveContext.yield,
					fileDependencies: resolveContext.fileDependencies,
					contextDependencies: resolveContext.contextDependencies,
					missingDependencies: resolveContext.missingDependencies,
					stack: newStack
				},
				message
			);
			return hook.callAsync(request, innerContext, (err, result) => {
				if (err) return callback(err);
				if (result) return callback(null, result);
				callback();
			});
		} else {
			callback();
		}
	}

doResolve其实就是调用了hook.callAsync方法。

我们第一次调用的是 doResolve（this.hooks.resolve）

hooks.resolve

resolve上面挂载了一个方法。

plugins.push(new ParsePlugin(source, resolveOptions, "parsed-resolve"));

	apply(resolver) {
		const target = resolver.ensureHook(this.target);
		resolver
			.getHook(this.source)
			.tapAsync("ParsePlugin", (request, resolveContext, callback) => {
				debugger
				// 调用 resolver 中的 parse 方法初步解析
				const parsed = resolver.parse(/** @type {string} */ (request.request));
				/** @type {ResolveRequest} */
				 // 合并成新的 obj 对象
				const obj = { ...request, ...parsed, ...this.requestOptions };
				if (request.query && !parsed.query) {
					obj.query = request.query;
				}
				if (request.fragment && !parsed.fragment) {
					obj.fragment = request.fragment;
				}
				if (parsed && resolveContext.log) {
					if (parsed.module) resolveContext.log("Parsed request is a module");
					if (parsed.directory)
						resolveContext.log("Parsed request is a directory");
				}
				// There is an edge-case where a request with # can be a path or a fragment -> try both
				if (obj.request && !obj.query && obj.fragment) {
					const directory = obj.fragment.endsWith("/");
					/** @type {ResolveRequest} */
					const alternative = {
						...obj,
						directory,
						request:
							obj.request +
							(obj.directory ? "/" : "") +
							(directory ? obj.fragment.slice(0, -1) : obj.fragment),
						fragment: ""
					};
					resolver.doResolve(
						target,
						alternative,
						null,
						resolveContext,
						(err, result) => {
							if (err) return callback(err);
							if (result) return callback(null, result);
							resolver.doResolve(target, obj, null, resolveContext, callback);
						}
					);
					return;
				}
				resolver.doResolve(target, obj, null, resolveContext, callback);
			});
	}

我直接说他做了什么吧，代码也很简单，它先解析parse request，然后 resolver.doResolve(target, obj, null, resolveContext, callback);，继续调用doResolve方法。

parse request 其实就是对request进行解析，得到query，fragment，internal，module，directory.(./src?query=122#id) fragement=#的内容，query=？的内容,有点像浏览器的url解析)

doResolve继续调用，那我们就知道是这段代码是怎么实现的了。

原来就是钩子里面继续调用钩子，先走resolve，走完parsed-resolve，然后依次，知道执行完毕。。。

hooks.parsed-resolve

parsed-resolve 有两个钩子

plugins.push(new NextPlugin("after-parsed-resolve", "described-resolve"));
plugins.push(new DescriptionFilePlugin("parsed-resolve",descriptionFiles,false,"described-resolve"));

NextPlugin 非常简单，就是啥也不执行，直接跳到下一个钩子，比如这里的described-resolve

DescriptionFilePlugin 做了哪些处理呢，其实也非常的简单，他会根据当前的路径去找package.json文件，如果这一级没有，就跳到上一级，代码就不列出来了，知道功能就好。

然后就走到described-resolve

hooks.described-resolve

只有NextPlugin这个，直接就跳到raw-resolve。

hooks.raw-resolve

我们的demo没有绑定插件，只有nextPlugin，所以跳到normal-resolve

hooks.normal-resolve

ConditionalPlugin

JoinRequestPlugin

ConditionalPlguin

一种条件判断的Plugin，全部代码如下所示，初始化会传入一个条件，判断是否满足这个条件，则可以继续下一个Plugin

for (const prop of keys) {
    if (request[prop] !== test[prop]) return callback();
}
resolver.doResolve(target,request,...)

所以ConditionalPlugin的作用就是根据处理类型不同从而跳转到不同Plugin

很遗憾这里不匹配。

所以走到了JoinRequestPlugin

JoinRequestPlugin

改变path、relativePath、request

path=path+request
relativePath=relativePath+request
request=undefined

本质是将目前请求的路径加上请求文件的名称，形成请求文件的绝对路径

相对路径变成了绝对路径。path="/usr/project/xxx/xxx/index.js" 举个这样的例子

const obj = {
    ...request,
    path: resolver.join(request.path, request.request),
    relativePath:
        request.relativePath &&
        resolver.join(request.relativePath, request.request),
    request: undefined
};
resolver.doResolve(target, obj, null, resolveContext, callback);

hooks.relative

执行到这里，其实一共就做了 1. parse requset 解析? # 等信息 2. 找到package.json 3. 把相对路径的requset 和path合并拿到绝对路径。

relative有两个 1.DescriptionFilePlugin 2. nextplugin

这俩哥们真眼熟啊，一个是处理package.json的，一个是跳转到下一个钩子的。

因为我们上边已经处理过了，所以大概率这里会直接callback，走了相当于没走。

没错，debugger代码确实直接callback。

所以直接下一个吧。

hooks.described-relative

有两个 ConditionalPlguin钩子又是这位老哥

所以二者必走一个

plugins.push(
 new ConditionalPlugin(
  "described-relative",
  { directory: false },
  null,
  true,
  "raw-file"
 )
);
plugins.push(
 new ConditionalPlugin(
  "described-relative",
  { fullySpecified: false },
  "as directory",
  true,
  "directory"
 )
);

一看参数，我们一眼就知道走哪个了，一个是文件夹，一个是文件，我们这次处理的是文件，所以直接跳到raw-file。

hooks.raw-file

raw-file有5个钩子，一个TryNextPlugin，一个ConditionalPlugin，三个AppendPlugin

new ConditionalPlugin( "raw-file", { fullySpecified: true }, null, false,"file")

先走ConditionalPlugin，然后发现不匹配。

再走 plugins.push(new TryNextPlugin("raw-file", "no extension", "file"));

会直接去尝试下一个钩子，如果能走通就走下去，走不通就回来。

看名字 no extension 没有扩展名进入file钩子

hooks.file

进入file钩子，发现只有nextPlugin,进入finalFile

hooks.finalFile

它内部只有FileExistsPlugin这个钩子

	apply(resolver) {
		const target = resolver.ensureHook(this.target);
		const fs = resolver.fileSystem;
		resolver
			.getHook(this.source)
			.tapAsync("FileExistsPlugin", (request, resolveContext, callback) => {
				const file = request.path;
				if (!file) return callback();
				fs.stat(file, (err, stat) => {
					if (err || !stat) {
						if (resolveContext.missingDependencies)
							resolveContext.missingDependencies.add(file);
						if (resolveContext.log) resolveContext.log(file + " doesn't exist");
						return callback();
					}
					if (!stat.isFile()) {
						if (resolveContext.missingDependencies)
							resolveContext.missingDependencies.add(file);
						if (resolveContext.log) resolveContext.log(file + " is not a file");
						return callback();
					}
					if (resolveContext.fileDependencies)
						resolveContext.fileDependencies.add(file);
					resolver.doResolve(
						target,
						request,
						"existing file: " + file,
						resolveContext,
						callback
					);
				});
			});
	}

核心就是fs.stat(path),很明显,如果我们输入的是具体的./a.js，而不是./a，那就可以走下去，因为我们现在这条路径走下去的是无扩展名的，所以fs.stat返回error的信息。

所以只能原路返回，返回到hooks.raw-file

回到hooks.raw-file

剩下的就是AppendPlugin这个钩子，我们说有三个钩子，这是为什么呢。

extensions.forEach(item => {

plugins.push(new AppendPlugin("raw-file", item, "file"));

});

看名字就知道为啥了，因为一共有三个扩展。

extensions: [".json", ".js", ".ts"]

	apply(resolver) {
		const target = resolver.ensureHook(this.target);
		resolver
			.getHook(this.source)
			.tapAsync("AppendPlugin", (request, resolveContext, callback) => {
				debugger
				/** @type {ResolveRequest} */
				const obj = {
					...request,
					path: request.path + this.appending,
					relativePath:
						request.relativePath && request.relativePath + this.appending
				};
				resolver.doResolve(
					target,
					obj,
					this.appending,
					resolveContext,
					callback
				);
			});
	}

看一下这个函数，其实就是加别名而已。

还记得上面的流程吗，进入file，走到finalFile，但是这三个钟./a.js能找到文件，所以fs.stat是通过的，我们就可以往下走了。

new FileExistsPlugin("final-file", "existing-file")

hooks.existing-file

plugins.push(new SymlinkPlugin("existing-file", "existing-file"));

plugins.push(new NextPlugin("existing-file", "resolved"));

一个是 SymlinkPlugin ，一个老朋友NextPlugin

SymlinkPlugin软连接

代码不写了，就是利用fs.readlink拿到软连接地址，我们这里没有软连接。

所以走到 NextPlugin

hooks.resolved

plugins.push(new ResultPlugin(resolved)); 只有她了

apply(resolver) {
 this.source.tapAsync(
  "ResultPlugin",
  (request, resolverContext, callback) => {
   const obj = { ...request };
   if (resolverContext.log)
    resolverContext.log("reporting result " + obj.path);
   resolver.hooks.result.callAsync(obj, resolverContext, err => {
    if (err) return callback(err);
    if (typeof resolverContext.yield === "function") {
     resolverContext.yield(obj);
     callback(null, null);
    } else {
     callback(null, obj);
    }
   });
  }
 );
}

我们的逻辑直接就走到callback(null,obj)

而这个callback就是，我们自己写的callback

(err, path, result) => {

console.log("createResolve path: ", path, result);

}

这就是ResolverFactory.

前端技术专栏分享文章被收录于专栏

1. 包含常规前端面试题解析，和源码分析 2. 从0-1深入浅出理解前端相关技术栈