webpack 5.107.0 → 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
@@ -255,11 +286,7 @@ class HtmlModulesPlugin {
 									options
 								)
 						);
-						return new HtmlGenerator(
-							/** @type {import("../../declarations/WebpackOptions").HtmlGeneratorOptions} */
-							(generatorOptions),
-							compilation.moduleGraph
-						);
+						return new HtmlGenerator(generatorOptions, compilation.moduleGraph);
 					});
 
 				NormalModule.getCompilationHooks(compilation).processResult.tap(
@@ -300,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;
@@ -346,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(
@@ -386,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);
@@ -399,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({
@@ -425,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);
+					}
+				});
 			}
 		);
 	}