@depup/webpack 5.109.0-depup.0 → 5.110.1-depup.0

package/lib/html/HtmlGenerator.js

@@ -14,38 +14,29 @@ const {
 } = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const CssModulesPlugin = require("../css/CssModulesPlugin");
 const WebpackError = require("../errors/WebpackError");
 const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 const { PUBLIC_PATH_AUTO } = require("../util/publicPathPlaceholder");
-const { NodeType, SourceProcessor, escapeAttribute } = require("./syntax");
+const { VOID } = require("./data");
 
+const getCreateNodeHash = memoize(() => require("crypto").createHash);
+
+const getCssSyntax = memoize(() => require("../css/syntax"));
+
+const getHtmlSyntax = memoize(() => require("./syntax"));
+
+// Lazy: the dependency templates need this module's sentinel helpers on every
+// build, but the HTML tokenizer is only reached once HTML is actually emitted.
 // Lazy so loading the HTML generator doesn't pull in the whole CSS pipeline.
-const getCssModulesPlugin = memoize(() => require("../css/CssModulesPlugin"));
+
 // The CSS tokenizer, used to locate `url(...)` when rebasing inlined stylesheets.
-const getCssSyntax = memoize(() => require("../css/syntax"));
 // node's crypto — real SHA hashes for Content-Security-Policy source lists
 // (the wasm hashes are xxhash, unusable for CSP), loaded only when CSP is on.
-const getCreateNodeHash = memoize(() => require("crypto").createHash);
 
 // HTML void elements — serialized without a closing tag when a tag descriptor
 // (`output.html` `injectTags`) doesn't say otherwise.
-const VOID_TAGS = new Set([
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr"
-]);
 
 /**
  * Serializes an attribute map: `true` → bare attribute, `false`/`undefined`/
@@ -56,6 +47,7 @@ const VOID_TAGS = new Set([
 const serializeAttrs = (attrs) => {
 	let out = "";
 	if (attrs) {
+		const { escapeAttribute } = getHtmlSyntax();
 		for (const name of Object.keys(attrs)) {
 			const value = attrs[name];
 			if (value === false || value === undefined || value === null) continue;
@@ -77,9 +69,7 @@ const serializeAttrs = (attrs) => {
 const serializeTag = (tag) => {
 	const attrs = serializeAttrs(tag.attrs);
 	const isVoid =
-		tag.voidTag !== undefined
-			? tag.voidTag
-			: VOID_TAGS.has(tag.tag.toLowerCase());
+		tag.voidTag !== undefined ? tag.voidTag : VOID.has(tag.tag.toLowerCase());
 	return isVoid
 		? `<${tag.tag}${attrs}>`
 		: `<${tag.tag}${attrs}>${tag.children || ""}</${tag.tag}>`;
@@ -134,11 +124,10 @@ const metaIsCsp = (attrs) => {
 	return false;
 };
 
-/** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").HtmlGeneratorOptions} HtmlGeneratorOptions */
+/** @import { Source } from "webpack-sources" */
+/** @import { HtmlGeneratorOptions } from "../../declarations/WebpackOptions" */
 /** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["csp"]} CspOption */
-/** @typedef {import("./HtmlModulesPlugin").HtmlTagDescriptor} HtmlTagDescriptor */
-/** @typedef {import("./HtmlModulesPlugin").HtmlMutableTag} HtmlMutableTag */
+/** @import { HtmlTagDescriptor, HtmlMutableTag } from "./HtmlModulesPlugin" */
 /** @typedef {"head" | "body"} HtmlTagLocation */
 /**
  * @typedef {object} HtmlTagSpan
@@ -152,24 +141,26 @@ const metaIsCsp = (attrs) => {
  */
 /** @typedef {{ headOpen: number, headEnd: number, bodyOpen: number, bodyEnd: number }} HtmlAnchors */
 /** @typedef {{ tags: HtmlMutableTag[], spans: (HtmlTagSpan | null)[], originals: (string | null)[], descriptors: (HtmlTagDescriptor | null)[], anchors: HtmlAnchors }} HtmlModel */
-/** @typedef {import("../Chunk")} Chunk */
-/** @typedef {import("../Compilation")} Compilation */
+/** @import Chunk from "../Chunk" */
+/** @import Compilation, { DependencyConstructor } from "../Compilation" */
 /** @typedef {boolean | string[] | ((asset: { chunk: Chunk, filename: string }) => string[] | false)} HtmlIntegrity */
-/** @typedef {import("../Compilation").DependencyConstructor} DependencyConstructor */
-/** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
-/** @typedef {import("../Dependency")} Dependency */
-/** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
-/** @typedef {import("../Generator").GenerateContext} GenerateContext */
-/** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
-/** @typedef {import("../Module").SourceType} SourceType */
-/** @typedef {import("../Module").SourceTypes} SourceTypes */
-/** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
-/** @typedef {import("../ModuleGraph")} ModuleGraph */
-/** @typedef {import("../NormalModule")} NormalModule */
-/** @typedef {import("./HtmlModule").HtmlModuleBuildInfo} HtmlModuleBuildInfo */
-/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
-/** @typedef {import("../RuntimeTemplate")} RuntimeTemplate */
-/** @typedef {import("../util/Hash")} Hash */
+/** @import CodeGenerationResults from "../CodeGenerationResults" */
+/** @import Dependency from "../Dependency" */
+/** @import { DependencyTemplateContext } from "../DependencyTemplate" */
+/** @import { GenerateContext, UpdateHashContext } from "../Generator" */
+/**
+ * @import Module, {
+ * 	SourceType,
+ * 	SourceTypes,
+ * 	ConcatenationBailoutReasonContext,
+ * 	RuntimeRequirements
+ * } from "../Module"
+ */
+/** @import ModuleGraph from "../ModuleGraph" */
+/** @import NormalModule from "../NormalModule" */
+/** @import { HtmlModuleBuildInfo } from "./HtmlModule" */
+/** @import RuntimeTemplate from "../RuntimeTemplate" */
+/** @import Hash from "../util/Hash" */
 /**
  * @template T
  * @typedef {import("../InitFragment")<T>} InitFragment
@@ -201,6 +192,27 @@ const getChunksById = (compilation) => {
 	return chunksById;
 };
 
+/** @type {WeakMap<Compilation, Map<string, Module>>} */
+const modulesByIdentifierCache = new WeakMap();
+
+/**
+ * `module.identifier()` → module lookup, memoized per compilation so the asset
+ * URL sentinel resolver doesn't re-scan the whole module graph per HTML module.
+ * @param {Compilation} compilation compilation
+ * @returns {Map<string, Module>} modules keyed by identifier
+ */
+const getModulesByIdentifier = (compilation) => {
+	let modulesByIdentifier = modulesByIdentifierCache.get(compilation);
+	if (modulesByIdentifier === undefined) {
+		modulesByIdentifier = new Map();
+		for (const module of compilation.modules) {
+			modulesByIdentifier.set(module.identifier(), module);
+		}
+		modulesByIdentifierCache.set(compilation, modulesByIdentifier);
+	}
+	return modulesByIdentifier;
+};
+
 // Hoisted so `resolveChunkUrlSentinels` (per chunk × module) doesn't allocate a
 // fresh `RegExp` each call. `String#replace` resets `lastIndex`, so sharing the
 // global-flag instance is safe under these synchronous, non-reentrant calls.
@@ -222,15 +234,23 @@ const HTML_PAGE_URL_SENTINEL_REGEXP =
 const ASSET_URL_SENTINEL_REGEXP =
 	/__WEBPACK_HTML_ASSET_URL__([0-9a-f]+)__END__/g;
 
+// Compilations whose HTML modules must emit SRI sentinels (see
+// `enableIntegritySentinels`).
+/** @type {WeakSet<Compilation>} */
+const integritySentinelCompilations = new WeakSet();
+
 // Matches the whole ` integrity="<sentinel>"` so the attribute can be dropped
-// entirely when the per-asset `integrity` function returns `false`.
+// entirely when the per-asset `integrity` function returns `false`. Minification
+// runs first and may have unquoted the value (§13.1.2.3), so the quote is
+// optional and back-referenced to keep the pair matched; the replacement always
+// re-quotes, since an SRI list carries spaces and `=` padding.
 const INTEGRITY_SENTINEL_REGEXP =
-	/ integrity="__WEBPACK_HTML_INTEGRITY__([0-9a-f]+)__([a-z]+)__END__"/g;
+	/ integrity=(["']?)__WEBPACK_HTML_INTEGRITY__([0-9a-f]+)__([a-z]+)__END__\1/g;
 
 // Same attribute, but tolerant of the `\"` escaping the surrounding quotes get
 // when the HTML lives inside a JS string literal — used only to strip it there.
 const INTEGRITY_SENTINEL_STRIP_REGEXP =
-	/ integrity=\\?"__WEBPACK_HTML_INTEGRITY__[0-9a-f]+__[a-z]+__END__\\?"/g;
+	/ integrity=(\\?["']|)__WEBPACK_HTML_INTEGRITY__[0-9a-f]+__[a-z]+__END__\1/g;
 
 // The trailing `(?:__<hash>)?` is the inlined chunk's content hash, embedded by
 // `embedInlineChunkHashes` so the host HTML's bytes (and its `[contenthash]`,
@@ -331,7 +351,7 @@ class HtmlGenerator extends Generator {
 				// handling included), mirroring the CSS branch.
 				let filenameTemplate;
 				if (contentHashType === "css") {
-					filenameTemplate = getCssModulesPlugin().getChunkFilenameTemplate(
+					filenameTemplate = CssModulesPlugin.getChunkFilenameTemplate(
 						chunk,
 						outputOptions
 					);
@@ -413,9 +433,7 @@ class HtmlGenerator extends Generator {
 	 */
 	static resolveAssetUrlSentinels(content, compilation) {
 		if (!content.includes("__WEBPACK_HTML_ASSET_URL__")) return content;
-		/** @type {Map<string, import("../Module")>} */
-		const byIdentifier = new Map();
-		for (const m of compilation.modules) byIdentifier.set(m.identifier(), m);
+		const byIdentifier = getModulesByIdentifier(compilation);
 		const codeGenerationResults =
 			/** @type {import("../CodeGenerationResults")} */
 			(compilation.codeGenerationResults);
@@ -443,6 +461,26 @@ class HtmlGenerator extends Generator {
 		});
 	}
 
+	/**
+	 * Turns SRI sentinel emission on for this compilation. Tags are generated
+	 * once per HTML module, but one module can back several pages with different
+	 * `integrity` options, so HtmlModulesPlugin flags the compilation when any
+	 * page wants SRI and each page resolves or strips the sentinels on emit.
+	 * @param {Compilation} compilation compilation
+	 * @returns {void}
+	 */
+	static enableIntegritySentinels(compilation) {
+		integritySentinelCompilations.add(compilation);
+	}
+
+	/**
+	 * @param {Compilation} compilation compilation
+	 * @returns {boolean} true when SRI sentinels must be emitted
+	 */
+	static hasIntegritySentinels(compilation) {
+		return integritySentinelCompilations.has(compilation);
+	}
+
 	/**
 	 * Emit a sentinel for a chunk's SRI hash. Resolved late (after
 	 * `RealContentHashPlugin`) by `resolveChunkIntegritySentinels`, since the
@@ -489,7 +527,7 @@ class HtmlGenerator extends Generator {
 		const chunksById = getChunksById(compilation);
 		return content.replace(
 			INTEGRITY_SENTINEL_REGEXP,
-			(_, hexId, contentHashType) => {
+			(_, _quote, hexId, contentHashType) => {
 				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
 				const chunk = chunksById.get(chunkId);
 				if (!chunk) return "";
@@ -640,6 +678,7 @@ class HtmlGenerator extends Generator {
 		// `skip.text` populates `contentEnd` (raw-text body end) without
 		// materializing text nodes; `</script` stays escaped, so CSP hashes match
 		// the exact bytes the browser sees.
+		const { NodeType, SourceProcessor } = getHtmlSyntax();
 		new SourceProcessor()
 			.use({
 				[NodeType.Element]: {
@@ -648,11 +687,23 @@ class HtmlGenerator extends Generator {
 						if (name === "head") {
 							if (headOpen < 0) headOpen = headEnd = path.tagEnd();
 							headDepth++;
+						} else if (name === "body") {
+							if (bodyOpen < 0) bodyOpen = bodyEnd = path.tagEnd();
+							bodyDepth++;
+						}
+					},
+					// Collected on exit: an element's `end` is only final once it
+					// closes, and the streamed walk enters it while it is still open.
+					// `script` / `style` / `link` / `meta` never nest in each other, so
+					// exiting keeps them in source order.
+					exit: (path) => {
+						const name = path.tagName();
+						if (name === "head") {
+							if (headDepth > 0) headDepth--;
 							return;
 						}
 						if (name === "body") {
-							if (bodyOpen < 0) bodyOpen = bodyEnd = path.tagEnd();
-							bodyDepth++;
+							if (bodyDepth > 0) bodyDepth--;
 							return;
 						}
 						const end = path.end();
@@ -693,14 +744,6 @@ class HtmlGenerator extends Generator {
 						});
 						originals.push(snapshotAttrs(attrs));
 						descriptors.push(null);
-					},
-					exit: (path) => {
-						const name = path.tagName();
-						if (name === "head") {
-							if (headDepth > 0) headDepth--;
-						} else if (name === "body" && bodyDepth > 0) {
-							bodyDepth--;
-						}
 					}
 				}
 			})
@@ -743,14 +786,16 @@ class HtmlGenerator extends Generator {
 	 * `*-prepend`), or had its `attrs` changed; and — when `csp` is set and the
 	 * page declares no CSP — a strict `<meta http-equiv="Content-Security-Policy">`
 	 * is injected with a hash of every inline `<script>`/`<style>` (page's own and
-	 * injected) plus an optional placeholder `nonce` on each. Edits run
-	 * right-to-left; at a shared offset a delete/replace runs before an insert.
+	 * injected) plus an optional placeholder `nonce` on each. Edits are applied
+	 * in one ascending pass; at a shared offset an insert is emitted before a
+	 * delete/replace's text.
 	 * @param {string} content the collected HTML (inline content already resolved)
 	 * @param {HtmlModel} model the value from `collectHtml` after the hooks
 	 * @param {CspOption} csp the `output.html.csp` option
 	 * @returns {string} the rendered HTML
 	 */
 	static renderHtml(content, model, csp) {
+		const { escapeAttribute } = getHtmlSyntax();
 		const { tags, spans, originals, descriptors, anchors } = model;
 		// CSP setup: an author-declared policy (page's own or injected) wins.
 		const options = csp ? (csp === true ? {} : csp) : undefined;
@@ -950,14 +995,20 @@ class HtmlGenerator extends Generator {
 			edits.push({ start: pos, end: pos, text, insert: true });
 		}
 		if (edits.length === 0) return content;
+		// Ascending single pass over the (non-overlapping) edits — O(page + edits)
+		// instead of two full-page copies per edit; the tie-break reproduces the
+		// former right-to-left order (insert text lands before a replacement's).
 		edits.sort(
-			(a, b) => b.start - a.start || Number(a.insert) - Number(b.insert)
+			(a, b) => a.start - b.start || Number(b.insert) - Number(a.insert)
 		);
-		let result = content;
+		let result = "";
+		let cursor = 0;
 		for (const edit of edits) {
-			result = result.slice(0, edit.start) + edit.text + result.slice(edit.end);
+			result += content.slice(cursor, edit.start);
+			result += edit.text;
+			if (edit.end > cursor) cursor = edit.end;
 		}
-		return result;
+		return result + content.slice(cursor);
 	}
 
 	/**
@@ -1273,8 +1324,18 @@ class HtmlGenerator extends Generator {
 			);
 		}
 
-		// JS export: resolve `[webpack/auto]` to root-relative URLs.
-		const generated = this._renderHtml(module, generateContext, "");
+		// JS export: resolve `[webpack/auto]` to root-relative URLs. No `.html`
+		// asset carries this markup, so an asset-level minimizer never sees it.
+		const embedded =
+			generateContext.runtimeTemplate.compilation._resolveEmbeddedSource(
+				new RawSource(this._renderHtml(module, generateContext, "")),
+				{ type: HTML_TYPE, hostType: JAVASCRIPT_TYPE, module }
+			);
+		const embeddedSource = embedded.source();
+		const generated =
+			typeof embeddedSource === "string"
+				? embeddedSource
+				: embeddedSource.toString("utf8");
 
 		/** @type {string} */
 		let sourceContent;
@@ -1329,13 +1390,21 @@ class HtmlGenerator extends Generator {
 	 * exactly as a full page reload would render them.
 	 *
 	 * `<head>` changes beyond `<title>` (a new `<meta>`, a swapped
-	 * `<link rel=icon>`, an inline `<style>` block, …) can't be safely
-	 * DOM-patched: webpack injects its own runtime scripts and stylesheet
-	 * links into the head on initial load, and blindly replacing
-	 * `document.head.innerHTML` would tear them down. So the shim falls
-	 * back to a full reload — fine in a dev-server context because the
-	 * regular (non-hot-update) `page.html` chunk is re-emitted on every
-	 * rebuild, so the reloaded page picks up the new head.
+	 * `<link rel=icon>`, an inline `<style>` block, …) are applied as a
+	 * delta against the previous evaluation's authored head. Replacing
+	 * `document.head.innerHTML` wholesale would tear down the runtime
+	 * scripts and stylesheet links webpack injects there on initial load;
+	 * a delta cannot, since those appear in neither authored head. An
+	 * added `<script>` is re-created before it is inserted, so it runs the
+	 * way the reload this replaces would have run it, and every addition
+	 * lands at its authored position rather than at the end. Two edits are
+	 * still worth reloading for: a removed `<script>` the browser *executed*,
+	 * since one that has run cannot be un-run (a removed data block such as
+	 * `application/ld+json` never ran, so it is patched like any other
+	 * element), and a reordering of elements the delta cannot
+	 * express — fine in a dev-server context because the regular
+	 * (non-hot-update) `page.html` chunk is re-emitted on every rebuild,
+	 * so the reloaded page picks up the new head.
 	 * @param {NormalModule} module module
 	 * @param {string} html the rewritten HTML content (with placeholders resolved)
 	 * @param {boolean} extracting whether the HTML module is being extracted as a real `.html` file
@@ -1344,6 +1413,7 @@ class HtmlGenerator extends Generator {
 	 */
 	_renderHmrShim(module, html, extracting, runtimeTemplate) {
 		const declare = runtimeTemplate.renderConst();
+		const mutable = runtimeTemplate.renderLet();
 		const acceptBlock = extracting
 			? [
 					"module.hot.accept();",
@@ -1389,10 +1459,151 @@ class HtmlGenerator extends Generator {
 							'return head === null ? "" : __webpack_mask_comments__(head).replace(/<title[^>]*>[\\s\\S]*?<\\/title>/i, "").trim();'
 						]
 					)};`,
+					// The authored head's elements, parsed but detached.
+					`${declare} __webpack_head_children__ = ${runtimeTemplate.basicFunction(
+						"html",
+						[
+							`${declare} container = document.createElement("head");`,
+							"container.innerHTML = html;",
+							"return Array.prototype.slice.call(container.children);"
+						]
+					)};`,
+					// A `<script>` parsed out of a string carries the already-started flag,
+					// so appending that element would never run it. A fresh one with the
+					// same attributes and body does — which is what the reload this
+					// replaces would have done.
+					`${declare} __webpack_revive_script__ = ${runtimeTemplate.basicFunction(
+						"node",
+						[
+							'if (node.nodeName !== "SCRIPT") return node;',
+							`${declare} script = document.createElement("script");`,
+							`${declare} attributes = node.attributes;`,
+							`for (${mutable} i = 0; i < attributes.length; i++) {`,
+							Template.indent(
+								"script.setAttribute(attributes[i].name, attributes[i].value);"
+							),
+							"}",
+							"script.textContent = node.textContent;",
+							"return script;"
+						]
+					)};`,
+					// Apply only the difference between the two authored heads, keyed on
+					// serialized markup: the runtime's own injected `<script>` / `<link>`
+					// are in neither string, so replacing `document.head` wholesale would
+					// tear them down while a delta never touches them. Reports whether it
+					// could — the caller reloads when it could not.
+					`${declare} __webpack_patch_head__ = ${runtimeTemplate.basicFunction(
+						"oldHtml, newHtml",
+						[
+							"if (!document.head) return false;",
+							`${declare} oldChildren = __webpack_head_children__(oldHtml);`,
+							`${declare} newChildren = __webpack_head_children__(newHtml);`,
+							`${declare} count = ${runtimeTemplate.basicFunction("nodes", [
+								`${declare} counts = {};`,
+								`for (${mutable} i = 0; i < nodes.length; i++) {`,
+								Template.indent([
+									`${declare} key = "$" + nodes[i].outerHTML;`,
+									"counts[key] = (counts[key] || 0) + 1;"
+								]),
+								"}",
+								"return counts;"
+							])};`,
+							// An element present the same number of times on both sides is
+							// untouched; whatever is left over on one side is the delta.
+							`${declare} surplus = ${runtimeTemplate.basicFunction(
+								"nodes, others",
+								[
+									`${declare} counts = count(others);`,
+									`${declare} out = [];`,
+									`for (${mutable} i = 0; i < nodes.length; i++) {`,
+									Template.indent([
+										`${declare} key = "$" + nodes[i].outerHTML;`,
+										"if (counts[key] > 0) counts[key]--; else out.push(nodes[i]);"
+									]),
+									"}",
+									"return out;"
+								]
+							)};`,
+							`${declare} removed = surplus(oldChildren, newChildren);`,
+							`${declare} added = surplus(newChildren, oldChildren);`,
+							"if (removed.length === 0 && added.length === 0) return true;",
+							// A script that has run cannot be un-run, so dropping one is the
+							// one edit still worth a reload — but only a script that ran. A
+							// `type` that is neither a JavaScript MIME type nor `module` /
+							// `importmap` / `speculationrules` makes the element a data block
+							// (`application/ld+json`, `text/template`, …) the browser never
+							// executed, so removing it is as safe as removing a `<meta>`.
+							// Every JavaScript MIME essence ends in `script`, and a type
+							// nothing here recognizes falls back to the reload.
+							`if (removed.some(${runtimeTemplate.basicFunction("node", [
+								'if (node.nodeName !== "SCRIPT") return false;',
+								`${declare} type = (node.getAttribute("type") || "").trim().toLowerCase();`,
+								'return type === "" || type.indexOf("script") !== -1 || type === "module" || type === "importmap" || type === "speculationrules";'
+							])})) return false;`,
+							// Resolve every removal before mutating, so a node the page
+							// dropped on its own leaves the head as it was.
+							`${declare} live = [];`,
+							`for (${mutable} i = 0; i < removed.length; i++) {`,
+							Template.indent([
+								`${declare} key = removed[i].outerHTML;`,
+								`${mutable} match = null;`,
+								`for (${mutable} j = 0; j < document.head.children.length; j++) {`,
+								Template.indent([
+									`${declare} child = document.head.children[j];`,
+									"if (child.outerHTML === key && live.indexOf(child) === -1) { match = child; break; }"
+								]),
+								"}",
+								"if (match === null) return false;",
+								"live.push(match);"
+							]),
+							"}",
+							`for (${mutable} i = 0; i < live.length; i++) document.head.removeChild(live[i]);`,
+							// Pair each retained element with its live node, scanning only
+							// forward: an authored element that has moved relative to the
+							// others finds no match from there on, and a reorder the delta
+							// cannot express falls back to the reload. Injected nodes simply
+							// never match, so they neither anchor nor block anything.
+							`${declare} liveByNew = [];`,
+							`${mutable} searchFrom = 0;`,
+							`for (${mutable} i = 0; i < newChildren.length; i++) {`,
+							Template.indent([
+								"if (added.indexOf(newChildren[i]) !== -1) { liveByNew.push(null); continue; }",
+								`${declare} key = newChildren[i].outerHTML;`,
+								`${mutable} match = null;`,
+								`for (${mutable} j = searchFrom; j < document.head.children.length; j++) {`,
+								Template.indent([
+									`${declare} child = document.head.children[j];`,
+									"if (child.outerHTML === key) { match = child; searchFrom = j + 1; break; }"
+								]),
+								"}",
+								"if (match === null) return false;",
+								"liveByNew.push(match);"
+							]),
+							"}",
+							// Back to front, so the element an addition must precede is
+							// already placed by the time it is needed.
+							`for (${mutable} i = newChildren.length - 1; i >= 0; i--) {`,
+							Template.indent([
+								"if (liveByNew[i] !== null) continue;",
+								`${mutable} anchor = null;`,
+								`for (${mutable} j = i + 1; j < newChildren.length; j++) {`,
+								Template.indent(
+									"if (liveByNew[j] !== null) { anchor = liveByNew[j]; break; }"
+								),
+								"}",
+								`${declare} node = __webpack_revive_script__(newChildren[i]);`,
+								"if (anchor === null) document.head.appendChild(node);",
+								"else document.head.insertBefore(node, anchor);",
+								"liveByNew[i] = node;"
+							]),
+							"}",
+							"return true;"
+						]
+					)};`,
 					"if (module.hot.data && typeof document !== 'undefined') {",
 					Template.indent([
 						`${declare} __webpack_new_head__ = __webpack_extract_head__();`,
-						"if (module.hot.data.__webpack_head__ !== undefined && __webpack_new_head__ !== module.hot.data.__webpack_head__ && typeof window !== 'undefined' && window.location && typeof window.location.reload === 'function') {",
+						"if (module.hot.data.__webpack_head__ !== undefined && __webpack_new_head__ !== module.hot.data.__webpack_head__ && !__webpack_patch_head__(module.hot.data.__webpack_head__, __webpack_new_head__) && typeof window !== 'undefined' && window.location && typeof window.location.reload === 'function') {",
 						Template.indent("window.location.reload();"),
 						"} else {",
 						Template.indent([
@@ -1437,7 +1648,7 @@ class HtmlGenerator extends Generator {
 				.replace(/-{2,}/g, (m) => `${"-".repeat(m.length - 1)} `);
 			return new RawSource(`<!-- webpack error: ${safe} -->`);
 		}
-		return new RawSource(`throw new Error(${JSON.stringify(error.message)});`);
+		return new RawSource(Generator.throwBuildErrorCode(error));
 	}
 
 	/**
@@ -1464,6 +1675,15 @@ class HtmlGenerator extends Generator {
 		if (updateHashContext.module.hot) {
 			hash.update("hot");
 		}
+		// A `renderEmbeddedSource` tap has to reach the codegen cache key, or a
+		// changed option replays the output from before it.
+		const { runtimeTemplate } = updateHashContext;
+		if (runtimeTemplate) {
+			runtimeTemplate.compilation.hooks.embeddedSourceHash.call(
+				updateHashContext.module,
+				hash
+			);
+		}
 	}
 }
 

package/lib/html/HtmlModule.js

@@ -7,9 +7,13 @@
 const NormalModule = require("../NormalModule");
 const makeSerializable = require("../util/makeSerializable");
 
-/** @typedef {import("../NormalModule").NormalModuleBuildInfo} NormalModuleBuildInfo */
-/** @typedef {import("../NormalModule").NormalModuleCreateData} NormalModuleCreateData */
-/** @typedef {import("./HtmlModulesPlugin").HtmlEntryInfo} HtmlEntryInfo */
+/**
+ * @import {
+ * 	NormalModuleBuildInfo,
+ * 	NormalModuleCreateData
+ * } from "../NormalModule"
+ */
+/** @import { HtmlEntryInfo } from "./HtmlModulesPlugin" */
 
 /**
  * Defines the build info properties specific to html modules.