webpack 5.104.1 → 5.105.0

package/lib/RuntimeTemplate.js

@@ -84,7 +84,7 @@ function getGlobalObject(definition) {
 		// iife
 		// call expression
 		// expression in parentheses
-		/^([_\p{L}][_0-9\p{L}]*)?\(.*\)$/iu.test(trimmed)
+		/^(?:[_\p{L}][_0-9\p{L}]*)?\(.*\)$/iu.test(trimmed)
 	) {
 		return trimmed;
 	}
@@ -356,6 +356,7 @@ class RuntimeTemplate {
 	 * @returns {string} comment
 	 */
 	comment({ request, chunkName, chunkReason, message, exportName }) {
+		/** @type {string} */
 		let content;
 		if (this.outputOptions.pathinfo) {
 			content = [message, request, chunkName, chunkReason]
@@ -678,6 +679,7 @@ class RuntimeTemplate {
 			runtimeRequirements
 		});
 
+		/** @type {string} */
 		let appending;
 		let idExpr = JSON.stringify(chunkGraph.getModuleId(module));
 		const comment = this.comment({
@@ -711,7 +713,10 @@ class RuntimeTemplate {
 
 		if (isModuleDeferred) {
 			runtimeRequirements.add(RuntimeGlobals.makeDeferredNamespaceObject);
-			const mode = getMakeDeferredNamespaceModeFromExportsType(exportsType);
+
+			let mode = getMakeDeferredNamespaceModeFromExportsType(exportsType);
+			if (mode) mode = `${mode} | 16`;
+
 			const asyncDeps = Array.from(
 				getOutgoingAsyncModules(chunkGraph.moduleGraph, module),
 				(m) => chunkGraph.getModuleId(m)
@@ -852,14 +857,14 @@ class RuntimeTemplate {
 	 * @param {object} options options object
 	 * @param {boolean=} options.update whether a new variable should be created or the existing one updated
 	 * @param {Module} options.module the module
+	 * @param {Module} options.originModule module in which the statement is emitted
 	 * @param {ModuleGraph} options.moduleGraph the module graph
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
-	 * @param {string} options.request the request that should be printed as comment
+	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @param {string} options.importVar name of the import variable
-	 * @param {Module} options.originModule module in which the statement is emitted
+	 * @param {string=} options.request the request that should be printed as comment
 	 * @param {boolean=} options.weak true, if this is a weak dependency
-	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
-	 * @param {ModuleDependency} options.dependency module dependency
+	 * @param {ModuleDependency=} options.dependency module dependency
 	 * @returns {[string, string]} the import statement and the compat statement
 	 */
 	importStatement({
@@ -918,6 +923,8 @@ class RuntimeTemplate {
 			(originModule.buildMeta).strictHarmonyModule
 		);
 		runtimeRequirements.add(RuntimeGlobals.require);
+
+		/** @type {string} */
 		let importContent;
 
 		const isModuleDeferred =
@@ -961,7 +968,7 @@ class RuntimeTemplate {
 	 * @param {string | string[]} options.exportName the export name
 	 * @param {Module} options.originModule the origin module
 	 * @param {boolean | undefined} options.asiSafe true, if location is safe for ASI, a bracket can be emitted
-	 * @param {boolean} options.isCall true, if expression will be called
+	 * @param {boolean | undefined} options.isCall true, if expression will be called
 	 * @param {boolean | null} options.callContext when false, call context will not be preserved
 	 * @param {boolean} options.defaultInterop when true and accessing the default exports, interop code will be generated
 	 * @param {string} options.importVar the identifier name of the import variable

package/lib/SourceMapDevToolPlugin.js

@@ -51,9 +51,9 @@ const validate = createSchemaValidation(
  */
 
 const METACHARACTERS_REGEXP = /[-[\]\\/{}()*+?.^$|]/g;
-const CONTENT_HASH_DETECT_REGEXP = /\[contenthash(:\w+)?\]/;
+const CONTENT_HASH_DETECT_REGEXP = /\[contenthash(?::\w+)?\]/;
 const CSS_AND_JS_MODULE_EXTENSIONS_REGEXP = /\.((c|m)?js|css)($|\?)/i;
-const CSS_EXTENSION_DETECT_REGEXP = /\.css($|\?)/i;
+const CSS_EXTENSION_DETECT_REGEXP = /\.css(?:$|\?)/i;
 const MAP_URL_COMMENT_REGEXP = /\[map\]/g;
 const URL_COMMENT_REGEXP = /\[url\]/g;
 const URL_FORMATTING_REGEXP = /^\n\/\/(.*)$/;
@@ -93,18 +93,19 @@ const getTaskForFile = (
 	compilation,
 	cacheItem
 ) => {
+	/** @type {string | Buffer} */
 	let source;
-	/** @type {RawSourceMap} */
+	/** @type {null | RawSourceMap} */
 	let sourceMap;
 	/**
 	 * Check if asset can build source map
 	 */
 	if (asset.sourceAndMap) {
 		const sourceAndMap = asset.sourceAndMap(options);
-		sourceMap = /** @type {RawSourceMap} */ (sourceAndMap.map);
+		sourceMap = sourceAndMap.map;
 		source = sourceAndMap.source;
 	} else {
-		sourceMap = /** @type {RawSourceMap} */ (asset.map(options));
+		sourceMap = asset.map(options);
 		source = asset.source();
 	}
 	if (!sourceMap || typeof source !== "string") return;
@@ -173,6 +174,7 @@ class SourceMapDevToolPlugin {
 		const options = this.options;
 		options.test = options.test || CSS_AND_JS_MODULE_EXTENSIONS_REGEXP;
 
+		/** @type {(filename: string) => boolean} */
 		const matchObject = ModuleFilenameHelpers.matchObject.bind(
 			undefined,
 			options
@@ -310,7 +312,7 @@ class SourceMapDevToolPlugin {
 
 										if (
 											typeof module === "string" &&
-											/^(data|https?):/.test(module)
+											/^(?:data|https?):/.test(module)
 										) {
 											moduleToSourceNameMapping.set(module, module);
 											continue;
@@ -416,7 +418,9 @@ class SourceMapDevToolPlugin {
 							asyncLib.each(
 								tasks,
 								(task, callback) => {
+									/** @type {Record<string, Source>} */
 									const assets = Object.create(null);
+									/** @type {Record<string, AssetInfo | undefined>} */
 									const assetsInfo = Object.create(null);
 									const file = task.file;
 									const chunk = fileToChunk.get(file);
@@ -434,24 +438,27 @@ class SourceMapDevToolPlugin {
 										moduleToSourceNameMapping.get(m)
 									);
 									sourceMap.sources = /** @type {string[]} */ (moduleFilenames);
-									sourceMap.ignoreList = options.ignoreList
-										? sourceMap.sources.reduce(
-												/** @type {(acc: number[], sourceName: string, idx: number) => number[]} */ (
-													(acc, sourceName, idx) => {
-														const rule = /** @type {Rules} */ (
-															options.ignoreList
-														);
-														if (
-															ModuleFilenameHelpers.matchPart(sourceName, rule)
-														) {
-															acc.push(idx);
-														}
-														return acc;
+									if (options.ignoreList) {
+										const ignoreList = sourceMap.sources.reduce(
+											/** @type {(acc: number[], sourceName: string, idx: number) => number[]} */ (
+												(acc, sourceName, idx) => {
+													const rule = /** @type {Rules} */ (
+														options.ignoreList
+													);
+													if (
+														ModuleFilenameHelpers.matchPart(sourceName, rule)
+													) {
+														acc.push(idx);
 													}
-												),
-												[]
-											)
-										: [];
+													return acc;
+												}
+											),
+											[]
+										);
+										if (ignoreList.length > 0) {
+											sourceMap.ignoreList = ignoreList;
+										}
+									}
 
 									if (options.noSources) {
 										sourceMap.sourcesContent = undefined;

package/lib/Template.js

@@ -36,10 +36,10 @@ const NUMBER_OF_IDENTIFIER_CONTINUATION_CHARS =
 const FUNCTION_CONTENT_REGEX = /^function\s?\(\)\s?\{\r?\n?|\r?\n?\}$/g;
 const INDENT_MULTILINE_REGEX = /^\t/gm;
 const LINE_SEPARATOR_REGEX = /\r?\n/g;
-const IDENTIFIER_NAME_REPLACE_REGEX = /^([^a-zA-Z$_])/;
-const IDENTIFIER_ALPHA_NUMERIC_NAME_REPLACE_REGEX = /[^a-zA-Z0-9$]+/g;
+const IDENTIFIER_NAME_REPLACE_REGEX = /^([^a-z$_])/i;
+const IDENTIFIER_ALPHA_NUMERIC_NAME_REPLACE_REGEX = /[^a-z0-9$]+/gi;
 const COMMENT_END_REGEX = /\*\//g;
-const PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-zA-Z0-9_!§$()=\-^°]+/g;
+const PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-z0-9_!§$()=\-^°]+/gi;
 const MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g;
 
 /**
@@ -83,10 +83,14 @@ const MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g;
  * @typedef {(module: Module) => boolean} ModuleFilterPredicate
  */
 
+/**
+ * @typedef {object} Stringable
+ * @property {() => string} toString
+ */
+
 class Template {
 	/**
-	 * @template {EXPECTED_FUNCTION} T
-	 * @param {T} fn a runtime function (.runtime.js) "template"
+	 * @param {Stringable} fn a runtime function (.runtime.js) "template"
 	 * @returns {string} the updated and normalized function string
 	 */
 	static getFunctionContent(fn) {
@@ -359,6 +363,7 @@ class Template {
 		const source = new ConcatSource();
 		for (const module of runtimeModules) {
 			const codeGenerationResults = renderContext.codeGenerationResults;
+			/** @type {undefined | Source} */
 			let runtimeSource;
 			if (codeGenerationResults) {
 				runtimeSource = codeGenerationResults.getSource(

package/lib/TemplatedPathPlugin.js

@@ -18,7 +18,7 @@ const { parseResource } = require("./util/identifier");
 /** @typedef {import("./Compilation").PathData} PathData */
 /** @typedef {import("./Compiler")} Compiler */
 
-const REGEXP = /\[\\*([\w:]+)\\*\]/gi;
+const REGEXP = /\[\\*([\w:]+)\\*\]/g;
 
 /** @type {PathData["prepareId"]} */
 const prepareId = (id) => {
@@ -32,7 +32,7 @@ const prepareId = (id) => {
 		} + "").replace(/(^[.-]|[^a-zA-Z0-9_-])+/g, "_") + "`;
 	}
 
-	return id.replace(/(^[.-]|[^a-zA-Z0-9_-])+/g, "_");
+	return id.replace(/(^[.-]|[^a-z0-9_-])+/gi, "_");
 };
 
 /**
@@ -52,6 +52,7 @@ const prepareId = (id) => {
 const hashLength = (replacer, handler, assetInfo, hashName) => {
 	/** @type {Replacer} */
 	const fn = (match, arg, input) => {
+		/** @type {string} */
 		let result;
 		const length = arg && Number.parseInt(arg, 10);
 
@@ -107,6 +108,7 @@ const replacer = (value, allowEmpty) => {
 	return fn;
 };
 
+/** @type {Map<string, (...args: EXPECTED_ANY[]) => EXPECTED_ANY>} */
 const deprecationCache = new Map();
 const deprecatedFunction = (() => () => {})();
 /**

package/lib/UnhandledSchemeError.js

@@ -20,6 +20,7 @@ class UnhandledSchemeError extends WebpackError {
 				`\nYou may need an additional plugin to handle "${scheme}:" URIs.`
 		);
 		this.file = resource;
+		/** @type {string} */
 		this.name = "UnhandledSchemeError";
 	}
 }

package/lib/UnsupportedFeatureWarning.js

@@ -18,6 +18,7 @@ class UnsupportedFeatureWarning extends WebpackError {
 	constructor(message, loc) {
 		super(message);
 
+		/** @type {string} */
 		this.name = "UnsupportedFeatureWarning";
 		this.loc = loc;
 		this.hideStack = true;

package/lib/WarnDeprecatedOptionPlugin.js

@@ -48,6 +48,7 @@ class DeprecatedOptionWarning extends WebpackError {
 	constructor(option, value, suggestion) {
 		super();
 
+		/** @type {string} */
 		this.name = "DeprecatedOptionWarning";
 		this.message =
 			"configuration\n" +

package/lib/WatchIgnorePlugin.js

@@ -8,9 +8,9 @@
 const { groupBy } = require("./util/ArrayHelpers");
 const createSchemaValidation = require("./util/create-schema-validation");
 
+/** @typedef {import("watchpack").TimeInfoEntries} TimeInfoEntries */
 /** @typedef {import("../declarations/plugins/WatchIgnorePlugin").WatchIgnorePluginOptions} WatchIgnorePluginOptions */
 /** @typedef {import("./Compiler")} Compiler */
-/** @typedef {import("./util/fs").TimeInfoEntries} TimeInfoEntries */
 /** @typedef {import("./util/fs").WatchFileSystem} WatchFileSystem */
 /** @typedef {import("./util/fs").WatchMethod} WatchMethod */
 /** @typedef {import("./util/fs").Watcher} Watcher */

package/lib/Watching.js

@@ -15,6 +15,7 @@ const Stats = require("./Stats");
 /** @typedef {import("./logging/Logger").Logger} Logger */
 /** @typedef {import("./util/fs").TimeInfoEntries} TimeInfoEntries */
 /** @typedef {import("./util/fs").WatchFileSystem} WatchFileSystem */
+/** @typedef {import("./util/fs").Watcher} Watcher */
 
 /**
  * @template T
@@ -31,8 +32,10 @@ class Watching {
 	 * @param {Callback<Stats>} handler completion handler
 	 */
 	constructor(compiler, watchOptions, handler) {
+		/** @type {null | number} */
 		this.startTime = null;
 		this.invalid = false;
+		/** @type {Callback<Stats>} */
 		this.handler = handler;
 		/** @type {ErrorCallback[]} */
 		this.callbacks = [];
@@ -64,7 +67,9 @@ class Watching {
 		this._initial = true;
 		this._invalidReported = true;
 		this._needRecords = true;
+		/** @type {undefined | null | Watcher} */
 		this.watcher = undefined;
+		/** @type {undefined | null | Watcher} */
 		this.pausedWatcher = undefined;
 		/** @type {CollectedFiles | undefined} */
 		this._collectedChangedFiles = undefined;

package/lib/WebpackError.js

@@ -37,6 +37,9 @@ class WebpackError extends Error {
 		this.file = undefined;
 	}
 
+	/**
+	 * @returns {string} inspect message
+	 */
 	[inspect]() {
 		return (
 			this.stack +
@@ -74,4 +77,5 @@ class WebpackError extends Error {
 
 makeSerializable(WebpackError, "webpack/lib/WebpackError");
 
+/** @type {typeof WebpackError} */
 module.exports = WebpackError;

package/lib/WebpackOptionsApply.js

@@ -76,6 +76,7 @@ const { cleverMerge } = require("./util/cleverMerge");
 
 /** @typedef {import("../declarations/WebpackOptions").WebpackPluginFunction} WebpackPluginFunction */
 /** @typedef {import("./config/defaults").WebpackOptionsNormalizedWithDefaults} WebpackOptions */
+/** @typedef {import("./config/normalization").WebpackOptionsInterception} WebpackOptionsInterception */
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./util/fs").InputFileSystem} InputFileSystem */
 /** @typedef {import("./util/fs").IntermediateFileSystem} IntermediateFileSystem */
@@ -90,9 +91,10 @@ class WebpackOptionsApply extends OptionsApply {
 	/**
 	 * @param {WebpackOptions} options options object
 	 * @param {Compiler} compiler compiler object
+	 * @param {WebpackOptionsInterception=} interception intercepted options
 	 * @returns {WebpackOptions} options object
 	 */
-	process(options, compiler) {
+	process(options, compiler, interception) {
 		compiler.outputPath = options.output.path;
 		compiler.recordsInputPath = options.recordsInputPath || null;
 		compiler.recordsOutputPath = options.recordsOutputPath || null;
@@ -113,11 +115,7 @@ class WebpackOptionsApply extends OptionsApply {
 			// Some older versions of Node.js don't support all built-in modules via import, only via `require`,
 			// but it seems like there shouldn't be a warning here since these versions are rarely used in real applications
 			new NodeTargetPlugin(
-				options.output.module &&
-					compiler.platform.node === null &&
-					compiler.platform.web === null
-					? "module-import"
-					: "node-commonjs"
+				options.output.module ? "module-import" : "node-commonjs"
 			).apply(compiler);
 
 			// Handle external CSS `@import` and `url()`
@@ -129,8 +127,8 @@ class WebpackOptionsApply extends OptionsApply {
 					"module",
 					({ request, dependencyType, contextInfo }, callback) => {
 						if (
-							/\.css(\?|$)/.test(contextInfo.issuer) &&
-							/^(\/\/|https?:\/\/|#)/.test(request)
+							/\.css(?:\?|$)/.test(contextInfo.issuer) &&
+							/^(?:\/\/|https?:\/\/|#)/.test(request)
 						) {
 							if (dependencyType === "url") {
 								return callback(null, `asset ${request}`);
@@ -156,7 +154,7 @@ class WebpackOptionsApply extends OptionsApply {
 			const ExternalsPlugin = require("./ExternalsPlugin");
 
 			new ExternalsPlugin(type, ({ request, dependencyType }, callback) => {
-				if (/^(\/\/|https?:\/\/|#|std:|jsr:|npm:)/.test(request)) {
+				if (/^(?:\/\/|https?:\/\/|#|std:|jsr:|npm:)/.test(request)) {
 					if (dependencyType === "url") {
 						return callback(null, `asset ${request}`);
 					} else if (
@@ -166,7 +164,7 @@ class WebpackOptionsApply extends OptionsApply {
 						options.experiments.css
 					) {
 						return callback(null, `css-import ${request}`);
-					} else if (/^(\/\/|https?:\/\/|std:|jsr:|npm:)/.test(request)) {
+					} else if (/^(?:\/\/|https?:\/\/|std:|jsr:|npm:)/.test(request)) {
 						return callback(null, `${type} ${request}`);
 					}
 				}
@@ -315,37 +313,59 @@ class WebpackOptionsApply extends OptionsApply {
 			).apply(compiler);
 		}
 
-		if (options.devtool) {
-			if (options.devtool.includes("source-map")) {
-				const hidden = options.devtool.includes("hidden");
-				const inline = options.devtool.includes("inline");
-				const evalWrapped = options.devtool.includes("eval");
-				const cheap = options.devtool.includes("cheap");
-				const moduleMaps = options.devtool.includes("module");
-				const noSources = options.devtool.includes("nosources");
-				const debugIds = options.devtool.includes("debugids");
-				const Plugin = evalWrapped
-					? require("./EvalSourceMapDevToolPlugin")
-					: require("./SourceMapDevToolPlugin");
-				new Plugin({
-					filename: inline ? null : options.output.sourceMapFilename,
-					moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
-					fallbackModuleFilenameTemplate:
-						options.output.devtoolFallbackModuleFilenameTemplate,
-					append: hidden ? false : undefined,
-					module: moduleMaps ? true : !cheap,
-					columns: !cheap,
-					noSources,
-					namespace: options.output.devtoolNamespace,
-					debugIds
-				}).apply(compiler);
-			} else if (options.devtool.includes("eval")) {
-				const EvalDevToolModulePlugin = require("./EvalDevToolModulePlugin");
+		let devtool =
+			interception === undefined ? options.devtool : interception.devtool;
+		devtool = Array.isArray(devtool)
+			? devtool
+			: typeof devtool === "string"
+				? [{ type: "all", use: devtool }]
+				: [];
+
+		for (const item of devtool) {
+			const { type, use } = item;
+
+			if (use) {
+				if (use.includes("source-map")) {
+					const hidden = use.includes("hidden");
+					const inline = use.includes("inline");
+					const evalWrapped = use.includes("eval");
+					const cheap = use.includes("cheap");
+					const moduleMaps = use.includes("module");
+					const noSources = use.includes("nosources");
+					const debugIds = use.includes("debugids");
+					const Plugin = evalWrapped
+						? require("./EvalSourceMapDevToolPlugin")
+						: require("./SourceMapDevToolPlugin");
+					const assetExt =
+						type === "javascript"
+							? /\.((c|m)?js)($|\?)/i
+							: type === "css"
+								? /\.(css)($|\?)/i
+								: /\.((c|m)?js|css)($|\?)/i;
+
+					new Plugin({
+						test: evalWrapped ? undefined : assetExt,
+						filename: inline ? null : options.output.sourceMapFilename,
+						moduleFilenameTemplate:
+							options.output.devtoolModuleFilenameTemplate,
+						fallbackModuleFilenameTemplate:
+							options.output.devtoolFallbackModuleFilenameTemplate,
+						append: hidden ? false : undefined,
+						module: moduleMaps ? true : !cheap,
+						columns: !cheap,
+						noSources,
+						namespace: options.output.devtoolNamespace,
+						debugIds
+					}).apply(compiler);
+				} else if (use.includes("eval")) {
+					const EvalDevToolModulePlugin = require("./EvalDevToolModulePlugin");
 
-				new EvalDevToolModulePlugin({
-					moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
-					namespace: options.output.devtoolNamespace
-				}).apply(compiler);
+					new EvalDevToolModulePlugin({
+						moduleFilenameTemplate:
+							options.output.devtoolModuleFilenameTemplate,
+						namespace: options.output.devtoolNamespace
+					}).apply(compiler);
+				}
 			}
 		}
 

package/lib/asset/AssetBytesGenerator.js

@@ -60,6 +60,7 @@ class AssetSourceGenerator extends Generator {
 				runtimeRequirements.add(RuntimeGlobals.requireScope);
 				runtimeRequirements.add(RuntimeGlobals.toBinary);
 
+				/** @type {string} */
 				let sourceContent;
 				if (concatenationScope) {
 					concatenationScope.registerNamespaceExport(

package/lib/asset/AssetGenerator.js

@@ -62,12 +62,13 @@ const getMimeTypes = memoize(() => require("mime-types"));
  * @returns {T[] & U[]} array
  */
 const mergeMaybeArrays = (a, b) => {
+	/** @type {Set<T | U | null | undefined | string | Set<T> | Set<U>>} */
 	const set = new Set();
 	if (Array.isArray(a)) for (const item of a) set.add(item);
 	else set.add(a);
 	if (Array.isArray(b)) for (const item of b) set.add(item);
 	else set.add(b);
-	return [...set];
+	return /** @type {T[] & U[]} */ ([.../** @type {Set<T | U>} */ (set)]);
 };
 
 /**
@@ -333,6 +334,7 @@ class AssetGenerator extends Generator {
 			runtimeTemplate
 		);
 
+		/** @type {undefined | string} */
 		let assetPath;
 
 		if (generatorOptions.publicPath !== undefined && type === JAVASCRIPT_TYPE) {
@@ -457,6 +459,7 @@ class AssetGenerator extends Generator {
 	generateDataUri(module) {
 		const source = /** @type {Source} */ (module.originalSource());
 
+		/** @type {string} */
 		let encodedSource;
 
 		if (typeof this.dataUrlOptions === "function") {
@@ -480,6 +483,7 @@ class AssetGenerator extends Generator {
 			}
 			const mimeType = this.getMimeType(module);
 
+			/** @type {string} */
 			let encodedContent;
 
 			if (
@@ -490,7 +494,9 @@ class AssetGenerator extends Generator {
 					/** @type {string} */ (module.resourceResolveData.encodedContent)
 				).equals(source.buffer())
 			) {
-				encodedContent = module.resourceResolveData.encodedContent;
+				encodedContent =
+					/** @type {string} */
+					(module.resourceResolveData.encodedContent);
 			} else {
 				encodedContent = encodeDataUri(
 					/** @type {"base64" | false} */ (encoding),
@@ -520,10 +526,10 @@ class AssetGenerator extends Generator {
 			concatenationScope
 		} = generateContext;
 
+		/** @type {string} */
 		let content;
 
 		const needContent = type === JAVASCRIPT_TYPE || type === CSS_URL_TYPE;
-
 		const data = getData ? getData() : undefined;
 
 		if (

package/lib/asset/AssetModulesPlugin.js

@@ -12,17 +12,22 @@ const {
 	ASSET_MODULE_TYPE_RESOURCE,
 	ASSET_MODULE_TYPE_SOURCE
 } = require("../ModuleTypeConstants");
-const { compareModulesByIdOrIdentifier } = require("../util/comparators");
+const { compareModulesByFullName } = require("../util/comparators");
 const createSchemaValidation = require("../util/create-schema-validation");
 const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("schema-utils").Schema} Schema */
+/** @typedef {import("../../declarations/WebpackOptions").AssetGeneratorDataUrl} AssetGeneratorDataUrl */
+/** @typedef {import("../../declarations/WebpackOptions").AssetModuleOutputPath} AssetModuleOutputPath */
+/** @typedef {import("../../declarations/WebpackOptions").RawPublicPath} RawPublicPath */
+/** @typedef {import("../../declarations/WebpackOptions").FilenameTemplate} FilenameTemplate */
 /** @typedef {import("../Compilation").AssetInfo} AssetInfo */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../NormalModule")} NormalModule */
+/** @typedef {import("../NormalModule").NormalModuleCreateData} NormalModuleCreateData */
 
 /**
  * @param {string} name name of definitions
@@ -76,6 +81,7 @@ const getAssetSourceGenerator = memoize(() =>
 	require("./AssetSourceGenerator")
 );
 const getAssetBytesGenerator = memoize(() => require("./AssetBytesGenerator"));
+const getNormalModule = memoize(() => require("../NormalModule"));
 
 const type = ASSET_MODULE_TYPE;
 const PLUGIN_NAME = "AssetModulesPlugin";
@@ -90,6 +96,27 @@ class AssetModulesPlugin {
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
+				const NormalModule = getNormalModule();
+				for (const type of [
+					ASSET_MODULE_TYPE,
+					ASSET_MODULE_TYPE_BYTES,
+					ASSET_MODULE_TYPE_INLINE,
+					ASSET_MODULE_TYPE_RESOURCE,
+					ASSET_MODULE_TYPE_SOURCE
+				]) {
+					normalModuleFactory.hooks.createModuleClass
+						.for(type)
+						.tap(PLUGIN_NAME, (createData, _resolveData) => {
+							// TODO create the module via new AssetModule with its own properties
+							const module = new NormalModule(
+								/** @type {NormalModuleCreateData} */
+								(createData)
+							);
+							module.factoryMeta = { sideEffectFree: true };
+							return module;
+						});
+				}
+
 				normalModuleFactory.hooks.createParser
 					.for(ASSET_MODULE_TYPE)
 					.tap(PLUGIN_NAME, (parserOptions) => {
@@ -146,6 +173,7 @@ class AssetModulesPlugin {
 						.tap(PLUGIN_NAME, (generatorOptions) => {
 							validateGeneratorOptions[type](generatorOptions);
 
+							/** @type {undefined | AssetGeneratorDataUrl} */
 							let dataUrl;
 							if (type !== ASSET_MODULE_TYPE_RESOURCE) {
 								dataUrl = generatorOptions.dataUrl;
@@ -158,8 +186,11 @@ class AssetModulesPlugin {
 								}
 							}
 
+							/** @type {undefined | FilenameTemplate} */
 							let filename;
+							/** @type {undefined | RawPublicPath} */
 							let publicPath;
+							/** @type {undefined | AssetModuleOutputPath} */
 							let outputPath;
 							if (type !== ASSET_MODULE_TYPE_INLINE) {
 								filename = generatorOptions.filename;
@@ -202,7 +233,7 @@ class AssetModulesPlugin {
 					const modules = chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
 						ASSET_MODULE_TYPE,
-						compareModulesByIdOrIdentifier(chunkGraph)
+						compareModulesByFullName(compilation.compiler)
 					);
 					if (modules) {
 						for (const module of modules) {

package/lib/asset/AssetSourceGenerator.js

@@ -59,6 +59,7 @@ class AssetSourceGenerator extends Generator {
 				const encodedSource =
 					typeof content === "string" ? content : content.toString("utf8");
 
+				/** @type {string} */
 				let sourceContent;
 				if (concatenationScope) {
 					concatenationScope.registerNamespaceExport(