webpack 5.107.1 → 5.107.2

package/lib/html/HtmlGenerator.js

@@ -17,6 +17,8 @@ const CssUrlDependency = require("../dependencies/CssUrlDependency");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../../declarations/WebpackOptions").HtmlGeneratorOptions} HtmlGeneratorOptions */
+/** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Compilation").DependencyConstructor} DependencyConstructor */
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Dependency")} Dependency */
@@ -39,7 +41,76 @@ const CssUrlDependency = require("../dependencies/CssUrlDependency");
  */
 const JAVASCRIPT_AND_HTML_TYPES = new Set([JAVASCRIPT_TYPE, HTML_TYPE]);
 
+/** @type {WeakMap<Compilation, Map<string, Chunk>>} */
+const chunksByIdCache = new WeakMap();
+
 class HtmlGenerator extends Generator {
+	/**
+	 * Emit a sentinel for a chunk URL that can't be resolved at code-gen time
+	 * (chunk hashes aren't computed yet); `resolveChunkUrlSentinels` swaps it
+	 * for `${PUBLIC_PATH_AUTO}<chunkFilename>` once they are.
+	 * @param {Chunk} chunk chunk
+	 * @param {"javascript" | "css"} contentHashType which chunk content hash slot the resolved URL should reference
+	 * @returns {string} sentinel
+	 */
+	static makeChunkUrlSentinel(chunk, contentHashType) {
+		const hexId = Buffer.from(String(chunk.id), "utf8").toString("hex");
+		return `__WEBPACK_HTML_CHUNK_URL__${hexId}__${contentHashType}__END__`;
+	}
+
+	/**
+	 * Replace every `makeChunkUrlSentinel` sentinel in `content` with
+	 * `${PUBLIC_PATH_AUTO}<chunkFilename>`. Must run after
+	 * `Compilation#createHash()` so `[contenthash]` resolves.
+	 * @param {string} content content
+	 * @param {Compilation} compilation compilation
+	 * @returns {string} resolved content
+	 */
+	static resolveChunkUrlSentinels(content, compilation) {
+		if (!content.includes("__WEBPACK_HTML_CHUNK_URL__")) return content;
+		const outputOptions = compilation.outputOptions;
+		let chunksById = chunksByIdCache.get(compilation);
+		if (chunksById === undefined) {
+			chunksById = new Map();
+			for (const chunk of compilation.chunks) {
+				chunksById.set(String(chunk.id), chunk);
+			}
+			chunksByIdCache.set(compilation, chunksById);
+		}
+		return content.replace(
+			/__WEBPACK_HTML_CHUNK_URL__([0-9a-f]+)__([a-z]+)__END__/g,
+			(_, hexId, contentHashType) => {
+				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
+				const chunk = chunksById.get(chunkId);
+				if (!chunk) return "data:,";
+				let filenameTemplate;
+				if (contentHashType === "css") {
+					const CssModulesPlugin = require("../css/CssModulesPlugin");
+
+					filenameTemplate = CssModulesPlugin.getChunkFilenameTemplate(
+						chunk,
+						outputOptions
+					);
+				} else {
+					filenameTemplate =
+						chunk.filenameTemplate ||
+						(chunk.canBeInitial()
+							? outputOptions.filename
+							: outputOptions.chunkFilename);
+				}
+				const filename = compilation.getPath(
+					/** @type {import("../TemplatedPathPlugin").TemplatePath} */
+					(filenameTemplate),
+					{
+						chunk,
+						contentHashType
+					}
+				);
+				return `${CssUrlDependency.PUBLIC_PATH_AUTO}${filename}`;
+			}
+		);
+	}
+
 	/**
 	 * Creates an instance of HtmlGenerator.
 	 * @param {HtmlGeneratorOptions=} options generator options
@@ -268,28 +339,15 @@ class HtmlGenerator extends Generator {
 		this.sourceModule(module, initFragments, source, generateContext);
 
 		if (undoPath === undefined) {
+			// HTML output — leave sentinels and `[webpack/auto]` for renderManifest.
 			return /** @type {string} */ (source.source());
 		}
 
-		const moduleSourceContent = source.source();
-		const generatedSource = new ReplaceSource(source);
-
-		const autoPlaceholder = CssUrlDependency.PUBLIC_PATH_AUTO;
-		const autoPlaceholderLen = autoPlaceholder.length;
-		for (
-			let idx = moduleSourceContent.indexOf(autoPlaceholder);
-			idx !== -1;
-			idx = moduleSourceContent.indexOf(
-				autoPlaceholder,
-				idx + autoPlaceholderLen
-			)
-		) {
-			generatedSource.replace(idx, idx + autoPlaceholderLen - 1, undoPath);
-		}
-
-		// TODO handle `[fullhash]`
-
-		return /** @type {string} */ (generatedSource.source());
+		// JS-export path — resolve `[webpack/auto]` inline; chunk-URL sentinels
+		// stay for `HtmlModulesPlugin`'s `JavascriptModulesPlugin.render` tap.
+		let content = /** @type {string} */ (source.source());
+		content = content.split(CssUrlDependency.PUBLIC_PATH_AUTO).join(undoPath);
+		return content;
 	}
 
 	/**
@@ -306,16 +364,13 @@ class HtmlGenerator extends Generator {
 		}
 
 		if (generateContext.type === HTML_TYPE) {
-			// Preserve `[webpack/auto]` placeholders here — the plugin's
-			// `renderManifest` hook knows the final `.html` filename and
-			// resolves them to an undo path relative to that location.
+			// Preserve `[webpack/auto]`; renderManifest resolves it once `.html` filename is known.
 			return new RawSource(
 				this._renderHtml(module, generateContext, undefined)
 			);
 		}
 
-		// JS export: the rewritten HTML is a string the consumer reads at
-		// runtime, so resolve placeholders to root-relative URLs.
+		// JS export: resolve `[webpack/auto]` to root-relative URLs.
 		const generated = this._renderHtml(module, generateContext, "");
 
 		/** @type {string} */
@@ -346,10 +401,7 @@ class HtmlGenerator extends Generator {
 	 */
 	generateError(error, module, generateContext) {
 		if (generateContext.type === HTML_TYPE) {
-			// The error message can contain arbitrary text (file paths, user
-			// input, dep request strings). Strip `<`, `>`, and `--` runs so a
-			// crafted message can't close the comment with `-->` (or open a
-			// fake nested comment) and inject HTML into the extracted page.
+			// Strip `<`, `>`, `--` runs from `error.message` so it can't escape the comment.
 			const safe = String(error.message)
 				.replace(/[<>]/g, "")
 				.replace(/-{2,}/g, (m) => `${"-".repeat(m.length - 1)} `);
@@ -365,11 +417,7 @@ class HtmlGenerator extends Generator {
 	 */
 	updateHash(hash, updateHashContext) {
 		hash.update("html");
-		// Hash the *effective* extraction state, not just the raw option,
-		// so the module hash flips when a module becomes (or stops being)
-		// a compilation entry under the `extract: undefined` default — the
-		// generator's source-type set changes with it, so any cached
-		// HTML-type codegen result must be invalidated.
+		// Hash effective extraction state — source-type set changes when this flips.
 		if (this._shouldExtract(updateHashContext.module)) {
 			hash.update("extract");
 		}

package/lib/html/HtmlModulesPlugin.js

@@ -45,12 +45,43 @@ const generatorValidationOptions = {
 };
 
 class HtmlModulesPlugin {
+	/**
+	 * `output.hashFunction`/`hashSalt`/`hashDigest`/`hashDigestLength`
+	 * digest of `content`, with `nonNumericOnlyHash` applied — webpack's
+	 * standard `[contenthash]` recipe.
+	 * @param {string | Buffer} content content to hash
+	 * @param {import("../../declarations/WebpackOptions").Output} outputOptions output options
+	 * @returns {string} content hash
+	 */
+	static computeContentHash(content, outputOptions) {
+		const createHash = require("../util/createHash");
+		const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+
+		const hash = createHash(
+			/** @type {import("../../declarations/WebpackOptions").HashFunction} */
+			(outputOptions.hashFunction)
+		);
+		if (outputOptions.hashSalt) hash.update(outputOptions.hashSalt);
+		hash.update(content);
+		return nonNumericOnlyHash(
+			/** @type {string} */ (
+				hash.digest(/** @type {string} */ (outputOptions.hashDigest))
+			),
+			/** @type {number} */ (outputOptions.hashDigestLength)
+		);
+	}
+
 	/**
 	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the compiler instance
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		// Per-chunk `RawSource` reused across builds when bytes are unchanged:
+		// keeping identity stable avoids invalidating `RealContentHashPlugin|analyse`.
+		/** @type {Map<string, { content: string, source: import("webpack-sources").RawSource }>} */
+		const sentinelResolvedSourceCache = new Map();
+
 		// `<script src>` and `<link rel="modulepreload">` references collected
 		// by HtmlParser become real compilation entries here. The classic
 		// and esm-script groups are chained via a leader-only dependOn so
@@ -296,8 +327,6 @@ class HtmlModulesPlugin {
 					getUndoPath,
 					makePathsRelative
 				} = require("../util/identifier");
-				const createHash = require("../util/createHash");
-				const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
 				const CssUrlDependency = require("../dependencies/CssUrlDependency");
 
 				const autoPlaceholder = CssUrlDependency.PUBLIC_PATH_AUTO;
@@ -342,17 +371,15 @@ class HtmlModulesPlugin {
 							const placeholderContent = /** @type {string} */ (
 								placeholderSource.source()
 							);
-							const hashInput = createHash(outputOptions.hashFunction);
-							if (outputOptions.hashSalt) {
-								hashInput.update(outputOptions.hashSalt);
-							}
-							hashInput.update(placeholderContent);
-							const fullContentHash = /** @type {string} */ (
-								hashInput.digest(outputOptions.hashDigest)
+							// Resolve sentinels *before* hashing so the HTML's `[contenthash]`
+							// invalidates with the referenced chunks' filenames.
+							const resolvedContent = HtmlGenerator.resolveChunkUrlSentinels(
+								placeholderContent,
+								compilation
 							);
-							const contentHash = nonNumericOnlyHash(
-								fullContentHash,
-								outputOptions.hashDigestLength
+							const contentHash = HtmlModulesPlugin.computeContentHash(
+								resolvedContent,
+								outputOptions
 							);
 
 							const { path: filename, info } = compilation.getPathWithInfo(
@@ -382,7 +409,7 @@ class HtmlModulesPlugin {
 								/** @type {string} */ (outputOptions.path),
 								false
 							);
-							const finalContent = placeholderContent
+							const finalContent = resolvedContent
 								.split(autoPlaceholder)
 								.join(undoPath);
 							const finalSource = new RawSource(finalContent);
@@ -395,16 +422,9 @@ class HtmlModulesPlugin {
 							// the post-undo-path content in the hash, so the
 							// asset cache can't reuse one variant's bytes at
 							// another variant's URL.
-							const finalHash = createHash(outputOptions.hashFunction);
-							if (outputOptions.hashSalt) {
-								finalHash.update(outputOptions.hashSalt);
-							}
-							finalHash.update(finalContent);
-							const finalContentHash = nonNumericOnlyHash(
-								/** @type {string} */ (
-									finalHash.digest(outputOptions.hashDigest)
-								),
-								outputOptions.hashDigestLength
+							const finalContentHash = HtmlModulesPlugin.computeContentHash(
+								finalContent,
+								outputOptions
 							);
 
 							result.push({
@@ -421,6 +441,49 @@ class HtmlModulesPlugin {
 						return result;
 					}
 				);
+
+				// Resolve sentinels at JS chunk render time so later passes
+				// (SourceMapDevToolPlugin, size optimizers, RealContentHash) see resolved bytes.
+				const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
+
+				const jsHooks =
+					JavascriptModulesPlugin.getCompilationHooks(compilation);
+				jsHooks.render.tap(PLUGIN_NAME, (source, renderContext) => {
+					const raw = source.source();
+					if (typeof raw !== "string") return source;
+					if (!raw.includes("__WEBPACK_HTML_CHUNK_URL__")) return source;
+					const resolved = HtmlGenerator.resolveChunkUrlSentinels(
+						raw,
+						compilation
+					)
+						.split(autoPlaceholder)
+						.join("");
+					if (resolved === raw) return source;
+					const chunkId = String(renderContext.chunk.id);
+					const prior = sentinelResolvedSourceCache.get(chunkId);
+					if (prior !== undefined && prior.content === resolved) {
+						return prior.source;
+					}
+					const newSource = new RawSource(resolved);
+					sentinelResolvedSourceCache.set(chunkId, {
+						content: resolved,
+						source: newSource
+					});
+					return newSource;
+				});
+
+				// Prune cache entries for chunks no longer in the graph so a
+				// long watch session can't accumulate stale entries.
+				compilation.hooks.afterSeal.tap(PLUGIN_NAME, () => {
+					if (sentinelResolvedSourceCache.size === 0) return;
+					const live = new Set();
+					for (const chunk of compilation.chunks) {
+						live.add(String(chunk.id));
+					}
+					for (const id of sentinelResolvedSourceCache.keys()) {
+						if (!live.has(id)) sentinelResolvedSourceCache.delete(id);
+					}
+				});
 			}
 		);
 	}

package/lib/javascript/JavascriptParser.js

@@ -127,7 +127,7 @@ const BasicEvaluatedExpression = require("./BasicEvaluatedExpression");
 
 /** @typedef {Set<DestructuringAssignmentProperty>} DestructuringAssignmentProperties */
 
-// TODO remove cast when @types/estree has been updated to import assertions
+// TODO remove cast when @types/estree has been updated to import phases
 /** @typedef {import("estree").ImportExpression & { phase?: "defer" | "source" }} ImportExpression */
 
 /** @type {string[]} */

package/lib/library/ModuleLibraryPlugin.js

@@ -111,24 +111,15 @@ class ModuleLibraryPlugin extends AbstractLibraryPlugin {
 
 			// `ModuleLibraryPlugin` stashes the on-demand exports source via
 			// `onDemandExportsGeneration` and only re-emits it when the
-			// module is wrapped in an IIFE/factory. When a single concatenated
-			// entry is inlined directly, the stashed source — and the
+			// module is wrapped in an IIFE/factory. When the entry is
+			// inlined directly, the stashed source — and the
 			// `definePropertyGetters` / `requireScope` runtime helpers it
 			// pulled in — never make it into the output. Drop those helpers
-			// from the chunk's set in that simple shape so the bundle stays
-			// clean.
+			// from the chunk's set so the bundle stays clean.
 			compilation.hooks.additionalChunkRuntimeRequirements.tap(
 				PLUGIN_NAME,
 				(chunk, set, { chunkGraph, codeGenerationResults }) => {
 					if (!set.has(RuntimeGlobals.definePropertyGetters)) return;
-
-					// Only handle the simple "single concatenated entry"
-					// shape. Anything else (additional modules, multiple
-					// entries, sibling runtime chunks, or chunk-level
-					// requirements that disable inline startup) forces the
-					// module through factory/IIFE rendering, which re-emits
-					// the source.
-					if (chunkGraph.getNumberOfChunkModules(chunk) !== 1) return;
 					if (chunkGraph.getNumberOfEntryModules(chunk) !== 1) return;
 					if (chunkGraph.hasChunkEntryDependentChunks(chunk)) return;
 					if (
@@ -140,8 +131,6 @@ class ModuleLibraryPlugin extends AbstractLibraryPlugin {
 					) {
 						return;
 					}
-					// Anyone tapping `inlineInRuntimeBailout` may force factory
-					// rendering at render time, so conservatively bail out.
 					if (javascriptHooks.inlineInRuntimeBailout.isUsed()) return;
 
 					const [module] = chunkGraph.getChunkEntryModulesIterable(chunk);
@@ -153,14 +142,6 @@ class ModuleLibraryPlugin extends AbstractLibraryPlugin {
 					) {
 						return;
 					}
-					// If the generated source references any
-					// `__webpack_require__.<helper>` (the on-demand `.d(...)`
-					// is stashed, but `.r(__webpack_exports__)` from the ESM
-					// compat flag, namespace objects, deferred externals, ...
-					// stay in the result) the helpers and the require scope
-					// they live in are still needed. The dot in the substring
-					// avoids matching the bare `"__webpack_require__"` string
-					// literals that some test fixtures include.
 					const codeGenResult = codeGenerationResults.get(
 						module,
 						chunk.runtime
@@ -174,9 +155,34 @@ class ModuleLibraryPlugin extends AbstractLibraryPlugin {
 						return;
 					}
 
+					// Check whether any other module in the chunk still needs
+					// the helpers we want to remove.
+					let otherNeedsDefine = false;
+					let otherNeedsExports = false;
+					let otherNeedsRequireScope = false;
+					for (const m of chunkGraph.getChunkModulesIterable(chunk)) {
+						if (m === module) continue;
+						const requirements = chunkGraph.getModuleRuntimeRequirements(
+							m,
+							chunk.runtime
+						);
+						if (!requirements) continue;
+						if (requirements.has(RuntimeGlobals.definePropertyGetters)) {
+							otherNeedsDefine = true;
+						}
+						if (requirements.has(RuntimeGlobals.exports)) {
+							otherNeedsExports = true;
+						}
+						if (requirements.has(RuntimeGlobals.requireScope)) {
+							otherNeedsRequireScope = true;
+						}
+						if (otherNeedsDefine) break;
+					}
+
+					if (otherNeedsDefine) return;
 					set.delete(RuntimeGlobals.definePropertyGetters);
-					set.delete(RuntimeGlobals.exports);
-					set.delete(RuntimeGlobals.requireScope);
+					if (!otherNeedsExports) set.delete(RuntimeGlobals.exports);
+					if (!otherNeedsRequireScope) set.delete(RuntimeGlobals.requireScope);
 				}
 			);
 		});

package/lib/node/NodeWatchFileSystem.js

@@ -82,6 +82,41 @@ class NodeWatchFileSystem {
 			}
 			return { fileTimeInfoEntries, contextTimeInfoEntries };
 		};
+		const directoriesSet =
+			directories instanceof Set ? directories : new Set(directories);
+
+		// Watchpack reports a watched directory (a context dependency) in
+		// `changes` whenever its contents change, alongside the individual
+		// file events. The default `fs.purge(dir)` matches cache keys by
+		// prefix, so it would wipe the stat cache of every file inside the
+		// directory even though only file-level events actually invalidate
+		// file stats. For directories we explicitly watch, purge only the
+		// directory's own entry (`{ exact: true }`, enhanced-resolve >=
+		// 5.22.0); file-level events in the same aggregated batch still
+		// handle file stats and the parent readdir invalidation.
+		/**
+		 * @param {Changes | null | undefined} changes changes set
+		 * @param {Removals | null | undefined} removals removals set
+		 */
+		const purgeChanges = (changes, removals) => {
+			const fs = this.inputFileSystem;
+			if (!fs || !fs.purge) return;
+			if (changes) {
+				for (const item of changes) {
+					if (directoriesSet.has(item)) {
+						fs.purge(item, { exact: true });
+					} else {
+						fs.purge(item);
+					}
+				}
+			}
+			if (removals) {
+				for (const item of removals) {
+					fs.purge(item);
+				}
+			}
+		};
+
 		this.watcher.once(
 			"aggregated",
 			/**
@@ -94,15 +129,7 @@ class NodeWatchFileSystem {
 				/** @type {Watchpack} */
 				(this.watcher).pause();
 
-				const fs = this.inputFileSystem;
-				if (fs && fs.purge) {
-					for (const item of changes) {
-						fs.purge(item);
-					}
-					for (const item of removals) {
-						fs.purge(item);
-					}
-				}
+				purgeChanges(changes, removals);
 				const { fileTimeInfoEntries, contextTimeInfoEntries } = fetchTimeInfo();
 				callback(
 					null,
@@ -172,19 +199,7 @@ class NodeWatchFileSystem {
 			getInfo: () => {
 				const removals = this.watcher && this.watcher.aggregatedRemovals;
 				const changes = this.watcher && this.watcher.aggregatedChanges;
-				const fs = this.inputFileSystem;
-				if (fs && fs.purge) {
-					if (removals) {
-						for (const item of removals) {
-							fs.purge(item);
-						}
-					}
-					if (changes) {
-						for (const item of changes) {
-							fs.purge(item);
-						}
-					}
-				}
+				purgeChanges(changes, removals);
 				const { fileTimeInfoEntries, contextTimeInfoEntries } = fetchTimeInfo();
 				return {
 					changes,

package/lib/optimize/ConcatenatedModule.js

@@ -2317,8 +2317,9 @@ ${defineGetters}`
 					info.module.updateHash(hash, context);
 					break;
 				case "external":
-					hash.update(`${chunkGraph.getModuleId(info.module)}`);
-					// TODO runtimeCondition
+					hash.update(
+						`${chunkGraph.getModuleId(info.module)}|${runtimeConditionToString(info.runtimeCondition)}|${info.nonDeferAccess ? "1" : "0"}|${chunkGraph.moduleGraph.isDeferred(info.module) ? "1" : "0"}`
+					);
 					break;
 			}
 		}

package/lib/util/fs.js

@@ -308,7 +308,12 @@ const path = require("path");
 
 /**
  * Defines the purge type used by this module.
- * @typedef {(value?: string | string[] | Set<string>) => void} Purge
+ *
+ * `options.exact` (supported by enhanced-resolve's `CachedInputFileSystem`
+ * from v5.22.0): when true, only entries whose key exactly matches `value`
+ * are invalidated; cached entries for descendants are preserved. Default
+ * is false (legacy prefix-match behavior).
+ * @typedef {(value?: string | string[] | Set<string>, options?: { exact?: boolean }) => void} Purge
  */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack",
-  "version": "5.107.1",
+  "version": "5.107.2",
   "description": "Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.",
   "homepage": "https://github.com/webpack/webpack",
   "bugs": "https://github.com/webpack/webpack/issues",
@@ -97,7 +97,7 @@
     "acorn-import-phases": "^1.0.3",
     "browserslist": "^4.28.1",
     "chrome-trace-event": "^1.0.2",
-    "enhanced-resolve": "^5.21.4",
+    "enhanced-resolve": "^5.22.0",
     "es-module-lexer": "^2.1.0",
     "eslint-scope": "5.1.1",
     "events": "^3.2.0",
@@ -110,7 +110,7 @@
     "tapable": "^2.3.0",
     "terser-webpack-plugin": "^5.5.0",
     "watchpack": "^2.5.1",
-    "webpack-sources": "^3.4.1"
+    "webpack-sources": "^3.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",