webpack 5.59.0 → 5.94.0

package/lib/ContextModule.js

@@ -9,6 +9,7 @@ const { OriginalSource, RawSource } = require("webpack-sources");
 const AsyncDependenciesBlock = require("./AsyncDependenciesBlock");
 const { makeWebpackError } = require("./HookWebpackError");
 const Module = require("./Module");
+const { JAVASCRIPT_MODULE_TYPE_DYNAMIC } = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
 const WebpackError = require("./WebpackError");
@@ -19,32 +20,45 @@ const {
 	keepOriginalOrder,
 	compareModulesById
 } = require("./util/comparators");
-const { contextify, parseResource } = require("./util/identifier");
+const {
+	contextify,
+	parseResource,
+	makePathsRelative
+} = require("./util/identifier");
 const makeSerializable = require("./util/makeSerializable");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
+/** @typedef {import("./Chunk")} Chunk */
+/** @typedef {import("./Chunk").ChunkId} ChunkId */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./ChunkGraph").ModuleId} ModuleId */
 /** @typedef {import("./ChunkGroup").RawChunkGroupOptions} RawChunkGroupOptions */
 /** @typedef {import("./Compilation")} Compilation */
+/** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./DependencyTemplates")} DependencyTemplates */
+/** @typedef {import("./Module").BuildInfo} BuildInfo */
 /** @typedef {import("./Module").BuildMeta} BuildMeta */
 /** @typedef {import("./Module").CodeGenerationContext} CodeGenerationContext */
 /** @typedef {import("./Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("./Module").LibIdentOptions} LibIdentOptions */
 /** @typedef {import("./Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("./Module").SourceTypes} SourceTypes */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 /** @typedef {import("./ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("./RuntimeTemplate")} RuntimeTemplate */
 /** @typedef {import("./dependencies/ContextElementDependency")} ContextElementDependency */
+/** @typedef {import("./javascript/JavascriptParser").ImportAttributes} ImportAttributes */
+/** @typedef {import("./serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
+/** @typedef {import("./serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
 /** @template T @typedef {import("./util/LazySet")<T>} LazySet<T> */
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 
 /** @typedef {"sync" | "eager" | "weak" | "async-weak" | "lazy" | "lazy-once"} ContextMode Context mode */
 
 /**
- * @typedef {Object} ContextOptions
+ * @typedef {object} ContextOptions
  * @property {ContextMode} mode
  * @property {boolean} recursive
  * @property {RegExp} regExp
@@ -56,12 +70,14 @@ const makeSerializable = require("./util/makeSerializable");
  * @property {RawChunkGroupOptions=} groupOptions
  * @property {string=} typePrefix
  * @property {string=} category
- * @property {string[][]=} referencedExports exports referenced from modules (won't be mangled)
+ * @property {(string[][] | null)=} referencedExports exports referenced from modules (won't be mangled)
+ * @property {string=} layer
+ * @property {ImportAttributes=} attributes
  */
 
 /**
- * @typedef {Object} ContextModuleOptionsExtras
- * @property {string} resource
+ * @typedef {object} ContextModuleOptionsExtras
+ * @property {false|string|string[]} resource
  * @property {string=} resourceQuery
  * @property {string=} resourceFragment
  * @property {TODO} resolveOptions
@@ -71,7 +87,7 @@ const makeSerializable = require("./util/makeSerializable");
 
 /**
  * @callback ResolveDependenciesCallback
- * @param {Error=} err
+ * @param {Error | null} err
  * @param {ContextElementDependency[]=} dependencies
  */
 
@@ -82,6 +98,10 @@ const makeSerializable = require("./util/makeSerializable");
  * @param {ResolveDependenciesCallback} callback
  */
 
+/** @typedef {1 | 3 | 7 | 9} FakeMapType */
+
+/** @typedef {Record<ModuleId, FakeMapType>} FakeMap */
+
 const SNAPSHOT_OPTIONS = { timestamp: true };
 
 const TYPES = new Set(["javascript"]);
@@ -92,23 +112,38 @@ class ContextModule extends Module {
 	 * @param {ContextModuleOptions} options options object
 	 */
 	constructor(resolveDependencies, options) {
-		const parsed = parseResource(options ? options.resource : "");
-		const resource = parsed.path;
-		const resourceQuery = (options && options.resourceQuery) || parsed.query;
-		const resourceFragment =
-			(options && options.resourceFragment) || parsed.fragment;
-
-		super("javascript/dynamic", resource);
+		if (!options || typeof options.resource === "string") {
+			const parsed = parseResource(
+				options ? /** @type {string} */ (options.resource) : ""
+			);
+			const resource = parsed.path;
+			const resourceQuery = (options && options.resourceQuery) || parsed.query;
+			const resourceFragment =
+				(options && options.resourceFragment) || parsed.fragment;
+			const layer = options && options.layer;
+
+			super(JAVASCRIPT_MODULE_TYPE_DYNAMIC, resource, layer);
+			/** @type {ContextModuleOptions} */
+			this.options = {
+				...options,
+				resource,
+				resourceQuery,
+				resourceFragment
+			};
+		} else {
+			super(JAVASCRIPT_MODULE_TYPE_DYNAMIC, undefined, options.layer);
+			/** @type {ContextModuleOptions} */
+			this.options = {
+				...options,
+				resource: options.resource,
+				resourceQuery: options.resourceQuery || "",
+				resourceFragment: options.resourceFragment || ""
+			};
+		}
 
 		// Info from Factory
+		/** @type {ResolveDependencies | undefined} */
 		this.resolveDependencies = resolveDependencies;
-		/** @type {ContextModuleOptions} */
-		this.options = {
-			...options,
-			resource,
-			resourceQuery,
-			resourceFragment
-		};
 		if (options && options.resolveOptions !== undefined) {
 			this.resolveOptions = options.resolveOptions;
 		}
@@ -122,7 +157,7 @@ class ContextModule extends Module {
 	}
 
 	/**
-	 * @returns {Set<string>} types available (do not mutate)
+	 * @returns {SourceTypes} types available (do not mutate)
 	 */
 	getSourceTypes() {
 		return TYPES;
@@ -149,16 +184,26 @@ class ContextModule extends Module {
 		this.resolveDependencies = undefined;
 	}
 
-	prettyRegExp(regexString) {
-		// remove the "/" at the front and the beginning
-		// "/foo/" -> "foo"
-		return regexString
-			.substring(1, regexString.length - 1)
-			.replace(/!/g, "%21");
+	/**
+	 * @private
+	 * @param {RegExp} regexString RegExp as a string
+	 * @param {boolean=} stripSlash do we need to strip a slsh
+	 * @returns {string} pretty RegExp
+	 */
+	_prettyRegExp(regexString, stripSlash = true) {
+		const str = stripSlash
+			? regexString.source + regexString.flags
+			: `${regexString}`;
+		return str.replace(/!/g, "%21").replace(/\|/g, "%7C");
 	}
 
 	_createIdentifier() {
-		let identifier = this.context;
+		let identifier =
+			this.context ||
+			(typeof this.options.resource === "string" ||
+			this.options.resource === false
+				? `${this.options.resource}`
+				: this.options.resource.join("|"));
 		if (this.options.resourceQuery) {
 			identifier += `|${this.options.resourceQuery}`;
 		}
@@ -175,13 +220,19 @@ class ContextModule extends Module {
 			identifier += `|${this.options.addon}`;
 		}
 		if (this.options.regExp) {
-			identifier += `|${this.options.regExp}`;
+			identifier += `|${this._prettyRegExp(this.options.regExp, false)}`;
 		}
 		if (this.options.include) {
-			identifier += `|include: ${this.options.include}`;
+			identifier += `|include: ${this._prettyRegExp(
+				this.options.include,
+				false
+			)}`;
 		}
 		if (this.options.exclude) {
-			identifier += `|exclude: ${this.options.exclude}`;
+			identifier += `|exclude: ${this._prettyRegExp(
+				this.options.exclude,
+				false
+			)}`;
 		}
 		if (this.options.referencedExports) {
 			identifier += `|referencedExports: ${JSON.stringify(
@@ -201,6 +252,9 @@ class ContextModule extends Module {
 		} else if (this.options.namespaceObject) {
 			identifier += "|namespace object";
 		}
+		if (this.layer) {
+			identifier += `|layer: ${this.layer}`;
+		}
 
 		return identifier;
 	}
@@ -217,7 +271,19 @@ class ContextModule extends Module {
 	 * @returns {string} a user readable identifier of the module
 	 */
 	readableIdentifier(requestShortener) {
-		let identifier = requestShortener.shorten(this.context) + "/";
+		let identifier;
+		if (this.context) {
+			identifier = `${requestShortener.shorten(this.context)}/`;
+		} else if (
+			typeof this.options.resource === "string" ||
+			this.options.resource === false
+		) {
+			identifier = `${requestShortener.shorten(`${this.options.resource}`)}/`;
+		} else {
+			identifier = this.options.resource
+				.map(r => `${requestShortener.shorten(r)}/`)
+				.join(" ");
+		}
 		if (this.options.resourceQuery) {
 			identifier += ` ${this.options.resourceQuery}`;
 		}
@@ -231,13 +297,13 @@ class ContextModule extends Module {
 			identifier += ` ${requestShortener.shorten(this.options.addon)}`;
 		}
 		if (this.options.regExp) {
-			identifier += ` ${this.prettyRegExp(this.options.regExp + "")}`;
+			identifier += ` ${this._prettyRegExp(this.options.regExp)}`;
 		}
 		if (this.options.include) {
-			identifier += ` include: ${this.prettyRegExp(this.options.include + "")}`;
+			identifier += ` include: ${this._prettyRegExp(this.options.include)}`;
 		}
 		if (this.options.exclude) {
-			identifier += ` exclude: ${this.prettyRegExp(this.options.exclude + "")}`;
+			identifier += ` exclude: ${this._prettyRegExp(this.options.exclude)}`;
 		}
 		if (this.options.referencedExports) {
 			identifier += ` referencedExports: ${this.options.referencedExports
@@ -250,7 +316,9 @@ class ContextModule extends Module {
 		if (this.options.groupOptions) {
 			const groupOptions = this.options.groupOptions;
 			for (const key of Object.keys(groupOptions)) {
-				identifier += ` ${key}: ${groupOptions[key]}`;
+				identifier += ` ${key}: ${
+					groupOptions[/** @type {keyof RawChunkGroupOptions} */ (key)]
+				}`;
 			}
 		}
 		if (this.options.namespaceObject === "strict") {
@@ -267,11 +335,31 @@ class ContextModule extends Module {
 	 * @returns {string | null} an identifier for library inclusion
 	 */
 	libIdent(options) {
-		let identifier = contextify(
-			options.context,
-			this.context,
-			options.associatedObjectForCache
-		);
+		let identifier;
+
+		if (this.context) {
+			identifier = contextify(
+				options.context,
+				this.context,
+				options.associatedObjectForCache
+			);
+		} else if (typeof this.options.resource === "string") {
+			identifier = contextify(
+				options.context,
+				this.options.resource,
+				options.associatedObjectForCache
+			);
+		} else if (this.options.resource === false) {
+			identifier = "false";
+		} else {
+			identifier = this.options.resource
+				.map(res =>
+					contextify(options.context, res, options.associatedObjectForCache)
+				)
+				.join(" ");
+		}
+
+		if (this.layer) identifier = `(${this.layer})/${identifier}`;
 		if (this.options.mode) {
 			identifier += ` ${this.options.mode}`;
 		}
@@ -286,13 +374,13 @@ class ContextModule extends Module {
 			)}`;
 		}
 		if (this.options.regExp) {
-			identifier += ` ${this.prettyRegExp(this.options.regExp + "")}`;
+			identifier += ` ${this._prettyRegExp(this.options.regExp)}`;
 		}
 		if (this.options.include) {
-			identifier += ` include: ${this.prettyRegExp(this.options.include + "")}`;
+			identifier += ` include: ${this._prettyRegExp(this.options.include)}`;
 		}
 		if (this.options.exclude) {
-			identifier += ` exclude: ${this.prettyRegExp(this.options.exclude + "")}`;
+			identifier += ` exclude: ${this._prettyRegExp(this.options.exclude)}`;
 		}
 		if (this.options.referencedExports) {
 			identifier += ` referencedExports: ${this.options.referencedExports
@@ -312,17 +400,20 @@ class ContextModule extends Module {
 
 	/**
 	 * @param {NeedBuildContext} context context info
-	 * @param {function(WebpackError=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
+	 * @param {function((WebpackError | null)=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
 	 * @returns {void}
 	 */
 	needBuild({ fileSystemInfo }, callback) {
 		// build if enforced
 		if (this._forceBuild) return callback(null, true);
 
-		// always build when we have no snapshot
-		if (!this.buildInfo.snapshot) return callback(null, true);
+		const buildInfo = /** @type {BuildInfo} */ (this.buildInfo);
+
+		// always build when we have no snapshot and context
+		if (!buildInfo.snapshot)
+			return callback(null, Boolean(this.context || this.options.resource));
 
-		fileSystemInfo.checkSnapshotValid(this.buildInfo.snapshot, (err, valid) => {
+		fileSystemInfo.checkSnapshotValid(buildInfo.snapshot, (err, valid) => {
 			callback(err, !valid);
 		});
 	}
@@ -348,7 +439,8 @@ class ContextModule extends Module {
 		this.dependencies.length = 0;
 		this.blocks.length = 0;
 		const startTime = Date.now();
-		this.resolveDependencies(fs, this.options, (err, dependencies) => {
+		/** @type {ResolveDependencies} */
+		(this.resolveDependencies)(fs, this.options, (err, dependencies) => {
 			if (err) {
 				return callback(
 					makeWebpackError(err, "ContextModule.resolveDependencies")
@@ -435,15 +527,22 @@ class ContextModule extends Module {
 				);
 				return;
 			}
+			if (!this.context && !this.options.resource) return callback();
+
 			compilation.fileSystemInfo.createSnapshot(
 				startTime,
 				null,
-				[this.context],
+				this.context
+					? [this.context]
+					: typeof this.options.resource === "string"
+						? [this.options.resource]
+						: /** @type {string[]} */ (this.options.resource),
 				null,
 				SNAPSHOT_OPTIONS,
 				(err, snapshot) => {
 					if (err) return callback(err);
-					this.buildInfo.snapshot = snapshot;
+					/** @type {BuildInfo} */
+					(this.buildInfo).snapshot = snapshot;
 					callback();
 				}
 			);
@@ -462,39 +561,49 @@ class ContextModule extends Module {
 		missingDependencies,
 		buildDependencies
 	) {
-		contextDependencies.add(this.context);
+		if (this.context) {
+			contextDependencies.add(this.context);
+		} else if (typeof this.options.resource === "string") {
+			contextDependencies.add(this.options.resource);
+		} else if (this.options.resource === false) {
+			// Do nothing
+		} else {
+			for (const res of this.options.resource) contextDependencies.add(res);
+		}
 	}
 
 	/**
-	 * @param {ContextElementDependency[]} dependencies all dependencies
+	 * @param {Dependency[]} dependencies all dependencies
 	 * @param {ChunkGraph} chunkGraph chunk graph
-	 * @returns {TODO} TODO
+	 * @returns {Map<string, string | number>} map with user requests
 	 */
 	getUserRequestMap(dependencies, chunkGraph) {
 		const moduleGraph = chunkGraph.moduleGraph;
 		// if we filter first we get a new array
 		// therefore we don't need to create a clone of dependencies explicitly
 		// therefore the order of this is !important!
-		const sortedDependencies = dependencies
-			.filter(dependency => moduleGraph.getModule(dependency))
-			.sort((a, b) => {
-				if (a.userRequest === b.userRequest) {
-					return 0;
-				}
-				return a.userRequest < b.userRequest ? -1 : 1;
-			});
+		const sortedDependencies =
+			/** @type {ContextElementDependency[]} */
+			(dependencies)
+				.filter(dependency => moduleGraph.getModule(dependency))
+				.sort((a, b) => {
+					if (a.userRequest === b.userRequest) {
+						return 0;
+					}
+					return a.userRequest < b.userRequest ? -1 : 1;
+				});
 		const map = Object.create(null);
 		for (const dep of sortedDependencies) {
-			const module = moduleGraph.getModule(dep);
+			const module = /** @type {Module} */ (moduleGraph.getModule(dep));
 			map[dep.userRequest] = chunkGraph.getModuleId(module);
 		}
 		return map;
 	}
 
 	/**
-	 * @param {ContextElementDependency[]} dependencies all dependencies
+	 * @param {Dependency[]} dependencies all dependencies
 	 * @param {ChunkGraph} chunkGraph chunk graph
-	 * @returns {TODO} TODO
+	 * @returns {FakeMap | FakeMapType} fake map
 	 */
 	getFakeMap(dependencies, chunkGraph) {
 		if (!this.options.namespaceObject) {
@@ -508,16 +617,19 @@ class ContextModule extends Module {
 		// therefore we don't need to create a clone of dependencies explicitly
 		// therefore the order of this is !important!
 		const sortedModules = dependencies
-			.map(dependency => moduleGraph.getModule(dependency))
+			.map(
+				dependency => /** @type {Module} */ (moduleGraph.getModule(dependency))
+			)
 			.filter(Boolean)
 			.sort(comparator);
+		/** @type {FakeMap} */
 		const fakeMap = Object.create(null);
 		for (const module of sortedModules) {
 			const exportsType = module.getExportsType(
 				moduleGraph,
 				this.options.namespaceObject === "strict"
 			);
-			const id = chunkGraph.getModuleId(module);
+			const id = /** @type {ModuleId} */ (chunkGraph.getModuleId(module));
 			switch (exportsType) {
 				case "namespace":
 					fakeMap[id] = 9;
@@ -557,21 +669,36 @@ class ContextModule extends Module {
 		return fakeMap;
 	}
 
+	/**
+	 * @param {FakeMap | FakeMapType} fakeMap fake map
+	 * @returns {string} fake map init statement
+	 */
 	getFakeMapInitStatement(fakeMap) {
 		return typeof fakeMap === "object"
 			? `var fakeMap = ${JSON.stringify(fakeMap, null, "\t")};`
 			: "";
 	}
 
+	/**
+	 * @param {FakeMapType} type type
+	 * @param {boolean=} asyncModule is async module
+	 * @returns {string} return result
+	 */
 	getReturn(type, asyncModule) {
 		if (type === 9) {
-			return "__webpack_require__(id)";
+			return `${RuntimeGlobals.require}(id)`;
 		}
 		return `${RuntimeGlobals.createFakeNamespaceObject}(id, ${type}${
 			asyncModule ? " | 16" : ""
 		})`;
 	}
 
+	/**
+	 * @param {FakeMap | FakeMapType} fakeMap fake map
+	 * @param {boolean=} asyncModule us async module
+	 * @param {string=} fakeMapDataExpression fake map data expression
+	 * @returns {string} module object source
+	 */
 	getReturnModuleObjectSource(
 		fakeMap,
 		asyncModule,
@@ -586,8 +713,8 @@ class ContextModule extends Module {
 	}
 
 	/**
-	 * @param {TODO} dependencies TODO
-	 * @param {TODO} id TODO
+	 * @param {Dependency[]} dependencies dependencies
+	 * @param {ModuleId} id module id
 	 * @param {ChunkGraph} chunkGraph the chunk graph
 	 * @returns {string} source code
 	 */
@@ -620,8 +747,8 @@ webpackContext.id = ${JSON.stringify(id)};`;
 	}
 
 	/**
-	 * @param {TODO} dependencies TODO
-	 * @param {TODO} id TODO
+	 * @param {Dependency[]} dependencies dependencies
+	 * @param {ModuleId} id module id
 	 * @param {ChunkGraph} chunkGraph the chunk graph
 	 * @returns {string} source code
 	 */
@@ -659,9 +786,9 @@ module.exports = webpackContext;`;
 	}
 
 	/**
-	 * @param {TODO} dependencies TODO
-	 * @param {TODO} id TODO
-	 * @param {Object} context context
+	 * @param {Dependency[]} dependencies dependencies
+	 * @param {ModuleId} id module id
+	 * @param {object} context context
 	 * @param {ChunkGraph} context.chunkGraph the chunk graph
 	 * @param {RuntimeTemplate} context.runtimeTemplate the chunk graph
 	 * @returns {string} source code
@@ -708,9 +835,9 @@ module.exports = webpackAsyncContext;`;
 	}
 
 	/**
-	 * @param {TODO} dependencies TODO
-	 * @param {TODO} id TODO
-	 * @param {Object} context context
+	 * @param {Dependency[]} dependencies dependencies
+	 * @param {ModuleId} id module id
+	 * @param {object} context context
 	 * @param {ChunkGraph} context.chunkGraph the chunk graph
 	 * @param {RuntimeTemplate} context.runtimeTemplate the chunk graph
 	 * @returns {string} source code
@@ -722,9 +849,9 @@ module.exports = webpackAsyncContext;`;
 		const thenFunction =
 			fakeMap !== 9
 				? `${arrow ? "id =>" : "function(id)"} {
-		${this.getReturnModuleObjectSource(fakeMap)}
+		${this.getReturnModuleObjectSource(fakeMap, true)}
 	}`
-				: "__webpack_require__";
+				: RuntimeGlobals.require;
 		return `var map = ${JSON.stringify(map, null, "\t")};
 ${this.getFakeMapInitStatement(fakeMap)}
 
@@ -752,10 +879,10 @@ module.exports = webpackAsyncContext;`;
 	}
 
 	/**
-	 * @param {TODO} block TODO
-	 * @param {TODO} dependencies TODO
-	 * @param {TODO} id TODO
-	 * @param {Object} options options object
+	 * @param {AsyncDependenciesBlock} block block
+	 * @param {Dependency[]} dependencies dependencies
+	 * @param {ModuleId} id module id
+	 * @param {object} options options object
 	 * @param {RuntimeTemplate} options.runtimeTemplate the runtime template
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @returns {string} source code
@@ -775,7 +902,7 @@ module.exports = webpackAsyncContext;`;
 				? `${arrow ? "id =>" : "function(id)"} {
 		${this.getReturnModuleObjectSource(fakeMap, true)};
 	}`
-				: "__webpack_require__";
+				: RuntimeGlobals.require;
 
 		return `var map = ${JSON.stringify(map, null, "\t")};
 ${this.getFakeMapInitStatement(fakeMap)}
@@ -802,9 +929,9 @@ module.exports = webpackAsyncContext;`;
 	}
 
 	/**
-	 * @param {TODO} blocks TODO
-	 * @param {TODO} id TODO
-	 * @param {Object} context context
+	 * @param {AsyncDependenciesBlock[]} blocks blocks
+	 * @param {ModuleId} id module id
+	 * @param {object} context context
 	 * @param {ChunkGraph} context.chunkGraph the chunk graph
 	 * @param {RuntimeTemplate} context.runtimeTemplate the chunk graph
 	 * @returns {string} source code
@@ -819,13 +946,19 @@ module.exports = webpackAsyncContext;`;
 			chunkGraph
 		);
 		const hasFakeMap = typeof fakeMap === "object";
+		/** @typedef {{userRequest: string, dependency: ContextElementDependency, chunks: undefined | Chunk[], module: Module, block: AsyncDependenciesBlock}} Item */
+		/**
+		 * @type {Item[]}
+		 */
 		const items = blocks
 			.map(block => {
-				const dependency = block.dependencies[0];
+				const dependency =
+					/** @type {ContextElementDependency} */
+					(block.dependencies[0]);
 				return {
-					dependency: dependency,
-					module: moduleGraph.getModule(dependency),
-					block: block,
+					dependency,
+					module: /** @type {Module} */ (moduleGraph.getModule(dependency)),
+					block,
 					userRequest: dependency.userRequest,
 					chunks: undefined
 				};
@@ -847,18 +980,23 @@ module.exports = webpackAsyncContext;`;
 			if (a.userRequest === b.userRequest) return 0;
 			return a.userRequest < b.userRequest ? -1 : 1;
 		});
+		/** @type {Record<string, ModuleId | (ModuleId[] | ChunkId[])>} */
 		const map = Object.create(null);
 		for (const item of sortedItems) {
-			const moduleId = chunkGraph.getModuleId(item.module);
+			const moduleId =
+				/** @type {ModuleId} */
+				(chunkGraph.getModuleId(item.module));
 			if (shortMode) {
 				map[item.userRequest] = moduleId;
 			} else {
+				/** @type {(ModuleId | ChunkId)[]} */
 				const arrayStart = [moduleId];
 				if (hasFakeMap) {
 					arrayStart.push(fakeMap[moduleId]);
 				}
 				map[item.userRequest] = arrayStart.concat(
-					item.chunks.map(chunk => chunk.id)
+					/** @type {Chunk[]} */
+					(item.chunks).map(chunk => /** @type {ChunkId} */ (chunk.id))
 				);
 			}
 		}
@@ -867,8 +1005,8 @@ module.exports = webpackAsyncContext;`;
 		const requestPrefix = hasNoChunk
 			? "Promise.resolve()"
 			: hasMultipleOrNoChunks
-			? `Promise.all(ids.slice(${chunksStartPosition}).map(${RuntimeGlobals.ensureChunk}))`
-			: `${RuntimeGlobals.ensureChunk}(ids[${chunksStartPosition}])`;
+				? `Promise.all(ids.slice(${chunksStartPosition}).map(${RuntimeGlobals.ensureChunk}))`
+				: `${RuntimeGlobals.ensureChunk}(ids[${chunksStartPosition}])`;
 		const returnModuleObject = this.getReturnModuleObjectSource(
 			fakeMap,
 			true,
@@ -914,6 +1052,11 @@ webpackAsyncContext.id = ${JSON.stringify(id)};
 module.exports = webpackAsyncContext;`;
 	}
 
+	/**
+	 * @param {ModuleId} id module id
+	 * @param {RuntimeTemplate} runtimeTemplate runtime template
+	 * @returns {string} source for empty async context
+	 */
 	getSourceForEmptyContext(id, runtimeTemplate) {
 		return `function webpackEmptyContext(req) {
 	var e = new Error("Cannot find module '" + req + "'");
@@ -926,6 +1069,11 @@ webpackEmptyContext.id = ${JSON.stringify(id)};
 module.exports = webpackEmptyContext;`;
 	}
 
+	/**
+	 * @param {ModuleId} id module id
+	 * @param {RuntimeTemplate} runtimeTemplate runtime template
+	 * @returns {string} source for empty async context
+	 */
 	getSourceForEmptyAsyncContext(id, runtimeTemplate) {
 		const arrow = runtimeTemplate.supportsArrowFunction();
 		return `function webpackEmptyAsyncContext(req) {
@@ -949,7 +1097,7 @@ module.exports = webpackEmptyAsyncContext;`;
 	 * @returns {string} the source code
 	 */
 	getSourceString(asyncMode, { runtimeTemplate, chunkGraph }) {
-		const id = chunkGraph.getModuleId(this);
+		const id = /** @type {ModuleId} */ (chunkGraph.getModuleId(this));
 		if (asyncMode === "lazy") {
 			if (this.blocks && this.blocks.length > 0) {
 				return this.getLazySource(this.blocks, id, {
@@ -987,10 +1135,12 @@ module.exports = webpackEmptyAsyncContext;`;
 			}
 			return this.getSourceForEmptyAsyncContext(id, runtimeTemplate);
 		}
-		if (asyncMode === "weak") {
-			if (this.dependencies && this.dependencies.length > 0) {
-				return this.getWeakSyncSource(this.dependencies, id, chunkGraph);
-			}
+		if (
+			asyncMode === "weak" &&
+			this.dependencies &&
+			this.dependencies.length > 0
+		) {
+			return this.getWeakSyncSource(this.dependencies, id, chunkGraph);
 		}
 		if (this.dependencies && this.dependencies.length > 0) {
 			return this.getSyncSource(this.dependencies, id, chunkGraph);
@@ -998,9 +1148,21 @@ module.exports = webpackEmptyAsyncContext;`;
 		return this.getSourceForEmptyContext(id, runtimeTemplate);
 	}
 
-	getSource(sourceString) {
+	/**
+	 * @param {string} sourceString source content
+	 * @param {Compilation=} compilation the compilation
+	 * @returns {Source} generated source
+	 */
+	getSource(sourceString, compilation) {
 		if (this.useSourceMap || this.useSimpleSourceMap) {
-			return new OriginalSource(sourceString, this.identifier());
+			return new OriginalSource(
+				sourceString,
+				`webpack://${makePathsRelative(
+					(compilation && compilation.compiler.context) || "",
+					this.identifier(),
+					compilation && compilation.compiler.root
+				)}`
+			);
 		}
 		return new RawSource(sourceString);
 	}
@@ -1010,16 +1172,23 @@ module.exports = webpackEmptyAsyncContext;`;
 	 * @returns {CodeGenerationResult} result
 	 */
 	codeGeneration(context) {
-		const { chunkGraph } = context;
+		const { chunkGraph, compilation } = context;
 		const sources = new Map();
 		sources.set(
 			"javascript",
-			this.getSource(this.getSourceString(this.options.mode, context))
+			this.getSource(
+				this.getSourceString(this.options.mode, context),
+				compilation
+			)
 		);
 		const set = new Set();
-		const allDeps = /** @type {ContextElementDependency[]} */ (
-			this.dependencies.concat(this.blocks.map(b => b.dependencies[0]))
-		);
+		const allDeps =
+			this.dependencies.length > 0
+				? /** @type {ContextElementDependency[]} */ (this.dependencies).slice()
+				: [];
+		for (const block of this.blocks)
+			for (const dep of block.dependencies)
+				allDeps.push(/** @type {ContextElementDependency} */ (dep));
 		set.add(RuntimeGlobals.module);
 		set.add(RuntimeGlobals.hasOwnProperty);
 		if (allDeps.length > 0) {
@@ -1059,6 +1228,9 @@ module.exports = webpackEmptyAsyncContext;`;
 		return size;
 	}
 
+	/**
+	 * @param {ObjectSerializerContext} context context
+	 */
 	serialize(context) {
 		const { write } = context;
 		write(this._identifier);
@@ -1066,6 +1238,9 @@ module.exports = webpackEmptyAsyncContext;`;
 		super.serialize(context);
 	}
 
+	/**
+	 * @param {ObjectDeserializerContext} context context
+	 */
 	deserialize(context) {
 		const { read } = context;
 		this._identifier = read();