webpack 5.107.2 → 5.108.0

package/lib/RuntimeTemplate.js

@@ -12,6 +12,7 @@ const {
 	getOutgoingAsyncModules
 } = require("./async-modules/AsyncModuleHelpers");
 const { ImportPhaseUtils } = require("./dependencies/ImportPhase");
+const { InlinedUsedName } = require("./optimize/InlineExports");
 const {
 	getMakeDeferredNamespaceModeFromExportsType,
 	getOptimizedDeferredModule
@@ -19,7 +20,7 @@ const {
 const { equals } = require("./util/ArrayHelpers");
 const compileBooleanMatcher = require("./util/compileBooleanMatcher");
 const memoize = require("./util/memoize");
-const { propertyAccess } = require("./util/property");
+const { propertyAccess, propertyName } = require("./util/property");
 const { forEachRuntime, subtractRuntime } = require("./util/runtime");
 
 const getHarmonyImportDependency = memoize(() =>
@@ -64,9 +65,9 @@ It's in these chunks: ${
 Module has these incoming connections: ${Array.from(
 	chunkGraph.moduleGraph.getIncomingConnections(module),
 	(connection) =>
-		`\n - ${
-			connection.originModule && connection.originModule.identifier()
-		} ${connection.dependency && connection.dependency.type} ${
+		`\n - ${connection.originModule && connection.originModule.identifier()} ${
+			connection.dependency && connection.dependency.type
+		} ${
 			(connection.explanations && [...connection.explanations].join(", ")) || ""
 		}`
 ).join("")}`;
@@ -102,12 +103,16 @@ class RuntimeTemplate {
 	 * @param {RequestShortener} requestShortener the request shortener
 	 */
 	constructor(compilation, outputOptions, requestShortener) {
+		/** @type {Compilation} */
 		this.compilation = compilation;
 		this.outputOptions = /** @type {OutputOptions} */ (outputOptions || {});
+		/** @type {RequestShortener} */
 		this.requestShortener = requestShortener;
+		/** @type {string} */
 		this.globalObject =
 			/** @type {string} */
 			(getGlobalObject(outputOptions.globalObject));
+		/** @type {string} */
 		this.contentHashReplacement = "X".repeat(outputOptions.hashDigestLength);
 	}
 
@@ -126,14 +131,59 @@ class RuntimeTemplate {
 		);
 	}
 
+	/**
+	 * Whether the bundle targets node and web at once (universal `["node", "web"]` + `output.module`), like `isUniversalTarget` in `WebpackOptionsApply`.
+	 * @returns {boolean} true for a universal target
+	 */
+	isUniversalTarget() {
+		const { platform } = this.compilation.compiler;
+		return (
+			Boolean(this.outputOptions.module) &&
+			platform.node === null &&
+			platform.web === null
+		);
+	}
+
+	/**
+	 * Runtime expression that is truthy in browser-like environments (a DOM
+	 * `document` or a worker `self`) and falsy in Node.js. Single source of
+	 * truth for branching a universal ("node-or-web") target at runtime.
+	 * @returns {string} runtime condition expression
+	 */
+	isWebLikePlatformExpression() {
+		return "typeof document !== 'undefined' || typeof self !== 'undefined'";
+	}
+
+	/**
+	 * Expression for the global registry that collects CSS server-side when there
+	 * is no DOM (SSR). An SSR host reads it from `globalThis`; it is keyed by the
+	 * style/chunk identifier and namespaced by `output.uniqueName`.
+	 * @returns {string} runtime expression evaluating to the registry object
+	 */
+	cssServerStyleRegistry() {
+		const name = this.outputOptions.uniqueName;
+		const key = JSON.stringify(
+			name ? `__webpack_css__${name}` : "__webpack_css__"
+		);
+		return `(${this.assignOr(`globalThis[${key}]`, "{}")})`;
+	}
+
 	supportsConst() {
 		return this.outputOptions.environment.const;
 	}
 
+	supportsLet() {
+		return this.outputOptions.environment.let;
+	}
+
 	supportsMethodShorthand() {
 		return this.outputOptions.environment.methodShorthand;
 	}
 
+	supportsLogicalAssignment() {
+		return this.outputOptions.environment.logicalAssignment;
+	}
+
 	supportsArrowFunction() {
 		return this.outputOptions.environment.arrowFunction;
 	}
@@ -146,6 +196,18 @@ class RuntimeTemplate {
 		return this.outputOptions.environment.optionalChaining;
 	}
 
+	supportsSpread() {
+		return this.outputOptions.environment.spread;
+	}
+
+	supportsObjectHasOwn() {
+		return this.outputOptions.environment.hasOwn;
+	}
+
+	supportsSymbol() {
+		return this.outputOptions.environment.symbol;
+	}
+
 	supportsForOf() {
 		return this.outputOptions.environment.forOf;
 	}
@@ -186,11 +248,19 @@ class RuntimeTemplate {
 	}
 
 	/**
-	 * Renders return const when it is supported, otherwise var.
-	 * @returns {"const" | "var"} return `const` when it is supported, otherwise `var`
+	 * Renders return const when it is supported, otherwise let when supported, otherwise var.
+	 * @returns {"const" | "let" | "var"} return `const` when it is supported, otherwise `let` when supported, otherwise `var`
 	 */
 	renderConst() {
-		return this.supportsConst() ? "const" : "var";
+		return this.supportsConst() ? "const" : this.supportsLet() ? "let" : "var";
+	}
+
+	/**
+	 * Renders return let when it is supported, otherwise var.
+	 * @returns {"let" | "var"} return `let` when it is supported, otherwise `var`
+	 */
+	renderLet() {
+		return this.supportsLet() ? "let" : "var";
 	}
 
 	/**
@@ -305,6 +375,80 @@ class RuntimeTemplate {
 		return this.supportsArrowFunction() ? "x => {}" : "function() {}";
 	}
 
+	/**
+	 * Guards an access/call on `object` with optional chaining when supported,
+	 * otherwise an equivalent `&&` short-circuit. `object` is evaluated twice in
+	 * the fallback, so it must be side-effect free.
+	 * @param {string} object base expression (side-effect free)
+	 * @param {string} access continuation after the optional point, e.g. `()`, `prop`, `method(arg)` or `[key]`
+	 * @returns {string} guarded access expression
+	 */
+	optionalChaining(object, access) {
+		if (this.supportsOptionalChaining()) {
+			return `${object}?.${access}`;
+		}
+		const sep = access[0] === "(" || access[0] === "[" ? "" : ".";
+		return `${object} && ${object}${sep}${access}`;
+	}
+
+	/**
+	 * Reads a node builtin via `process.getBuiltinModule()`, guarded to stay falsy off node so universal `["node", "web"]` bundles don't crash (also falsy on node <22.3).
+	 * @param {string} request builtin module request as a JS string expression, e.g. from `renderNodePrefixForCoreModule`
+	 * @param {string=} access member/call chain appended to the module, e.g. `.Worker` or `.createRequire(url)`
+	 * @returns {string} guarded expression
+	 */
+	getBuiltinModule(request, access = "") {
+		const getter = `process.getBuiltinModule(${request})${access}`;
+		if (this.outputOptions.environment.nodeBuiltinModuleGetter) {
+			return `typeof process !== "undefined" && ${getter}`;
+		}
+		return `typeof process !== "undefined" && typeof process.getBuiltinModule === "function" && ${getter}`;
+	}
+
+	/**
+	 * Renders an object-literal method, using method shorthand when supported
+	 * and falling back to a `prop: function/arrow` property otherwise.
+	 * @param {string} prop property name (or computed key like `[x]`)
+	 * @param {string} args arguments
+	 * @param {string | string[]} body body
+	 * @returns {string} method code
+	 */
+	method(prop, args, body) {
+		return this.supportsMethodShorthand()
+			? `${prop}(${args}) {\n${Template.indent(body)}\n}`
+			: `${prop}: ${this.basicFunction(args, body)}`;
+	}
+
+	/**
+	 * Returns an own-property check, using `Object.hasOwn` when supported and
+	 * falling back to `Object.prototype.hasOwnProperty.call` otherwise.
+	 * @param {string} object object expression
+	 * @param {string} property property expression
+	 * @returns {string} own-property check expression
+	 */
+	objectHasOwn(object, property) {
+		return this.supportsObjectHasOwn()
+			? `Object.hasOwn(${object}, ${property})`
+			: `Object.prototype.hasOwnProperty.call(${object}, ${property})`;
+	}
+
+	/**
+	 * Returns a self-defaulting assignment, using the `||=` logical assignment
+	 * operator when supported and falling back to `target = target || value`
+	 * otherwise. `target` is evaluated twice in the fallback, so it must be
+	 * side-effect free. The expression evaluates to the resulting value.
+	 * Models `||` only, so `target` must never hold a legitimate falsy value
+	 * (`0`, `""`, `false`) — it would be overwritten; use it for object/array defaults.
+	 * @param {string} target assignment target (side-effect free)
+	 * @param {string} value default value expression
+	 * @returns {string} assignment expression
+	 */
+	assignOr(target, value) {
+		return this.supportsLogicalAssignment()
+			? `${target} ||= ${value}`
+			: `${target} = ${target} || ${value}`;
+	}
+
 	/**
 	 * Returns destructure array code.
 	 * @param {string[]} items items
@@ -312,10 +456,11 @@ class RuntimeTemplate {
 	 * @returns {string} destructure array code
 	 */
 	destructureArray(items, value) {
+		const decl = this.renderLet();
 		return this.supportsDestructuring()
-			? `var [${items.join(", ")}] = ${value};`
+			? `${decl} [${items.join(", ")}] = ${value};`
 			: Template.asString(
-					items.map((item, i) => `var ${item} = ${value}[${i}];`)
+					items.map((item, i) => `${decl} ${item} = ${value}[${i}];`)
 				);
 	}
 
@@ -326,11 +471,12 @@ class RuntimeTemplate {
 	 * @returns {string} destructure object code
 	 */
 	destructureObject(items, value) {
+		const decl = this.renderLet();
 		return this.supportsDestructuring()
-			? `var {${items.join(", ")}} = ${value};`
+			? `${decl} {${items.join(", ")}} = ${value};`
 			: Template.asString(
 					items.map(
-						(item) => `var ${item} = ${value}${propertyAccess([item])};`
+						(item) => `${decl} ${item} = ${value}${propertyAccess([item])};`
 					)
 				);
 	}
@@ -399,7 +545,7 @@ class RuntimeTemplate {
 	 */
 	throwMissingModuleErrorBlock({ request }) {
 		const err = `Cannot find module '${request}'`;
-		return `var e = new Error(${JSON.stringify(
+		return `${this.renderConst()} e = new Error(${JSON.stringify(
 			err
 		)}); e.code = 'MODULE_NOT_FOUND'; throw e;`;
 	}
@@ -469,9 +615,7 @@ class RuntimeTemplate {
 							`Module '${moduleId}' is not available (weak dependency)`
 						);
 		const comment = request ? `${Template.toNormalComment(request)} ` : "";
-		const errorStatements = `var e = new Error(${errorMessage}); ${
-			comment
-		}e.code = 'MODULE_NOT_FOUND'; throw e;`;
+		const errorStatements = `${this.renderConst()} e = new Error(${errorMessage}); ${comment}e.code = 'MODULE_NOT_FOUND'; throw e;`;
 		switch (type) {
 			case "statements":
 				return errorStatements;
@@ -715,7 +859,7 @@ class RuntimeTemplate {
 		if (weak) {
 			if (idExpr.length > 8) {
 				// 'var x="nnnnnn";x,"+x+",x' vs '"nnnnnn",nnnnnn,"nnnnnn"'
-				header += `var id = ${idExpr}; `;
+				header += `${this.renderConst()} id = ${idExpr}; `;
 				idExpr = "id";
 			}
 			runtimeRequirements.add(RuntimeGlobals.moduleFactories);
@@ -751,11 +895,17 @@ class RuntimeTemplate {
 				if (header) {
 					appending = `.then(${this.basicFunction(
 						"",
-						`${header}return ${RuntimeGlobals.deferredModuleAsyncTransitiveDependencies}(${JSON.stringify(asyncDeps)});`
+						`${header}return ${
+							RuntimeGlobals.deferredModuleAsyncTransitiveDependencies
+						}(${JSON.stringify(asyncDeps)});`
 					)})`;
 				} else {
 					runtimeRequirements.add(RuntimeGlobals.require);
-					appending = `.then(${this.returningFunction(`${RuntimeGlobals.deferredModuleAsyncTransitiveDependencies}(${JSON.stringify(asyncDeps)})`)})`;
+					appending = `.then(${this.returningFunction(
+						`${
+							RuntimeGlobals.deferredModuleAsyncTransitiveDependencies
+						}(${JSON.stringify(asyncDeps)})`
+					)})`;
 				}
 				appending += `.then(${RuntimeGlobals.makeDeferredNamespaceObject}.bind(${RuntimeGlobals.require}, ${comment}${idExpr}, ${mode}))`;
 			} else if (header) {
@@ -943,6 +1093,10 @@ class RuntimeTemplate {
 			request,
 			weak
 		});
+		// Harmony imports may be wrapped in runtime-condition `if` blocks
+		// but referenced outside those blocks (e.g. by harmony reexport),
+		// so they must remain function-scoped (`var`) rather than
+		// block-scoped (`let`/`const`).
 		const optDeclaration = update ? "" : "var ";
 
 		const exportsType = module.getExportsType(
@@ -1005,6 +1159,7 @@ class RuntimeTemplate {
 	 * @param {RuntimeSpec} options.runtime runtime for which this code will be generated
 	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
 	 * @param {ModuleDependency} options.dependency module dependency
+	 * @param {boolean=} options.mangleableNamespace true, when a whole-namespace value may use a decoupled namespace object that keeps the original export names
 	 * @returns {string} expression
 	 */
 	exportFromImport({
@@ -1022,7 +1177,8 @@ class RuntimeTemplate {
 		initFragments,
 		runtime,
 		runtimeRequirements,
-		dependency
+		dependency,
+		mangleableNamespace = false
 	}) {
 		if (!module) {
 			return this.missingModule({
@@ -1057,6 +1213,11 @@ class RuntimeTemplate {
 						);
 						return `${comment} undefined`;
 					}
+					if (used instanceof InlinedUsedName) {
+						throw new Error(
+							"Can't inline the exports of defer imported module"
+						);
+					}
 					const access = `${importVar}.a${propertyAccess(used)}`;
 					if (isCall || asiSafe === undefined) {
 						return access;
@@ -1115,7 +1276,7 @@ class RuntimeTemplate {
 				runtimeRequirements.add(RuntimeGlobals.createFakeNamespaceObject);
 				initFragments.push(
 					new InitFragment(
-						`var ${importVar}_namespace_cache;\n`,
+						`${this.renderLet()} ${importVar}_namespace_cache;\n`,
 						InitFragment.STAGE_CONSTANTS,
 						-1,
 						`${importVar}_namespace_cache`
@@ -1140,6 +1301,13 @@ class RuntimeTemplate {
 				);
 				return `${comment} undefined`;
 			}
+			if (used instanceof InlinedUsedName) {
+				return used.render(
+					Template.toNormalComment(
+						`inlined export ${propertyAccess(exportName)}`
+					)
+				);
+			}
 			const comment = equals(used, exportName)
 				? ""
 				: `${Template.toNormalComment(propertyAccess(exportName))} `;
@@ -1158,7 +1326,7 @@ class RuntimeTemplate {
 		if (isModuleDeferred) {
 			initFragments.push(
 				new InitFragment(
-					`var ${importVar}_deferred_namespace_cache;\n`,
+					`${this.renderLet()} ${importVar}_deferred_namespace_cache;\n`,
 					InitFragment.STAGE_CONSTANTS,
 					-1,
 					`${importVar}_deferred_namespace_cache`
@@ -1176,12 +1344,101 @@ class RuntimeTemplate {
 				asiSafe ? "" : asiSafe === false ? ";" : "Object"
 			}(${importVar}_deferred_namespace_cache || (${importVar}_deferred_namespace_cache = ${init}))`;
 		}
+		// The whole namespace object is used as a value. If the module's exports
+		// were mangled, importVar's keys are the mangled names, so we materialize
+		// a decoupled namespace object that exposes the original names.
+		if (
+			exportsType === "namespace" &&
+			mangleableNamespace &&
+			this.compilation &&
+			this.compilation.options.optimization.mangleExports
+		) {
+			const materialized = this._materializedNamespaceObject({
+				moduleGraph,
+				module,
+				importVar,
+				initFragments,
+				runtime,
+				runtimeRequirements
+			});
+			if (materialized !== undefined) return materialized;
+		}
 		// if we hit here, the importVar is either
 		// - already a ES module namespace object
 		// - or imported by a way that does not need interop.
 		return importVar;
 	}
 
+	/**
+	 * Materializes a namespace object that keeps the original export names while
+	 * the module's own exports are mangled. Returns undefined when no export was
+	 * mangled (then the raw namespace object can be used as-is).
+	 * @template GenerateContext
+	 * @param {object} options options
+	 * @param {ModuleGraph} options.moduleGraph the module graph
+	 * @param {Module} options.module the imported module
+	 * @param {string} options.importVar the import variable referencing the module
+	 * @param {InitFragment<GenerateContext>[]} options.initFragments target array for init fragments
+	 * @param {RuntimeSpec} options.runtime the runtime
+	 * @param {RuntimeRequirements} options.runtimeRequirements runtime requirements
+	 * @returns {string | undefined} expression of the materialized namespace object, or undefined
+	 */
+	_materializedNamespaceObject({
+		moduleGraph,
+		module,
+		importVar,
+		initFragments,
+		runtime,
+		runtimeRequirements
+	}) {
+		const exportsInfo = moduleGraph.getExportsInfo(module);
+		/** @type {string[]} */
+		const definitions = [];
+		let mangled = false;
+		for (const exportInfo of exportsInfo.orderedExports) {
+			if (exportInfo.provided === false) continue;
+			const used = exportsInfo.getUsedName([exportInfo.name], runtime);
+			if (!used) continue;
+			if (used instanceof InlinedUsedName) {
+				// An inlined export isn't reachable by name on the raw exports object,
+				// so the decoupled object must expose the inlined value directly.
+				mangled = true;
+				definitions.push(
+					`${propertyName(exportInfo.name)}: ${this.returningFunction(
+						used.render(
+							Template.toNormalComment(
+								`inlined export ${propertyAccess([exportInfo.name])}`
+							)
+						)
+					)}`
+				);
+				continue;
+			}
+			if (used[used.length - 1] !== exportInfo.name) mangled = true;
+			definitions.push(
+				`${propertyName(exportInfo.name)}: ${this.returningFunction(
+					`${importVar}${propertyAccess(used)}`
+				)}`
+			);
+		}
+		if (!mangled) return;
+		const name = `${importVar}_namespace_object`;
+		runtimeRequirements.add(RuntimeGlobals.exports);
+		runtimeRequirements.add(RuntimeGlobals.makeNamespaceObject);
+		runtimeRequirements.add(RuntimeGlobals.definePropertyGetters);
+		initFragments.push(
+			new InitFragment(
+				`var ${name} = {};\n${RuntimeGlobals.makeNamespaceObject}(${name});\n${
+					RuntimeGlobals.definePropertyGetters
+				}(${name}, {\n\t${definitions.join(",\n\t")}\n});\n`,
+				InitFragment.STAGE_PROVIDES,
+				0,
+				name
+			)
+		);
+		return name;
+	}
+
 	/**
 	 * Returns expression.
 	 * @param {object} options options

package/lib/SelfModuleFactory.js

@@ -15,6 +15,7 @@ class SelfModuleFactory {
 	 * @param {ModuleGraph} moduleGraph module graph
 	 */
 	constructor(moduleGraph) {
+		/** @type {ModuleGraph} */
 		this.moduleGraph = moduleGraph;
 	}
 

package/lib/SourceMapDevToolPlugin.js

@@ -11,6 +11,7 @@ const Compilation = require("./Compilation");
 const ModuleFilenameHelpers = require("./ModuleFilenameHelpers");
 const ProgressPlugin = require("./ProgressPlugin");
 const SourceMapDevToolModuleOptionsPlugin = require("./SourceMapDevToolModuleOptionsPlugin");
+const { getPresentKinds } = require("./TemplatedPathPlugin");
 const createHash = require("./util/createHash");
 const { dirname, relative } = require("./util/fs");
 const generateDebugId = require("./util/generateDebugId");
@@ -46,7 +47,6 @@ const { makePathsAbsolute } = require("./util/identifier");
  */
 
 const METACHARACTERS_REGEXP = /[-[\]\\/{}()*+?.^$|]/g;
-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 MAP_URL_COMMENT_REGEXP = /\[map\]/g;
@@ -681,10 +681,8 @@ class SourceMapDevToolPlugin {
 									}
 
 									const usesContentHash =
-										sourceMapFilename &&
-										CONTENT_HASH_DETECT_REGEXP.test(sourceMapFilename);
-
-									resetRegexpState(CONTENT_HASH_DETECT_REGEXP);
+										typeof sourceMapFilename === "string" &&
+										getPresentKinds(sourceMapFilename).has("contenthash");
 
 									let outputFile = file;
 									// If SourceMap and asset uses contenthash, avoid a circular dependency by hiding hash in `file`

package/lib/Stats.js

@@ -16,6 +16,7 @@ class Stats {
 	 * @param {Compilation} compilation webpack compilation
 	 */
 	constructor(compilation) {
+		/** @type {Compilation} */
 		this.compilation = compilation;
 	}
 

package/lib/Template.js

@@ -34,6 +34,10 @@ const NUMBER_OF_IDENTIFIER_START_CHARS = DELTA_A_TO_Z * 2 + 2; // a-z A-Z _ $
 const NUMBER_OF_IDENTIFIER_CONTINUATION_CHARS =
 	NUMBER_OF_IDENTIFIER_START_CHARS + 10; // a-z A-Z _ $ 0-9
 const FUNCTION_CONTENT_REGEX = /^function\s?\(\)\s?\{\r?\n?|\r?\n?\}$/g;
+// JSDoc type annotations exist only to type the runtime template; strip them so
+// they are never emitted into the bundle. Whole-line blocks drop the line too.
+const JSDOC_LINE_REGEX = /^[ \t]*\/\*\*(?:[^*]|\*(?!\/))*\*\/[ \t]*\r?\n/gm;
+const JSDOC_INLINE_REGEX = /\/\*\*(?:[^*]|\*(?!\/))*\*\/[ \t]*/g;
 const INDENT_MULTILINE_REGEX = /^\t/gm;
 const LINE_SEPARATOR_REGEX = /\r?\n/g;
 const IDENTIFIER_NAME_REPLACE_REGEX = /^([^a-z$_])/i;
@@ -102,6 +106,8 @@ class Template {
 	static getFunctionContent(fn) {
 		return fn
 			.toString()
+			.replace(JSDOC_LINE_REGEX, "")
+			.replace(JSDOC_INLINE_REGEX, "")
 			.replace(FUNCTION_CONTENT_REGEX, "")
 			.replace(INDENT_MULTILINE_REGEX, "")
 			.replace(LINE_SEPARATOR_REGEX, "\n");
@@ -126,7 +132,7 @@ class Template {
 	 */
 	static toComment(str) {
 		if (!str) return "";
-		return `/*! ${str.replace(COMMENT_END_REGEX, "* /")} */`;
+		return `/*! ${str.includes("*/") ? str.replace(COMMENT_END_REGEX, "* /") : str} */`;
 	}
 
 	/**
@@ -136,7 +142,7 @@ class Template {
 	 */
 	static toNormalComment(str) {
 		if (!str) return "";
-		return `/* ${str.replace(COMMENT_END_REGEX, "* /")} */`;
+		return `/* ${str.includes("*/") ? str.replace(COMMENT_END_REGEX, "* /") : str} */`;
 	}
 
 	/**