webpack 5.59.0 → 5.94.0

package/lib/NormalModuleFactory.js

@@ -18,6 +18,7 @@ const ChunkGraph = require("./ChunkGraph");
 const Module = require("./Module");
 const ModuleFactory = require("./ModuleFactory");
 const ModuleGraph = require("./ModuleGraph");
+const { JAVASCRIPT_MODULE_TYPE_AUTO } = require("./ModuleTypeConstants");
 const NormalModule = require("./NormalModule");
 const BasicEffectRulePlugin = require("./rules/BasicEffectRulePlugin");
 const BasicMatcherRulePlugin = require("./rules/BasicMatcherRulePlugin");
@@ -28,19 +29,34 @@ const LazySet = require("./util/LazySet");
 const { getScheme } = require("./util/URLAbsoluteSpecifier");
 const { cachedCleverMerge, cachedSetProperty } = require("./util/cleverMerge");
 const { join } = require("./util/fs");
-const { parseResource } = require("./util/identifier");
+const {
+	parseResource,
+	parseResourceWithoutFragment
+} = require("./util/identifier");
 
 /** @typedef {import("../declarations/WebpackOptions").ModuleOptionsNormalized} ModuleOptions */
+/** @typedef {import("../declarations/WebpackOptions").RuleSetRule} RuleSetRule */
 /** @typedef {import("./Generator")} Generator */
 /** @typedef {import("./ModuleFactory").ModuleFactoryCreateData} ModuleFactoryCreateData */
+/** @typedef {import("./ModuleFactory").ModuleFactoryCreateDataContextInfo} ModuleFactoryCreateDataContextInfo */
 /** @typedef {import("./ModuleFactory").ModuleFactoryResult} ModuleFactoryResult */
+/** @typedef {import("./NormalModule").GeneratorOptions} GeneratorOptions */
+/** @typedef {import("./NormalModule").LoaderItem} LoaderItem */
+/** @typedef {import("./NormalModule").NormalModuleCreateData} NormalModuleCreateData */
+/** @typedef {import("./NormalModule").ParserOptions} ParserOptions */
 /** @typedef {import("./Parser")} Parser */
 /** @typedef {import("./ResolverFactory")} ResolverFactory */
+/** @typedef {import("./ResolverFactory").ResolveContext} ResolveContext */
+/** @typedef {import("./ResolverFactory").ResolveRequest} ResolveRequest */
+/** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./dependencies/ModuleDependency")} ModuleDependency */
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 
+/** @typedef {Pick<RuleSetRule, 'type'|'sideEffects'|'parser'|'generator'|'resolve'|'layer'>} ModuleSettings */
+/** @typedef {Partial<NormalModuleCreateData & {settings: ModuleSettings}>} CreateData */
+
 /**
- * @typedef {Object} ResolveData
+ * @typedef {object} ResolveData
  * @property {ModuleFactoryCreateData["contextInfo"]} contextInfo
  * @property {ModuleFactoryCreateData["resolveOptions"]} resolveOptions
  * @property {string} context
@@ -48,7 +64,7 @@ const { parseResource } = require("./util/identifier");
  * @property {Record<string, any> | undefined} assertions
  * @property {ModuleDependency[]} dependencies
  * @property {string} dependencyType
- * @property {Object} createData
+ * @property {CreateData} createData
  * @property {LazySet<string>} fileDependencies
  * @property {LazySet<string>} missingDependencies
  * @property {LazySet<string>} contextDependencies
@@ -56,80 +72,97 @@ const { parseResource } = require("./util/identifier");
  */
 
 /**
- * @typedef {Object} ResourceData
+ * @typedef {object} ResourceData
  * @property {string} resource
- * @property {string} path
- * @property {string} query
- * @property {string} fragment
+ * @property {string=} path
+ * @property {string=} query
+ * @property {string=} fragment
  * @property {string=} context
  */
 
 /** @typedef {ResourceData & { data: Record<string, any> }} ResourceDataWithData */
 
+/**
+ * @typedef {object} ParsedLoaderRequest
+ * @property {string} loader loader
+ * @property {string|undefined} options options
+ */
+
+/**
+ * @template T
+ * @callback Callback
+ * @param {(Error | null)=} err
+ * @param {T=} stats
+ * @returns {void}
+ */
+
 const EMPTY_RESOLVE_OPTIONS = {};
+/** @type {ParserOptions} */
 const EMPTY_PARSER_OPTIONS = {};
+/** @type {GeneratorOptions} */
 const EMPTY_GENERATOR_OPTIONS = {};
+/** @type {ParsedLoaderRequest[]} */
 const EMPTY_ELEMENTS = [];
 
 const MATCH_RESOURCE_REGEX = /^([^!]+)!=!/;
+const LEADING_DOT_EXTENSION_REGEX = /^[^.]/;
 
+/**
+ * @param {LoaderItem} data data
+ * @returns {string} ident
+ */
 const loaderToIdent = data => {
 	if (!data.options) {
 		return data.loader;
 	}
 	if (typeof data.options === "string") {
-		return data.loader + "?" + data.options;
+		return `${data.loader}?${data.options}`;
 	}
 	if (typeof data.options !== "object") {
 		throw new Error("loader options must be string or object");
 	}
 	if (data.ident) {
-		return data.loader + "??" + data.ident;
+		return `${data.loader}??${data.ident}`;
 	}
-	return data.loader + "?" + JSON.stringify(data.options);
+	return `${data.loader}?${JSON.stringify(data.options)}`;
 };
 
+/**
+ * @param {LoaderItem[]} loaders loaders
+ * @param {string} resource resource
+ * @returns {string} stringified loaders and resource
+ */
 const stringifyLoadersAndResource = (loaders, resource) => {
 	let str = "";
 	for (const loader of loaders) {
-		str += loaderToIdent(loader) + "!";
+		str += `${loaderToIdent(loader)}!`;
 	}
 	return str + resource;
 };
 
 /**
- * @param {string} resultString resultString
- * @returns {{loader: string, options: string|undefined}} parsed loader request
+ * @param {number} times times
+ * @param {(err?: null | Error) => void} callback callback
+ * @returns {(err?: null | Error) => void} callback
  */
-const identToLoaderRequest = resultString => {
-	const idx = resultString.indexOf("?");
-	if (idx >= 0) {
-		const loader = resultString.substr(0, idx);
-		const options = resultString.substr(idx + 1);
-		return {
-			loader,
-			options
-		};
-	} else {
-		return {
-			loader: resultString,
-			options: undefined
-		};
+const needCalls = (times, callback) => err => {
+	if (--times === 0) {
+		return callback(err);
+	}
+	if (err && times > 0) {
+		times = Number.NaN;
+		return callback(err);
 	}
 };
 
-const needCalls = (times, callback) => {
-	return err => {
-		if (--times === 0) {
-			return callback(err);
-		}
-		if (err && times > 0) {
-			times = NaN;
-			return callback(err);
-		}
-	};
-};
-
+/**
+ * @template T
+ * @template O
+ * @param {T} globalOptions global options
+ * @param {string} type type
+ * @param {O} localOptions local options
+ * @returns {T & O | T | O} result
+ */
 const mergeGlobalOptions = (globalOptions, type, localOptions) => {
 	const parts = type.split("/");
 	let result;
@@ -138,26 +171,31 @@ const mergeGlobalOptions = (globalOptions, type, localOptions) => {
 		current = current ? `${current}/${part}` : part;
 		const options = globalOptions[current];
 		if (typeof options === "object") {
-			if (result === undefined) {
-				result = options;
-			} else {
-				result = cachedCleverMerge(result, options);
-			}
+			result =
+				result === undefined ? options : cachedCleverMerge(result, options);
 		}
 	}
 	if (result === undefined) {
 		return localOptions;
-	} else {
-		return cachedCleverMerge(result, localOptions);
 	}
+	return cachedCleverMerge(result, localOptions);
 };
 
 // TODO webpack 6 remove
+/**
+ * @param {string} name name
+ * @param {TODO} hook hook
+ * @returns {string} result
+ */
 const deprecationChangedHookMessage = (name, hook) => {
 	const names = hook.taps
-		.map(tapped => {
-			return tapped.name;
-		})
+		.map(
+			/**
+			 * @param {TODO} tapped tapped
+			 * @returns {string} name
+			 */
+			tapped => tapped.name
+		)
 		.join(", ");
 
 	return (
@@ -181,7 +219,16 @@ const ruleSetCompiler = new RuleSetCompiler([
 	new BasicMatcherRulePlugin("issuer"),
 	new BasicMatcherRulePlugin("compiler"),
 	new BasicMatcherRulePlugin("issuerLayer"),
-	new ObjectMatcherRulePlugin("assert", "assertions"),
+	new ObjectMatcherRulePlugin(
+		"assert",
+		"assertions",
+		value => value && /** @type {any} */ (value)._isLegacyAssert !== undefined
+	),
+	new ObjectMatcherRulePlugin(
+		"with",
+		"assertions",
+		value => value && !(/** @type {any} */ (value)._isLegacyAssert)
+	),
 	new ObjectMatcherRulePlugin("descriptionData"),
 	new BasicEffectRulePlugin("type"),
 	new BasicEffectRulePlugin("sideEffects"),
@@ -194,12 +241,12 @@ const ruleSetCompiler = new RuleSetCompiler([
 
 class NormalModuleFactory extends ModuleFactory {
 	/**
-	 * @param {Object} param params
+	 * @param {object} param params
 	 * @param {string=} param.context context
 	 * @param {InputFileSystem} param.fs file system
 	 * @param {ResolverFactory} param.resolverFactory resolverFactory
 	 * @param {ModuleOptions} param.options options
-	 * @param {Object=} param.associatedObjectForCache an object to which the cache will be attached
+	 * @param {object=} param.associatedObjectForCache an object to which the cache will be attached
 	 * @param {boolean=} param.layers enable layers
 	 */
 	constructor({
@@ -212,7 +259,7 @@ class NormalModuleFactory extends ModuleFactory {
 	}) {
 		super();
 		this.hooks = Object.freeze({
-			/** @type {AsyncSeriesBailHook<[ResolveData], TODO>} */
+			/** @type {AsyncSeriesBailHook<[ResolveData], Module | false | void>} */
 			resolve: new AsyncSeriesBailHook(["resolveData"]),
 			/** @type {HookMap<AsyncSeriesBailHook<[ResourceDataWithData, ResolveData], true | void>>} */
 			resolveForScheme: new HookMap(
@@ -222,23 +269,31 @@ class NormalModuleFactory extends ModuleFactory {
 			resolveInScheme: new HookMap(
 				() => new AsyncSeriesBailHook(["resourceData", "resolveData"])
 			),
-			/** @type {AsyncSeriesBailHook<[ResolveData], TODO>} */
+			/** @type {AsyncSeriesBailHook<[ResolveData], Module | undefined>} */
 			factorize: new AsyncSeriesBailHook(["resolveData"]),
-			/** @type {AsyncSeriesBailHook<[ResolveData], TODO>} */
+			/** @type {AsyncSeriesBailHook<[ResolveData], false | void>} */
 			beforeResolve: new AsyncSeriesBailHook(["resolveData"]),
-			/** @type {AsyncSeriesBailHook<[ResolveData], TODO>} */
+			/** @type {AsyncSeriesBailHook<[ResolveData], false | void>} */
 			afterResolve: new AsyncSeriesBailHook(["resolveData"]),
-			/** @type {AsyncSeriesBailHook<[ResolveData["createData"], ResolveData], TODO>} */
+			/** @type {AsyncSeriesBailHook<[ResolveData["createData"], ResolveData], Module | void>} */
 			createModule: new AsyncSeriesBailHook(["createData", "resolveData"]),
-			/** @type {SyncWaterfallHook<[Module, ResolveData["createData"], ResolveData], TODO>} */
+			/** @type {SyncWaterfallHook<[Module, ResolveData["createData"], ResolveData], Module>} */
 			module: new SyncWaterfallHook(["module", "createData", "resolveData"]),
+			/** @type {HookMap<SyncBailHook<[ParserOptions], Parser>>} */
 			createParser: new HookMap(() => new SyncBailHook(["parserOptions"])),
+			/** @type {HookMap<SyncBailHook<[TODO, ParserOptions], void>>} */
 			parser: new HookMap(() => new SyncHook(["parser", "parserOptions"])),
+			/** @type {HookMap<SyncBailHook<[GeneratorOptions], Generator>>} */
 			createGenerator: new HookMap(
 				() => new SyncBailHook(["generatorOptions"])
 			),
+			/** @type {HookMap<SyncBailHook<[TODO, GeneratorOptions], void>>} */
 			generator: new HookMap(
 				() => new SyncHook(["generator", "generatorOptions"])
+			),
+			/** @type {HookMap<SyncBailHook<[TODO, ResolveData], Module>>} */
+			createModuleClass: new HookMap(
+				() => new SyncBailHook(["createData", "resolveData"])
 			)
 		});
 		this.resolverFactory = resolverFactory;
@@ -254,9 +309,9 @@ class NormalModuleFactory extends ModuleFactory {
 		this.fs = fs;
 		this._globalParserOptions = options.parser;
 		this._globalGeneratorOptions = options.generator;
-		/** @type {Map<string, WeakMap<Object, TODO>>} */
+		/** @type {Map<string, WeakMap<object, Parser>>} */
 		this.parserCache = new Map();
-		/** @type {Map<string, WeakMap<Object, Generator>>} */
+		/** @type {Map<string, WeakMap<object, Generator>>} */
 		this.generatorCache = new Map();
 		/** @type {Set<Module>} */
 		this._restoredUnsafeCacheEntries = new Set();
@@ -264,6 +319,9 @@ class NormalModuleFactory extends ModuleFactory {
 		const cacheParseResource = parseResource.bindCache(
 			associatedObjectForCache
 		);
+		const cachedParseResourceWithoutFragment =
+			parseResourceWithoutFragment.bindCache(associatedObjectForCache);
+		this._parseResourceWithoutFragment = cachedParseResourceWithoutFragment;
 
 		this.hooks.factorize.tapAsync(
 			{
@@ -282,8 +340,10 @@ class NormalModuleFactory extends ModuleFactory {
 
 					if (typeof result === "object")
 						throw new Error(
-							deprecationChangedHookMessage("resolve", this.hooks.resolve) +
-								" Returning a Module object will result in this module used as result."
+							`${deprecationChangedHookMessage(
+								"resolve",
+								this.hooks.resolve
+							)} Returning a Module object will result in this module used as result.`
 						);
 
 					this.hooks.afterResolve.callAsync(resolveData, (err, result) => {
@@ -311,7 +371,20 @@ class NormalModuleFactory extends ModuleFactory {
 										return callback(new Error("Empty dependency (no request)"));
 									}
 
-									createdModule = new NormalModule(createData);
+									// TODO webpack 6 make it required and move javascript/wasm/asset properties to own module
+									createdModule = this.hooks.createModuleClass
+										.for(
+											/** @type {ModuleSettings} */ (createData.settings).type
+										)
+										.call(createData, resolveData);
+
+									if (!createdModule) {
+										createdModule = /** @type {Module} */ (
+											new NormalModule(
+												/** @type {NormalModuleCreateData} */ (createData)
+											)
+										);
+									}
 								}
 
 								createdModule = this.hooks.module.call(
@@ -348,10 +421,10 @@ class NormalModuleFactory extends ModuleFactory {
 				const loaderResolver = this.getResolver("loader");
 
 				/** @type {ResourceData | undefined} */
-				let matchResourceData = undefined;
+				let matchResourceData;
 				/** @type {string} */
 				let unresolvedResource;
-				/** @type {{loader: string, options: string|undefined}[]} */
+				/** @type {ParsedLoaderRequest[]} */
 				let elements;
 				let noPreAutoLoaders = false;
 				let noAutoLoaders = false;
@@ -382,7 +455,7 @@ class NormalModuleFactory extends ModuleFactory {
 							resource: matchResource,
 							...cacheParseResource(matchResource)
 						};
-						requestWithoutMatchResource = request.substr(
+						requestWithoutMatchResource = request.slice(
 							matchResourceMatch[0].length
 						);
 					}
@@ -400,12 +473,18 @@ class NormalModuleFactory extends ModuleFactory {
 								noPreAutoLoaders || noPrePostAutoLoaders
 									? 2
 									: noAutoLoaders
-									? 1
-									: 0
+										? 1
+										: 0
 							)
 							.split(/!+/);
-						unresolvedResource = rawElements.pop();
-						elements = rawElements.map(identToLoaderRequest);
+						unresolvedResource = /** @type {string} */ (rawElements.pop());
+						elements = rawElements.map(el => {
+							const { path, query } = cachedParseResourceWithoutFragment(el);
+							return {
+								loader: path,
+								options: query ? query.slice(1) : undefined
+							};
+						});
 						scheme = getScheme(unresolvedResource);
 					} else {
 						unresolvedResource = requestWithoutMatchResource;
@@ -416,6 +495,7 @@ class NormalModuleFactory extends ModuleFactory {
 					elements = EMPTY_ELEMENTS;
 				}
 
+				/** @type {ResolveContext} */
 				const resolveContext = {
 					fileDependencies,
 					missingDependencies,
@@ -425,6 +505,7 @@ class NormalModuleFactory extends ModuleFactory {
 				/** @type {ResourceDataWithData} */
 				let resourceData;
 
+				/** @type {undefined | LoaderItem[]} */
 				let loaders;
 
 				const continueCallback = needCalls(2, err => {
@@ -432,9 +513,9 @@ class NormalModuleFactory extends ModuleFactory {
 
 					// translate option idents
 					try {
-						for (const item of loaders) {
+						for (const item of /** @type {LoaderItem[]} */ (loaders)) {
 							if (typeof item.options === "string" && item.options[0] === "?") {
-								const ident = item.options.substr(1);
+								const ident = item.options.slice(1);
 								if (ident === "[[missing ident]]") {
 									throw new Error(
 										"No ident is provided by referenced loader. " +
@@ -451,8 +532,8 @@ class NormalModuleFactory extends ModuleFactory {
 								item.ident = ident;
 							}
 						}
-					} catch (e) {
-						return callback(e);
+					} catch (identErr) {
+						return callback(/** @type {Error} */ (identErr));
 					}
 
 					if (!resourceData) {
@@ -464,8 +545,12 @@ class NormalModuleFactory extends ModuleFactory {
 						(matchResourceData !== undefined
 							? `${matchResourceData.resource}!=!`
 							: "") +
-						stringifyLoadersAndResource(loaders, resourceData.resource);
+						stringifyLoadersAndResource(
+							/** @type {LoaderItem[]} */ (loaders),
+							resourceData.resource
+						);
 
+					/** @type {ModuleSettings} */
 					const settings = {};
 					const useLoadersPost = [];
 					const useLoaders = [];
@@ -485,7 +570,7 @@ class NormalModuleFactory extends ModuleFactory {
 							-settings.type.length - 10
 						);
 					} else {
-						settings.type = "javascript/auto";
+						settings.type = JAVASCRIPT_MODULE_TYPE_AUTO;
 						const resourceDataForRules = matchResourceData || resourceData;
 						const result = this.ruleSet.exec({
 							resource: resourceDataForRules.path,
@@ -506,6 +591,11 @@ class NormalModuleFactory extends ModuleFactory {
 							issuerLayer: contextInfo.issuerLayer || ""
 						});
 						for (const r of result) {
+							// https://github.com/webpack/webpack/issues/16466
+							// if a request exists PrePostAutoLoaders, should disable modifying Rule.type
+							if (r.type === "type" && noPrePostAutoLoaders) {
+								continue;
+							}
 							if (r.type === "use") {
 								if (!noAutoLoaders && !noPrePostAutoLoaders) {
 									useLoaders.push(r.value);
@@ -521,32 +611,47 @@ class NormalModuleFactory extends ModuleFactory {
 							} else if (
 								typeof r.value === "object" &&
 								r.value !== null &&
-								typeof settings[r.type] === "object" &&
-								settings[r.type] !== null
+								typeof settings[
+									/** @type {keyof ModuleSettings} */ (r.type)
+								] === "object" &&
+								settings[/** @type {keyof ModuleSettings} */ (r.type)] !== null
 							) {
-								settings[r.type] = cachedCleverMerge(settings[r.type], r.value);
+								settings[r.type] = cachedCleverMerge(
+									settings[/** @type {keyof ModuleSettings} */ (r.type)],
+									r.value
+								);
 							} else {
 								settings[r.type] = r.value;
 							}
 						}
 					}
 
-					let postLoaders, normalLoaders, preLoaders;
+					/** @type {undefined | LoaderItem[]} */
+					let postLoaders;
+					/** @type {undefined | LoaderItem[]} */
+					let normalLoaders;
+					/** @type {undefined | LoaderItem[]} */
+					let preLoaders;
 
 					const continueCallback = needCalls(3, err => {
 						if (err) {
 							return callback(err);
 						}
-						const allLoaders = postLoaders;
+						const allLoaders = /** @type {LoaderItem[]} */ (postLoaders);
 						if (matchResourceData === undefined) {
-							for (const loader of loaders) allLoaders.push(loader);
-							for (const loader of normalLoaders) allLoaders.push(loader);
+							for (const loader of /** @type {LoaderItem[]} */ (loaders))
+								allLoaders.push(loader);
+							for (const loader of /** @type {LoaderItem[]} */ (normalLoaders))
+								allLoaders.push(loader);
 						} else {
-							for (const loader of normalLoaders) allLoaders.push(loader);
-							for (const loader of loaders) allLoaders.push(loader);
+							for (const loader of /** @type {LoaderItem[]} */ (normalLoaders))
+								allLoaders.push(loader);
+							for (const loader of /** @type {LoaderItem[]} */ (loaders))
+								allLoaders.push(loader);
 						}
-						for (const loader of preLoaders) allLoaders.push(loader);
-						let type = settings.type;
+						for (const loader of /** @type {LoaderItem[]} */ (preLoaders))
+							allLoaders.push(loader);
+						const type = /** @type {string} */ (settings.type);
 						const resolveOptions = settings.resolve;
 						const layer = settings.layer;
 						if (layer !== undefined && !layers) {
@@ -582,8 +687,8 @@ class NormalModuleFactory extends ModuleFactory {
 								generatorOptions: settings.generator,
 								resolveOptions
 							});
-						} catch (e) {
-							return callback(e);
+						} catch (createDataErr) {
+							return callback(/** @type {Error} */ (createDataErr));
 						}
 						callback();
 					});
@@ -625,7 +730,7 @@ class NormalModuleFactory extends ModuleFactory {
 				this.resolveRequestArray(
 					contextInfo,
 					contextScheme ? this.context : context,
-					elements,
+					/** @type {LoaderItem[]} */ (elements),
 					loaderResolver,
 					resolveContext,
 					(err, result) => {
@@ -635,6 +740,9 @@ class NormalModuleFactory extends ModuleFactory {
 					}
 				);
 
+				/**
+				 * @param {string} context context
+				 */
 				const defaultResolve = context => {
 					if (/^($|\?)/.test(unresolvedResource)) {
 						resourceData = {
@@ -654,7 +762,7 @@ class NormalModuleFactory extends ModuleFactory {
 										resolveOptions || EMPTY_RESOLVE_OPTIONS,
 										"dependencyType",
 										dependencyType
-								  )
+									)
 								: resolveOptions
 						);
 						this.resolveResource(
@@ -663,12 +771,17 @@ class NormalModuleFactory extends ModuleFactory {
 							unresolvedResource,
 							normalResolver,
 							resolveContext,
-							(err, resolvedResource, resolvedResourceResolveData) => {
+							(err, _resolvedResource, resolvedResourceResolveData) => {
 								if (err) return continueCallback(err);
-								if (resolvedResource !== false) {
+								if (_resolvedResource !== false) {
+									const resolvedResource =
+										/** @type {string} */
+										(_resolvedResource);
 									resourceData = {
 										resource: resolvedResource,
-										data: resolvedResourceResolveData,
+										data:
+											/** @type {ResolveRequest} */
+											(resolvedResourceResolveData),
 										...cacheParseResource(resolvedResource)
 									};
 								}
@@ -731,7 +844,7 @@ class NormalModuleFactory extends ModuleFactory {
 
 	/**
 	 * @param {ModuleFactoryCreateData} data data object
-	 * @param {function(Error=, ModuleFactoryResult=): void} callback callback
+	 * @param {function((Error | null)=, ModuleFactoryResult=): void} callback callback
 	 * @returns {void}
 	 */
 	create(data, callback) {
@@ -813,6 +926,14 @@ class NormalModuleFactory extends ModuleFactory {
 		});
 	}
 
+	/**
+	 * @param {ModuleFactoryCreateDataContextInfo} contextInfo context info
+	 * @param {string} context context
+	 * @param {string} unresolvedResource unresolved resource
+	 * @param {ResolverWithOptions} resolver resolver
+	 * @param {ResolveContext} resolveContext resolver context
+	 * @param {(err: null | Error, res?: string | false, req?: ResolveRequest) => void} callback callback
+	 */
 	resolveResource(
 		contextInfo,
 		context,
@@ -838,10 +959,10 @@ class NormalModuleFactory extends ModuleFactory {
 						(err2, hints) => {
 							if (err2) {
 								err.message += `
-An fatal error happened during resolving additional hints for this error: ${err2.message}`;
+A fatal error happened during resolving additional hints for this error: ${err2.message}`;
 								err.stack += `
 
-An fatal error happened during resolving additional hints for this error:
+A fatal error happened during resolving additional hints for this error:
 ${err2.stack}`;
 								return callback(err);
 							}
@@ -849,6 +970,25 @@ ${err2.stack}`;
 								err.message += `
 ${hints.join("\n\n")}`;
 							}
+
+							// Check if the extension is missing a leading dot (e.g. "js" instead of ".js")
+							let appendResolveExtensionsHint = false;
+							const specifiedExtensions = Array.from(
+								resolver.options.extensions
+							);
+							const expectedExtensions = specifiedExtensions.map(extension => {
+								if (LEADING_DOT_EXTENSION_REGEX.test(extension)) {
+									appendResolveExtensionsHint = true;
+									return `.${extension}`;
+								}
+								return extension;
+							});
+							if (appendResolveExtensionsHint) {
+								err.message += `\nDid you miss the leading dot in 'resolve.extensions'? Did you mean '${JSON.stringify(
+									expectedExtensions
+								)}' instead of '${JSON.stringify(specifiedExtensions)}'?`;
+							}
+
 							callback(err);
 						}
 					);
@@ -858,6 +998,16 @@ ${hints.join("\n\n")}`;
 		);
 	}
 
+	/**
+	 * @param {Error} error error
+	 * @param {ModuleFactoryCreateDataContextInfo} contextInfo context info
+	 * @param {string} context context
+	 * @param {string} unresolvedResource unresolved resource
+	 * @param {ResolverWithOptions} resolver resolver
+	 * @param {ResolveContext} resolveContext resolver context
+	 * @param {Callback<string[]>} callback callback
+	 * @private
+	 */
 	_resolveResourceErrorHints(
 		error,
 		contextInfo,
@@ -920,13 +1070,12 @@ Add the extension to the request.`
 											/(\.[^.]+)(\?|$)/,
 											"$2"
 										);
-										if (resolver.options.extensions.has(match[1])) {
-											hint = `Did you mean '${fixedRequest}'?`;
-										} else {
-											hint = `Did you mean '${fixedRequest}'? Also note that '${match[1]}' is not in 'resolve.extensions' yet and need to be added for this to work?`;
-										}
+										hint = resolver.options.extensions.has(match[1])
+											? `Did you mean '${fixedRequest}'?`
+											: `Did you mean '${fixedRequest}'? Also note that '${match[1]}' is not in 'resolve.extensions' yet and need to be added for this to work?`;
 									} else {
-										hint = `Did you mean to omit the extension or to remove 'resolve.enforceExtension'?`;
+										hint =
+											"Did you mean to omit the extension or to remove 'resolve.enforceExtension'?";
 									}
 									return callback(
 										null,
@@ -969,11 +1118,20 @@ If changing the source code is not an option there is also a resolve options cal
 			],
 			(err, hints) => {
 				if (err) return callback(err);
-				callback(null, hints.filter(Boolean));
+				callback(null, /** @type {string[]} */ (hints).filter(Boolean));
 			}
 		);
 	}
 
+	/**
+	 * @param {ModuleFactoryCreateDataContextInfo} contextInfo context info
+	 * @param {string} context context
+	 * @param {LoaderItem[]} array array
+	 * @param {ResolverWithOptions} resolver resolver
+	 * @param {ResolveContext} resolveContext resolve context
+	 * @param {Callback<LoaderItem[]>} callback callback
+	 * @returns {void} result
+	 */
 	resolveRequestArray(
 		contextInfo,
 		context,
@@ -982,6 +1140,7 @@ If changing the source code is not an option there is also a resolve options cal
 		resolveContext,
 		callback
 	) {
+		// LoaderItem
 		if (array.length === 0) return callback(null, array);
 		asyncLib.map(
 			array,
@@ -991,22 +1150,21 @@ If changing the source code is not an option there is also a resolve options cal
 					context,
 					item.loader,
 					resolveContext,
-					(err, result) => {
+					(err, result, resolveRequest) => {
 						if (
 							err &&
 							/^[^/]*$/.test(item.loader) &&
-							!/-loader$/.test(item.loader)
+							!item.loader.endsWith("-loader")
 						) {
 							return resolver.resolve(
 								contextInfo,
 								context,
-								item.loader + "-loader",
+								`${item.loader}-loader`,
 								resolveContext,
 								err2 => {
 									if (!err2) {
 										err.message =
-											err.message +
-											"\n" +
+											`${err.message}\n` +
 											"BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.\n" +
 											`                 You need to specify '${item.loader}-loader' instead of '${item.loader}',\n` +
 											"                 see https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed";
@@ -1017,23 +1175,47 @@ If changing the source code is not an option there is also a resolve options cal
 						}
 						if (err) return callback(err);
 
-						const parsedResult = identToLoaderRequest(result);
+						const parsedResult = this._parseResourceWithoutFragment(
+							/** @type {string} */ (result)
+						);
+
+						const type = /\.mjs$/i.test(parsedResult.path)
+							? "module"
+							: /\.cjs$/i.test(parsedResult.path)
+								? "commonjs"
+								: /** @type {ResolveRequest} */
+									(resolveRequest).descriptionFileData === undefined
+									? undefined
+									: /** @type {ResolveRequest} */
+										(resolveRequest).descriptionFileData.type;
 						const resolved = {
-							loader: parsedResult.loader,
+							loader: parsedResult.path,
+							type,
 							options:
 								item.options === undefined
-									? parsedResult.options
+									? parsedResult.query
+										? parsedResult.query.slice(1)
+										: undefined
 									: item.options,
-							ident: item.options === undefined ? undefined : item.ident
+							ident:
+								item.options === undefined
+									? undefined
+									: /** @type {string} */ (item.ident)
 						};
-						return callback(null, resolved);
+
+						return callback(null, /** @type {LoaderItem} */ (resolved));
 					}
 				);
 			},
-			callback
+			/** @type {Callback<TODO>} */ (callback)
 		);
 	}
 
+	/**
+	 * @param {string} type type
+	 * @param {ParserOptions} parserOptions parser options
+	 * @returns {Parser} parser
+	 */
 	getParser(type, parserOptions = EMPTY_PARSER_OPTIONS) {
 		let cache = this.parserCache.get(type);
 
@@ -1054,7 +1236,7 @@ If changing the source code is not an option there is also a resolve options cal
 
 	/**
 	 * @param {string} type type
-	 * @param {{[k: string]: any}} parserOptions parser options
+	 * @param {ParserOptions} parserOptions parser options
 	 * @returns {Parser} parser
 	 */
 	createParser(type, parserOptions = {}) {
@@ -1071,6 +1253,11 @@ If changing the source code is not an option there is also a resolve options cal
 		return parser;
 	}
 
+	/**
+	 * @param {string} type type of generator
+	 * @param {GeneratorOptions} generatorOptions generator options
+	 * @returns {Generator} generator
+	 */
 	getGenerator(type, generatorOptions = EMPTY_GENERATOR_OPTIONS) {
 		let cache = this.generatorCache.get(type);
 
@@ -1089,6 +1276,11 @@ If changing the source code is not an option there is also a resolve options cal
 		return generator;
 	}
 
+	/**
+	 * @param {string} type type of generator
+	 * @param {GeneratorOptions} generatorOptions generator options
+	 * @returns {Generator} generator
+	 */
 	createGenerator(type, generatorOptions = {}) {
 		generatorOptions = mergeGlobalOptions(
 			this._globalGeneratorOptions,
@@ -1105,6 +1297,11 @@ If changing the source code is not an option there is also a resolve options cal
 		return generator;
 	}
 
+	/**
+	 * @param {Parameters<ResolverFactory["get"]>[0]} type type of resolver
+	 * @param {Parameters<ResolverFactory["get"]>[1]=} resolveOptions options
+	 * @returns {ReturnType<ResolverFactory["get"]>} the resolver
+	 */
 	getResolver(type, resolveOptions) {
 		return this.resolverFactory.get(type, resolveOptions);
 	}