webpack 5.108.4 → 5.109.1

package/lib/RuntimeTemplate.js

@@ -6,6 +6,16 @@
 "use strict";
 
 const InitFragment = require("./InitFragment");
+const {
+	JAVASCRIPT_TYPE,
+	RUNTIME_TYPE
+} = require("./ModuleSourceTypeConstants");
+const {
+	WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE,
+	WEBPACK_MODULE_TYPE_FALLBACK,
+	WEBPACK_MODULE_TYPE_PROVIDE,
+	WEBPACK_MODULE_TYPE_REMOTE
+} = require("./ModuleTypeConstants");
 const RuntimeGlobals = require("./RuntimeGlobals");
 const Template = require("./Template");
 const {
@@ -14,11 +24,14 @@ const {
 const { ImportPhaseUtils } = require("./dependencies/ImportPhase");
 const { InlinedUsedName } = require("./optimize/InlineExports");
 const {
+	getDeferredCycleModuleIds,
+	getDeferredCycleModules,
 	getMakeDeferredNamespaceModeFromExportsType,
 	getOptimizedDeferredModule
 } = require("./runtime/MakeDeferredNamespaceObjectRuntime");
 const { equals } = require("./util/ArrayHelpers");
 const compileBooleanMatcher = require("./util/compileBooleanMatcher");
+const { getUndoPath, toJsStringLiteral } = require("./util/identifier");
 const memoize = require("./util/memoize");
 const { propertyAccess, propertyName } = require("./util/property");
 const { forEachRuntime, subtractRuntime } = require("./util/runtime");
@@ -29,6 +42,28 @@ const getHarmonyImportDependency = memoize(() =>
 const getImportDependency = memoize(() =>
 	require("./dependencies/ImportDependency")
 );
+const getJavascriptModulesPlugin = memoize(() =>
+	require("./javascript/JavascriptModulesPlugin")
+);
+const getModuleHotAcceptDependency = memoize(() =>
+	require("./dependencies/ModuleHotAcceptDependency")
+);
+const getAPIPlugin = memoize(() => require("./APIPlugin"));
+
+// Module-federation module types whose chunks load through the federation runtime.
+/** @type {Set<string>} */
+const FEDERATION_MODULE_TYPES = new Set([
+	WEBPACK_MODULE_TYPE_REMOTE,
+	WEBPACK_MODULE_TYPE_PROVIDE,
+	WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE,
+	WEBPACK_MODULE_TYPE_FALLBACK
+]);
+
+// Any `[hash]`/`[fullhash]`/`[chunkhash]`/`[contenthash]` token, incl. a `:<length>`
+// or `:<digest>[:<length>]` suffix (e.g. `[contenthash:base64:8]`). Its value is only
+// resolved after code generation, so a filename using one can't be an inline literal.
+const HASH_IN_FILENAME = /\[(?:full|chunk|content)?hash(?::[^\]]+)?\]/;
+const HASH_IN_FILENAME_GLOBAL = /\[(?:full|chunk|content)?hash(?::[^\]]+)?\]/g;
 
 /** @typedef {import("./config/defaults").OutputNormalizedWithDefaults} OutputOptions */
 /** @typedef {import("./AsyncDependenciesBlock")} AsyncDependenciesBlock */
@@ -192,6 +227,10 @@ class RuntimeTemplate {
 		return this.outputOptions.environment.asyncFunction;
 	}
 
+	supportsGenerator() {
+		return this.outputOptions.environment.generator;
+	}
+
 	supportsOptionalChaining() {
 		return this.outputOptions.environment.optionalChaining;
 	}
@@ -228,6 +267,24 @@ class RuntimeTemplate {
 		return this.outputOptions.environment.module;
 	}
 
+	supportsModulePreload() {
+		return this.outputOptions.environment.modulePreload;
+	}
+
+	supportsAnalyzableEsm() {
+		// `eval` devtool wraps each module in `eval(...)`, where `import.meta` is a
+		// syntax error, so the literal `new URL(…, import.meta.url)` form can't be used.
+		const { devtool } = this.compilation.options;
+		return (
+			this.isModule() &&
+			this.supportsEcmaScriptModuleSyntax() &&
+			!(typeof devtool === "string" && devtool.includes("eval")) &&
+			// A runtime `__webpack_public_path__` override can't be reflected in a
+			// baked literal, so keep the runtime form that reads `__webpack_require__.p`.
+			!getAPIPlugin().usesRuntimePublicPathOverride(this.compilation)
+		);
+	}
+
 	supportTemplateLiteral() {
 		return this.outputOptions.environment.templateLiteral;
 	}
@@ -805,6 +862,7 @@ class RuntimeTemplate {
 	 * @param {boolean=} options.weak if the dependency is weak (will create a nice error message)
 	 * @param {Dependency} options.dependency dependency
 	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {Module=} options.originModule the module the `import()` is emitted into
 	 * @returns {string} the promise expression
 	 */
 	moduleNamespacePromise({
@@ -816,7 +874,8 @@ class RuntimeTemplate {
 		strict,
 		weak,
 		dependency,
-		runtimeRequirements
+		runtimeRequirements,
+		originModule
 	}) {
 		if (!module) {
 			return this.missingModulePromise({
@@ -846,7 +905,8 @@ class RuntimeTemplate {
 			chunkGraph,
 			block,
 			message,
-			runtimeRequirements
+			runtimeRequirements,
+			originModule
 		});
 
 		/** @type {string} */
@@ -1123,6 +1183,10 @@ class RuntimeTemplate {
 				moduleId,
 				exportsType,
 				Array.from(outgoingAsyncModules, (mod) => chunkGraph.getModuleId(mod)),
+				getDeferredCycleModuleIds(
+					getDeferredCycleModules(moduleGraph, module),
+					(mod) => chunkGraph.getModuleId(mod)
+				),
 				runtimeRequirements
 			)};\n`;
 
@@ -1218,7 +1282,9 @@ class RuntimeTemplate {
 							"Can't inline the exports of defer imported module"
 						);
 					}
-					const access = `${importVar}.a${propertyAccess(Array.isArray(used) ? used : [used])}`;
+					const access = `${importVar}.a${propertyAccess(
+						Array.isArray(used) ? used : [used]
+					)}`;
 					if (isCall || asiSafe === undefined) {
 						return access;
 					}
@@ -1446,9 +1512,16 @@ class RuntimeTemplate {
 	 * @param {string} options.message the message
 	 * @param {ChunkGraph} options.chunkGraph the chunk graph
 	 * @param {RuntimeRequirements} options.runtimeRequirements if set, will be filled with runtime requirements
+	 * @param {Module=} options.originModule the module the `import()` is emitted into
 	 * @returns {string} expression
 	 */
-	blockPromise({ block, message, chunkGraph, runtimeRequirements }) {
+	blockPromise({
+		block,
+		message,
+		chunkGraph,
+		runtimeRequirements,
+		originModule
+	}) {
 		if (!block) {
 			const comment = this.comment({
 				message
@@ -1469,12 +1542,25 @@ class RuntimeTemplate {
 			message,
 			chunkName: block.chunkName
 		});
+		// A `fetchPriority` hint rides on the runtime `ensureChunk(id, priority)` call;
+		// the analyzable literal `import()` can't carry it, so keep the runtime form.
+		const fetchPriority = chunkGroup.options.fetchPriority;
 		if (chunks.length === 1) {
+			const analyzable = fetchPriority
+				? null
+				: this._analyzableChunkImport(
+						chunks[0],
+						comment,
+						runtimeRequirements,
+						originModule,
+						chunkGraph
+					);
+			if (analyzable !== null) {
+				return analyzable;
+			}
 			const chunkId = JSON.stringify(chunks[0].id);
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
 
-			const fetchPriority = chunkGroup.options.fetchPriority;
-
 			if (fetchPriority) {
 				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
 			}
@@ -1483,30 +1569,232 @@ class RuntimeTemplate {
 				fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
 			})`;
 		} else if (chunks.length > 0) {
-			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
-
-			const fetchPriority = chunkGroup.options.fetchPriority;
-
 			if (fetchPriority) {
 				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
 			}
 
+			let needEnsureChunk = false;
 			/**
-			 * Returns require chunk id code.
+			 * Analyzable `import()` for a solely-owned JS chunk, else runtime ensureChunk.
 			 * @param {Chunk} chunk chunk
 			 * @returns {string} require chunk id code
 			 */
-			const requireChunkId = (chunk) =>
-				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)}${
+			const requireChunkId = (chunk) => {
+				const analyzable = fetchPriority
+					? null
+					: this._analyzableChunkImport(
+							chunk,
+							"",
+							runtimeRequirements,
+							originModule,
+							chunkGraph
+						);
+				if (analyzable !== null) return analyzable;
+				needEnsureChunk = true;
+				return `${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)}${
 					fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
 				})`;
-			return `Promise.all(${comment.trim()}[${chunks
-				.map(requireChunkId)
-				.join(", ")}])`;
+			};
+			const items = chunks.map(requireChunkId);
+			if (needEnsureChunk) {
+				runtimeRequirements.add(RuntimeGlobals.ensureChunk);
+			}
+			return `Promise.all(${comment.trim()}[${items.join(", ")}])`;
 		}
 		return `Promise.resolve(${comment.trim()})`;
 	}
 
+	/**
+	 * For ESM module output, load a single statically-named chunk through the
+	 * `analyzableChunkImport` helper — a literal `import("./chunk.js")` other bundlers
+	 * and webpack itself can follow, wrapped to keep `ensureChunk` timing and deduplication.
+	 * Returns `null` to fall back to the runtime `ensureChunk` form.
+	 * @param {Chunk} chunk the chunk to load
+	 * @param {string} comment leading comment (chunk name / message)
+	 * @param {RuntimeRequirements} runtimeRequirements runtime requirements
+	 * @param {Module=} originModule the module the `import()` is emitted into
+	 * @param {ChunkGraph=} chunkGraph the chunk graph
+	 * @returns {string | null} the import expression, or `null`
+	 */
+	_analyzableChunkImport(
+		chunk,
+		comment,
+		runtimeRequirements,
+		originModule,
+		chunkGraph
+	) {
+		const { outputOptions } = this;
+		if (
+			!outputOptions.module ||
+			outputOptions.chunkFormat !== "module" ||
+			outputOptions.importFunctionName !== "import" ||
+			chunk.id === null ||
+			!originModule ||
+			!chunkGraph
+		) {
+			return null;
+		}
+		// HMR wraps `ensureChunk` (`.e`) to track in-flight loads and relies on it being
+		// present in the runtime; the analyzable `import()` (`.ei`) replaces `.e` and would
+		// leave a lazy-compilation proxy's own `.e` call undefined, so keep the runtime form.
+		// A runtime `__webpack_public_path__` override likewise can't reach a baked literal.
+		if (
+			this.compilation.dependencyFactories.has(
+				getModuleHotAcceptDependency()
+			) ||
+			getAPIPlugin().usesRuntimePublicPathOverride(this.compilation)
+		) {
+			return null;
+		}
+		// A worker entry loads its own chunks through the worker runtime; keep that path.
+		for (const originChunk of chunkGraph.getModuleChunksIterable(
+			originModule
+		)) {
+			const entryOptions = originChunk.getEntryOptions();
+			if (entryOptions && entryOptions.worker) {
+				return null;
+			}
+		}
+		// Only a chunk that is loaded solely through this `import()` and holds pure JS:
+		// a shared chunk (splitChunks / module federation) or one with css/wasm/other
+		// assets needs the runtime's deduplication and per-type loaders, so keep it.
+		if (chunk.getNumberOfGroups() !== 1) {
+			return null;
+		}
+		// Prefetch/preload children (incl. CSS-only preload) are injected by the runtime
+		// `.f` handlers when the chunk loads, which the analyzable `import()` bypasses —
+		// keep the runtime form for them.
+		if (
+			chunk.hasChildByOrder(chunkGraph, "prefetch", true) ||
+			chunk.hasChildByOrder(chunkGraph, "preload", true) ||
+			chunk.hasChildByOrder(chunkGraph, "cssPreload", true)
+		) {
+			return null;
+		}
+		for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
+			// Module federation (remote/shared/provide) loads through its own runtime.
+			if (FEDERATION_MODULE_TYPES.has(module.type)) {
+				return null;
+			}
+			for (const type of chunkGraph.getModuleSourceTypes(module)) {
+				if (type !== JAVASCRIPT_TYPE && type !== RUNTIME_TYPE) {
+					return null;
+				}
+			}
+		}
+		// Relative to the consuming chunk (`import.meta.url`) for `auto`, else an
+		// absolute publicPath prefix.
+		const specifier = this._getAnalyzableChunkSpecifier(
+			undefined,
+			chunk,
+			originModule,
+			chunkGraph
+		);
+		// `import()` needs a resolvable specifier — relative (`./`, `../`), absolute (`/`)
+		// or a URL scheme. A bare one (empty/relative publicPath) is treated as a package,
+		// so keep the runtime form. (`new URL(...)` callers accept bare, resolving vs base.)
+		if (
+			specifier === null ||
+			!/^"(?:\.{0,2}\/|[a-zA-Z][\w+.-]*:)/.test(specifier)
+		) {
+			return null;
+		}
+		runtimeRequirements.add(RuntimeGlobals.analyzableChunkImport);
+		// Drop-in for `ensureChunk(id)`: the literal `import()` can be statically
+		// followed, the helper keeps webpack's install timing and deduplication.
+		return `${RuntimeGlobals.analyzableChunkImport}(${JSON.stringify(
+			chunk.id
+		)}, () => import(${comment}${specifier}))`;
+	}
+
+	/**
+	 * Computes the `../`-path from the consuming module's chunk(s) back to the output
+	 * root, so a chunk or asset can be referenced relative to `import.meta.url`. Returns
+	 * `null` when the module lives in chunks of different depths (no single path works).
+	 * @param {Module} module the consuming module
+	 * @param {ChunkGraph} chunkGraph the chunk graph
+	 * @returns {string | null} relative undo path, or `null` when ambiguous
+	 */
+	_getModuleUndoPath(module, chunkGraph) {
+		const { compilation } = this;
+		const { outputOptions } = compilation;
+		const outputPath = /** @type {string} */ (outputOptions.path);
+		/** @type {string | null} */
+		let result = null;
+		let found = false;
+		for (const chunk of chunkGraph.getModuleChunksIterable(module)) {
+			const template = getJavascriptModulesPlugin().getChunkFilenameTemplate(
+				chunk,
+				outputOptions
+			);
+			const chunkName = compilation.getPath(
+				// Hashes aren't known during code generation and only sit in the basename
+				// (never a directory), so neutralize them — only the `../` depth matters.
+				typeof template === "string"
+					? template.replace(HASH_IN_FILENAME_GLOBAL, "x")
+					: template,
+				{ chunk, contentHashType: JAVASCRIPT_TYPE }
+			);
+			const undo = getUndoPath(chunkName, outputPath, true);
+			if (!found) {
+				result = undo;
+				found = true;
+			} else if (result !== undo) {
+				return null;
+			}
+		}
+		return found ? result : null;
+	}
+
+	/**
+	 * Static literal specifier (already quoted) for a `new URL(<here>, import.meta.url)`
+	 * or `import(<here>)` pointing at `chunk`'s JS file, or `null` when it can't be known
+	 * statically — a content hash in the filename, or a dynamic/templated publicPath.
+	 * @param {string | undefined} overridePublicPath per-dependency public path (wins over `output.publicPath`)
+	 * @param {Chunk} chunk the chunk to reference
+	 * @param {Module} consumingModule the module the reference is emitted into
+	 * @param {ChunkGraph} chunkGraph the chunk graph
+	 * @returns {string | null} a JS string literal, or `null` to fall back to the runtime form
+	 */
+	_getAnalyzableChunkSpecifier(
+		overridePublicPath,
+		chunk,
+		consumingModule,
+		chunkGraph
+	) {
+		const { compilation } = this;
+		const { outputOptions } = compilation;
+		const filenameTemplate =
+			getJavascriptModulesPlugin().getChunkFilenameTemplate(
+				chunk,
+				outputOptions
+			);
+		if (
+			typeof filenameTemplate !== "string" ||
+			HASH_IN_FILENAME.test(filenameTemplate)
+		) {
+			return null;
+		}
+		const filename = compilation.getPath(filenameTemplate, {
+			chunk,
+			contentHashType: JAVASCRIPT_TYPE
+		});
+		if (overridePublicPath) {
+			return overridePublicPath.includes("[")
+				? null
+				: toJsStringLiteral(overridePublicPath + filename);
+		}
+		const { publicPath } = outputOptions;
+		if (publicPath === "auto") {
+			const undo = this._getModuleUndoPath(consumingModule, chunkGraph);
+			return undo === null ? null : toJsStringLiteral(undo + filename);
+		}
+		if (typeof publicPath === "string" && !publicPath.includes("[")) {
+			return toJsStringLiteral(publicPath + filename);
+		}
+		return null;
+	}
+
 	/**
 	 * Async module factory.
 	 * @param {object} options options

package/lib/Template.js

@@ -46,6 +46,22 @@ const COMMENT_END_REGEX = /\*\//g;
 const PATH_NAME_NORMALIZE_REPLACE_REGEX = /[^a-z0-9_!§$()=\-^°]+/gi;
 const MATCH_PADDED_HYPHENS_REPLACE_REGEX = /^-|-$/g;
 
+/**
+ * Decimal digit count of a non-negative integer, without allocating a string.
+ * @param {number} n non-negative integer
+ * @returns {number} number of decimal digits
+ */
+const numberLength = (n) => {
+	if (n < 10) return 1;
+	if (n < 100) return 2;
+	if (n < 1000) return 3;
+	if (n < 10000) return 4;
+	if (n < 100000) return 5;
+	if (n < 1000000) return 6;
+	if (n < 10000000) return 7;
+	return String(n).length;
+};
+
 /**
  * Defines the render manifest options type used by this module.
  * @typedef {object} RenderManifestOptions
@@ -296,11 +312,15 @@ class Template {
 		// start with -1 because the first module needs no comma
 		let objectOverhead = -1;
 		for (const module of modules) {
-			// module id + colon + comma
-			objectOverhead += `${module.id}`.length + 2;
+			// module id digits + colon + comma; ids are non-negative integers here
+			// (non-number ids already returned false above), so count digits
+			// arithmetically instead of allocating a string per module.
+			const id = /** @type {number} */ (module.id);
+			objectOverhead += numberLength(id) + 2;
 		}
 		// number of commas, or when starting non-zero the length of Array(minId).concat()
-		const arrayOverhead = minId === 0 ? maxId : 16 + `${minId}`.length + maxId;
+		const arrayOverhead =
+			minId === 0 ? maxId : 16 + numberLength(minId) + maxId;
 		return arrayOverhead < objectOverhead ? [minId, maxId] : false;
 	}
 

package/lib/UseStrictPlugin.js

@@ -52,7 +52,7 @@ class UseStrictPlugin {
 								"",
 								/** @type {Range} */ (firstNode.range)
 							);
-							dep.loc = /** @type {DependencyLocation} */ (firstNode.loc);
+							dep.loc = parser.getLocation(firstNode);
 							parser.state.module.addPresentationalDependency(dep);
 							/** @type {BuildInfo} */
 							(parser.state.module.buildInfo).strict = true;

package/lib/WebpackIsIncludedPlugin.js

@@ -67,7 +67,7 @@ class WebpackIsIncludedPlugin {
 								/** @type {string} */ (request.string),
 								/** @type {Range} */ (expr.range)
 							);
-							dep.loc = /** @type {DependencyLocation} */ (expr.loc);
+							dep.loc = parser.getLocation(expr);
 							parser.state.module.addDependency(dep);
 							return true;
 						});

package/lib/WebpackOptionsApply.js

@@ -57,14 +57,14 @@ const SystemPlugin = require("./dependencies/SystemPlugin");
 
 const URLPlugin = require("./dependencies/URLPlugin");
 
-const WorkerPlugin = require("./dependencies/WorkerPlugin");
+const WorkerAndWorkletPlugin = require("./dependencies/WorkerAndWorkletPlugin");
 
 const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
-const JavascriptParser = require("./javascript/JavascriptParser");
 
 const JsonModulesPlugin = require("./json/JsonModulesPlugin");
 
 const ChunkPrefetchPreloadPlugin = require("./prefetch/ChunkPrefetchPreloadPlugin");
+const ResourceHintPlugin = require("./prefetch/ResourceHintPlugin");
 
 const DataUriPlugin = require("./schemes/DataUriPlugin");
 const FileUriPlugin = require("./schemes/FileUriPlugin");
@@ -241,6 +241,7 @@ class WebpackOptionsApply extends OptionsApply {
 		}
 
 		new ChunkPrefetchPreloadPlugin().apply(compiler);
+		new ResourceHintPlugin(options.output.resourceHints).apply(compiler);
 
 		if (typeof options.output.chunkFormat === "string") {
 			switch (options.output.chunkFormat) {
@@ -529,20 +530,6 @@ class WebpackOptionsApply extends OptionsApply {
 			new HttpUriPlugin(httpOptions).apply(compiler);
 		}
 
-		if (
-			!(
-				/** @type {typeof JavascriptParser & { __importPhasesExtended?: true }} */
-				(JavascriptParser).__importPhasesExtended
-			) &&
-			(options.experiments.deferImport || options.experiments.sourceImport)
-		) {
-			const importPhases = require("acorn-import-phases");
-
-			JavascriptParser.extend(importPhases({ source: true, defer: true }));
-			/** @type {typeof JavascriptParser & { __importPhasesExtended?: true }} */
-			(JavascriptParser).__importPhasesExtended = true;
-		}
-
 		new EntryOptionPlugin().apply(compiler);
 		compiler.hooks.entryOption.call(options.context, options.entry);
 
@@ -584,11 +571,12 @@ class WebpackOptionsApply extends OptionsApply {
 		new SystemPlugin().apply(compiler);
 		new ImportMetaPlugin().apply(compiler);
 		new URLPlugin().apply(compiler);
-		new WorkerPlugin(
+		new WorkerAndWorkletPlugin(
 			options.output.workerChunkLoading,
 			options.output.workerWasmLoading,
 			options.output.module,
-			options.output.workerPublicPath
+			options.output.workerPublicPath,
+			options.experiments.futureDefaults
 		).apply(compiler);
 
 		new DefaultStatsFactoryPlugin().apply(compiler);
@@ -805,10 +793,27 @@ class WebpackOptionsApply extends OptionsApply {
 			const DefinePlugin = require("./DefinePlugin");
 
 			const defValue = JSON.stringify(options.optimization.nodeEnv);
+			const development = options.mode === "development";
+			// SSR = server-only build (node, not browser); a universal (node+browser) target is null here, so not SSR.
+			const ssr =
+				compiler.platform.node === true && compiler.platform.browser !== true;
+			const { publicPath } = options.output;
+			// Vite-compatible base URL; fall back to "/" for runtime ("auto") or empty publicPath.
+			const baseUrl =
+				typeof publicPath === "string" &&
+				publicPath !== "auto" &&
+				publicPath !== ""
+					? publicPath
+					: "/";
 
 			new DefinePlugin({
 				"process.env.NODE_ENV": defValue,
-				"import.meta.env.NODE_ENV": defValue
+				"import.meta.env.NODE_ENV": defValue,
+				"import.meta.env.MODE": defValue,
+				"import.meta.env.DEV": JSON.stringify(development),
+				"import.meta.env.PROD": JSON.stringify(!development),
+				"import.meta.env.SSR": JSON.stringify(ssr),
+				"import.meta.env.BASE_URL": JSON.stringify(baseUrl)
 			}).apply(compiler);
 		}
 		if (options.optimization.minimize) {