webpack 5.111.0 → 5.112.0

package/lib/html/HtmlGenerator.js

@@ -5,18 +5,18 @@
 "use strict";
 
 const { RawSource, ReplaceSource } = require("webpack-sources");
-const ConcatenationScope = require("../ConcatenationScope");
-const Generator = require("../Generator");
+const CssModulesPlugin = require("../css/CssModulesPlugin");
+const WebpackError = require("../errors/WebpackError");
+const Generator = require("../module/Generator");
 const {
 	HTML_TYPE,
 	HTML_TYPES,
 	JAVASCRIPT_TYPE,
 	JAVASCRIPT_TYPES
-} = require("../ModuleSourceTypeConstants");
-const RuntimeGlobals = require("../RuntimeGlobals");
-const Template = require("../Template");
-const CssModulesPlugin = require("../css/CssModulesPlugin");
-const WebpackError = require("../errors/WebpackError");
+} = require("../module/ModuleSourceTypeConstants");
+const ConcatenationScope = require("../optimize/ConcatenationScope");
+const RuntimeGlobals = require("../runtime/RuntimeGlobals");
+const Template = require("../template/Template");
 const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 const { PUBLIC_PATH_AUTO } = require("../util/publicPathPlaceholder");
@@ -24,7 +24,9 @@ const { VOID } = require("./data");
 
 const getCreateNodeHash = memoize(() => require("crypto").createHash);
 
-const getCssSyntax = memoize(() => require("../css/syntax"));
+const getCssParser = memoize(() => require("../css/syntax-parser"));
+
+const getHtmlParser = memoize(() => require("./syntax-parser"));
 
 const getHtmlSyntax = memoize(() => require("./syntax"));
 
@@ -48,7 +50,7 @@ const getHtmlSyntax = memoize(() => require("./syntax"));
 const serializeAttrs = (attrs) => {
 	let out = "";
 	if (attrs) {
-		const { escapeAttribute } = getHtmlSyntax();
+		const { escapeAttribute } = getHtmlParser();
 		for (const name of Object.keys(attrs)) {
 			const value = attrs[name];
 			if (value === false || value === undefined || value === null) continue;
@@ -128,6 +130,7 @@ const metaIsCsp = (attrs) => {
 /** @import { Source } from "webpack-sources" */
 /** @import { HtmlGeneratorOptions } from "../../declarations/WebpackOptions" */
 /** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["csp"]} CspOption */
+/** @typedef {import("../../declarations/WebpackOptions").OutputNormalized["html"]} HtmlOption */
 /** @import { HtmlTagDescriptor, HtmlMutableTag } from "./HtmlModulesPlugin" */
 /** @typedef {"head" | "body"} HtmlTagLocation */
 /**
@@ -142,29 +145,29 @@ 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 */
-/** @import Chunk from "../Chunk" */
+/** @import Chunk from "../graph/Chunk" */
 /** @import Compilation, { DependencyConstructor } from "../Compilation" */
 /** @typedef {boolean | string[] | ((asset: { chunk: Chunk, filename: string }) => string[] | false)} HtmlIntegrity */
-/** @import CodeGenerationResults from "../CodeGenerationResults" */
-/** @import Dependency from "../Dependency" */
-/** @import { DependencyTemplateContext } from "../DependencyTemplate" */
-/** @import { GenerateContext, UpdateHashContext } from "../Generator" */
+/** @import CodeGenerationResults from "../module/CodeGenerationResults" */
+/** @import Dependency from "../graph/Dependency" */
+/** @import { DependencyTemplateContext } from "../template/DependencyTemplate" */
+/** @import { GenerateContext, UpdateHashContext } from "../module/Generator" */
 /**
  * @import Module, {
  * 	SourceType,
  * 	SourceTypes,
  * 	ConcatenationBailoutReasonContext,
  * 	RuntimeRequirements
- * } from "../Module"
+ * } from "../module/Module"
  */
-/** @import ModuleGraph from "../ModuleGraph" */
-/** @import NormalModule from "../NormalModule" */
+/** @import ModuleGraph from "../graph/ModuleGraph" */
+/** @import NormalModule from "../module/NormalModule" */
 /** @import { HtmlModuleBuildInfo } from "./HtmlModule" */
-/** @import RuntimeTemplate from "../RuntimeTemplate" */
+/** @import RuntimeTemplate from "../template/RuntimeTemplate" */
 /** @import Hash from "../util/Hash" */
 /**
  * @template T
- * @typedef {import("../InitFragment")<T>} InitFragment
+ * @typedef {import("../template/InitFragment")<T>} InitFragment
  */
 
 /**
@@ -226,12 +229,9 @@ const CHUNK_URL_SENTINEL_REGEXP =
 const HTML_PAGE_URL_SENTINEL_REGEXP =
 	/__WEBPACK_HTML_PAGE_URL__([0-9a-f]+)__END__/g;
 
-// Sentinel for a URL-referenced asset (font/image/…) emitted into a resource-hint
-// `<link>` tag by `HtmlEntryDependency`; resolved to the asset's real emitted
-// URL from its codegen data during `HtmlModulesPlugin` render. Deferred because
-// HtmlEntry deps run *while* the HTML module is being codegen'd — the asset
-// module's own codegen might not have completed yet. Keyed by the asset
-// module's identifier, hex-encoded so any character in it is safe in a URL.
+// Sentinel for a URL-referenced asset in a resource-hint `<link>`, resolved at
+// `HtmlModulesPlugin` render because HtmlEntry deps run while the HTML module
+// is codegen'd, before the asset's own. Keyed by hex-encoded identifier.
 const ASSET_URL_SENTINEL_REGEXP =
 	/__WEBPACK_HTML_ASSET_URL__([0-9a-f]+)__END__/g;
 
@@ -240,11 +240,9 @@ const ASSET_URL_SENTINEL_REGEXP =
 /** @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`. 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.
+// Matches the whole ` integrity="<sentinel>"`, so the attribute can be dropped
+// when the per-asset `integrity` returns `false`. Minification runs first and
+// may have unquoted it, hence the optional back-referenced quote.
 const INTEGRITY_SENTINEL_REGEXP =
 	/ integrity=(["']?)__WEBPACK_HTML_INTEGRITY__([0-9a-f]+)__([a-z]+)__END__\1/g;
 
@@ -253,12 +251,15 @@ const INTEGRITY_SENTINEL_REGEXP =
 const INTEGRITY_SENTINEL_STRIP_REGEXP =
 	/ 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]`,
-// incl. RealContentHashPlugin's recompute) change with the inlined content; the
-// resolver ignores it.
+// The trailing `(?:__<hash>)?` is the inlined chunk's content hash, embedded so
+// the host page's bytes and `[contenthash]` change with the inlined content.
+// The resolver ignores it.
 const INLINE_SENTINEL_REGEXP =
 	/__WEBPACK_HTML_INLINE__([0-9a-f]+)__([a-z]+)(?:__[0-9a-f]+)?__END__/g;
+// The same, with the `;` a minifier ends the sentinel's statement with, which a
+// chunk ending in its own `;` would double.
+const INLINE_SENTINEL_STATEMENT_REGEXP =
+	/__WEBPACK_HTML_INLINE__([0-9a-f]+)__([a-z]+)(?:__[0-9a-f]+)?__END__(;?)/g;
 
 /**
  * Rewrite relative `url(...)` references in a CSS chunk so they still resolve
@@ -278,7 +279,7 @@ const rebaseCssUrls = (css, fromFile, toFile, outputPath) => {
 	const fromUndo = getUndoPath(fromFile, outputPath, false);
 	const toUndo = getUndoPath(toFile, outputPath, false);
 	if (fromUndo === toUndo) return css;
-	const { readToken, TT_URL } = getCssSyntax();
+	const { readToken, TokenType } = getCssParser();
 	const token = {
 		type: 0,
 		start: 0,
@@ -293,7 +294,7 @@ const rebaseCssUrls = (css, fromFile, toFile, outputPath) => {
 	let out = "";
 	while (readToken(css, pos, token) !== undefined) {
 		pos = token.end;
-		if (token.type !== TT_URL) continue;
+		if (token.type !== TokenType.Url) continue;
 		const url = css.slice(token.contentStart, token.contentEnd);
 		// Rebase only the undo-path-relative urls; a root-relative (`/`), fragment
 		// (`#`) or scheme (`data:`, …, a `:` before any `/`) url is absolute.
@@ -365,7 +366,7 @@ class HtmlGenerator extends Generator {
 					);
 				}
 				const filename = compilation.getPath(
-					/** @type {import("../TemplatedPathPlugin").TemplatePath} */
+					/** @type {import("../template/TemplatedPathPlugin").TemplatePath} */
 					(filenameTemplate),
 					{
 						chunk,
@@ -436,7 +437,7 @@ class HtmlGenerator extends Generator {
 		if (!content.includes("__WEBPACK_HTML_ASSET_URL__")) return content;
 		const byIdentifier = getModulesByIdentifier(compilation);
 		const codeGenerationResults =
-			/** @type {import("../CodeGenerationResults")} */
+			/** @type {import("../module/CodeGenerationResults")} */
 			(compilation.codeGenerationResults);
 		return content.replace(ASSET_URL_SENTINEL_REGEXP, (_, hex) => {
 			const id = Buffer.from(hex, "hex").toString("utf8");
@@ -449,12 +450,9 @@ class HtmlGenerator extends Generator {
 			const url =
 				/** @type {Record<string, string | undefined> | undefined} */
 				(data.get("url"));
-			// Prefer the `asset-url` channel — it's the actual URL string
-			// (publicPath + filename). Also handled: assets reached only from JS
-			// have no `asset-url` channel (their only URL is the JS expression
-			// `__webpack_require__.p + "…"`); for those we reconstruct the URL
-			// from the emitted `filename` + `PUBLIC_PATH_AUTO` so the same
-			// undo-path substitution runs at asset render.
+			// Prefer the `asset-url` channel, which is the real URL string. An asset
+			// reached only from JS has none — its URL is a JS expression — so rebuild
+			// one from `filename` and let the undo-path substitution run.
 			if (url && url["asset-url"]) return url["asset-url"];
 			const filename = /** @type {string | undefined} */ (data.get("filename"));
 			if (filename) return `${PUBLIC_PATH_AUTO}${filename}`;
@@ -584,6 +582,51 @@ class HtmlGenerator extends Generator {
 		);
 	}
 
+	/**
+	 * Whether a chunk's content may be written into the page at all. An ES
+	 * module chunk another group loads the runtime from must stay a file, or
+	 * the page would run two copies of it.
+	 * @param {Compilation} compilation the compilation
+	 * @param {Chunk} chunk chunk to test
+	 * @returns {boolean} false when the chunk has to stay a separate file
+	 */
+	static canInlineChunk(compilation, chunk) {
+		if (compilation.outputOptions.module !== true) return true;
+		for (const group of chunk.groupsIterable) {
+			if (group.getChildren().length > 0) return false;
+		}
+		return true;
+	}
+
+	/**
+	 * Whether `output.html.inline` writes a chunk's content into the page rather
+	 * than referencing it. The string forms select by asset type, since a
+	 * chunk's JavaScript and CSS share one name.
+	 * @param {HtmlOption} htmlOption the `output.html` option
+	 * @param {Chunk} chunk chunk to test
+	 * @param {"javascript" | "css"} contentType which asset of the chunk is emitted
+	 * @returns {boolean} true when that content is written into the page
+	 */
+	static isChunkInlined(htmlOption, chunk, contentType) {
+		const inlineOption =
+			typeof htmlOption === "object" ? htmlOption.inline : undefined;
+		if (!inlineOption) return false;
+		if (inlineOption === true) return true;
+		if (inlineOption === "script") return contentType === "javascript";
+		if (inlineOption === "style") return contentType === "css";
+		// A tag's chunk is named after its page, so the template it emits under is
+		// matched too; a global pattern carries `lastIndex`, so it is reset.
+		const name = chunk.name || String(chunk.id);
+		const { filenameTemplate } = chunk;
+		return inlineOption.some((re) => {
+			re.lastIndex = 0;
+			if (re.test(name)) return true;
+			if (typeof filenameTemplate !== "string") return false;
+			re.lastIndex = 0;
+			return re.test(filenameTemplate);
+		});
+	}
+
 	/**
 	 * @param {Chunk} chunk chunk
 	 * @param {"javascript" | "css"} contentHashType which chunk asset to inline
@@ -614,11 +657,11 @@ class HtmlGenerator extends Generator {
 		const chunksById = getChunksById(compilation);
 		const outputPath = /** @type {string} */ (compilation.outputOptions.path);
 		return content.replace(
-			INLINE_SENTINEL_REGEXP,
-			(_, hexId, contentHashType) => {
+			INLINE_SENTINEL_STATEMENT_REGEXP,
+			(_, hexId, contentHashType, terminator) => {
 				const chunkId = Buffer.from(hexId, "hex").toString("utf8");
 				const chunk = chunksById.get(chunkId);
-				if (!chunk) return "";
+				if (!chunk) return terminator;
 				const isCss = contentHashType === "css";
 				let out = "";
 				for (const file of chunk.files) {
@@ -644,7 +687,7 @@ class HtmlGenerator extends Generator {
 					out += raw;
 					if (inlinedFiles) inlinedFiles.add(file);
 				}
-				return out;
+				return out.endsWith(";") ? out : out + terminator;
 			}
 		);
 	}
@@ -679,26 +722,36 @@ 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();
+		const { Field, Flag, NodeType, Part } = getHtmlParser();
+		const { SourceProcessor } = getHtmlSyntax();
+		/**
+		 * Where an element's content starts; a parser-inserted one has no tag, so
+		 * its content starts where it does.
+		 * @param {import("./syntax-parser").HtmlPath} path the element's path
+		 * @returns {number} the offset
+		 */
+		const contentStart = (path) => {
+			const start = path.startOf(Part.content);
+			return start === -1 ? path.start() : start;
+		};
 		new SourceProcessor()
 			.use({
 				[NodeType.Element]: {
 					enter: (path) => {
-						const name = path.tagName();
+						const name = path.name();
 						if (name === "head") {
-							if (headOpen < 0) headOpen = headEnd = path.tagEnd();
+							if (headOpen < 0) headOpen = headEnd = contentStart(path);
 							headDepth++;
 						} else if (name === "body") {
-							if (bodyOpen < 0) bodyOpen = bodyEnd = path.tagEnd();
+							if (bodyOpen < 0) bodyOpen = bodyEnd = contentStart(path);
 							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.
+					// Collected on exit, since an element's `end` is final only once it
+					// closes. `script`, `style`, `link` and `meta` never nest in each
+					// other, so exiting keeps them in source order.
 					exit: (path) => {
-						const name = path.tagName();
+						const name = path.name();
 						if (name === "head") {
 							if (headDepth > 0) headDepth--;
 							return;
@@ -720,13 +773,14 @@ class HtmlGenerator extends Generator {
 						}
 						/** @type {Record<string, string | boolean | undefined>} */
 						const attrs = {};
-						const count = path.attributeCount();
+						const count = path.fieldCount(Field.attributes);
 						for (let i = 0; i < count; i++) {
-							const attr = path.attributeAt(i);
-							attrs[path.attributeName(attr)] =
-								path.attributeValueStart(attr) === -1
+							const attr = path.field(i, Field.attributes);
+							const valueStart = path.startOf(Part.value, attr);
+							attrs[path.name(attr)] =
+								valueStart === -1
 									? true
-									: path.attributeValue(attr);
+									: path.source(valueStart, path.endOf(Part.value, attr));
 						}
 						const isRawText = name === "script" || name === "style";
 						tags.push({
@@ -736,12 +790,12 @@ class HtmlGenerator extends Generator {
 						});
 						spans.push({
 							start: path.start(),
-							openEnd: path.tagEnd(),
+							openEnd: path.startOf(Part.content),
 							end,
 							location: bodyDepth > 0 ? "body" : "head",
-							nameEnd: isRawText ? path.nameEnd() : -1,
-							contentEnd: isRawText ? path.contentEnd() : -1,
-							selfClosing: path.selfClosing()
+							nameEnd: isRawText ? path.endOf(Part.name) : -1,
+							contentEnd: isRawText ? path.endOf(Part.content) : -1,
+							selfClosing: path.flag(Flag.selfClosing)
 						});
 						originals.push(snapshotAttrs(attrs));
 						descriptors.push(null);
@@ -796,7 +850,7 @@ class HtmlGenerator extends Generator {
 	 * @returns {string} the rendered HTML
 	 */
 	static renderHtml(content, model, csp) {
-		const { escapeAttribute } = getHtmlSyntax();
+		const { escapeAttribute } = getHtmlParser();
 		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;
@@ -1058,12 +1112,9 @@ class HtmlGenerator extends Generator {
 		this._moduleGraph = moduleGraph;
 		/** @type {((module: NormalModule) => boolean) | undefined} */
 		this._isPageOnly = isPageOnly;
-		// Raw dependency-template render (before `[webpack/auto]` resolution),
-		// shared between the JS and HTML type passes of a single
-		// `codeGeneration()` call. Keyed by that call's `runtimeRequirements`
-		// Set — created once per call and passed to every type's `generate()`,
-		// so it uniquely scopes the cache to one module's one code generation
-		// and releases with it. The two passes differ only in `undoPath`.
+		// Raw render shared between the JS and HTML passes of one `codeGeneration()`
+		// call, which differ only in `undoPath`. Keyed by that call's
+		// `runtimeRequirements` Set, so the entry is scoped to it and releases with it.
 		/** @type {WeakMap<RuntimeRequirements, string>} */
 		this._rawRenderCache = new WeakMap();
 	}
@@ -1075,11 +1126,9 @@ class HtmlGenerator extends Generator {
 	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
 	 */
 	getConcatenationBailoutReason(module, context) {
-		// The HMR shim references the per-module `module.hot` object — when an
-		// HTML module is concatenated, that scope is gone (the merged file
-		// shares a single `module`), so the self-accept / DOM-patch wiring
-		// would target the wrong module id. Bail out of concatenation so the
-		// HMR-aware HTML module keeps its own module scope.
+		// The HMR shim references the per-module `module.hot`, and a concatenated
+		// file shares one `module`, so the self-accept wiring would target the wrong
+		// id. Bail out, keeping the module's own scope.
 		if (module.hot) {
 			return "HTML module needs its own module scope for HMR";
 		}
@@ -1191,7 +1240,7 @@ class HtmlGenerator extends Generator {
 
 	/**
 	 * Processes the provided dependencies block.
-	 * @param {import("../DependenciesBlock")} block the dependencies block which will be processed
+	 * @param {import("../graph/DependenciesBlock")} block the dependencies block which will be processed
 	 * @param {ReplaceSource} source the current replace source which can be modified
 	 * @param {DependencyTemplateContext} templateContext the template context
 	 * @returns {void}
@@ -1278,10 +1327,9 @@ class HtmlGenerator extends Generator {
 	 * @returns {string} the rewritten HTML
 	 */
 	_renderHtml(module, generateContext, undoPath) {
-		// The dependency-template pass is identical for both type passes (no
-		// template branches on `type` or writes `runtimeRequirements`), so
-		// compute the raw render once per `codeGeneration()` and reuse it; the
-		// passes diverge only in the `[webpack/auto]` substitution below.
+		// No dependency template branches on `type` or writes
+		// `runtimeRequirements`, so the raw render is computed once per
+		// `codeGeneration()`; the passes diverge only in the substitution below.
 		const cacheKey = generateContext.runtimeRequirements;
 		let rawContent = this._rawRenderCache.get(cacheKey);
 		if (rawContent === undefined) {
@@ -1345,11 +1393,9 @@ class HtmlGenerator extends Generator {
 
 		/** @type {string} */
 		let sourceContent;
-		// `module.hot` is set by `HotModuleReplacementPlugin` on every module
-		// when HMR is enabled. When set, we cannot use the concatenation path
-		// (it merges into a parent's module scope, where `module.hot.accept`
-		// would target the wrong id) — `getConcatenationBailoutReason` keeps
-		// us out of concatenation in that case.
+		// `module.hot` marks HMR being enabled, and concatenation merges into a
+		// parent's scope where `module.hot.accept` would target the wrong id.
+		// `getConcatenationBailoutReason` keeps such a module out of it.
 		if (generateContext.concatenationScope && !module.hot) {
 			generateContext.concatenationScope.registerNamespaceExport(
 				ConcatenationScope.NAMESPACE_OBJECT_EXPORT
@@ -1423,15 +1469,11 @@ class HtmlGenerator extends Generator {
 		const acceptBlock = extracting
 			? [
 					"module.hot.accept();",
-					// Mask `<!-- … -->` comments — replace their characters
-					// with spaces, preserving length — before any tag regex
-					// runs. Masking (rather than deleting) keeps string offsets
-					// stable, so the body/title content can be sliced back out
-					// of the original HTML with comments intact, while a
-					// `<body>`/`</body>`/`<title>` inside a comment can no
-					// longer fool the tag regexes (the non-greedy `*?` would
-					// otherwise stop at the FIRST `</body>` it sees, even one
-					// inside a comment).
+					// WHY: a `</body>` inside a comment stops the non-greedy `*?` at the
+					// wrong place, so comments are masked before any tag regex runs.
+					// Masking rather than deleting keeps offsets stable, so the body and
+					// title can still be sliced out of the original HTML with their
+					// comments intact.
 					`${declare} __webpack_mask_comments__ = ${runtimeTemplate.returningFunction(
 						`h.replace(/<!--[\\s\\S]*?-->/g, ${runtimeTemplate.returningFunction(
 							'c.replace(/[^\\n]/g, " ")',
@@ -1475,9 +1517,8 @@ class HtmlGenerator extends Generator {
 						]
 					)};`,
 					// 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.
+					// so appending it would never run. A fresh one with the same attributes
+					// and body does, as the reload this replaces would have.
 					`${declare} __webpack_revive_script__ = ${runtimeTemplate.basicFunction(
 						"node",
 						[
@@ -1493,11 +1534,9 @@ class HtmlGenerator extends Generator {
 							"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.
+					// Apply only the difference between the two authored heads: the
+					// runtime's own injected tags are in neither string, so replacing
+					// `document.head` wholesale would tear them down where a delta cannot.
 					`${declare} __webpack_patch_head__ = ${runtimeTemplate.basicFunction(
 						"oldHtml, newHtml",
 						[
@@ -1533,14 +1572,12 @@ class HtmlGenerator extends Generator {
 							`${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.
+							// WHY: a script that has run cannot be un-run, so dropping one is the
+							// single edit still worth a reload — but only a script that ran. A
+							// `type` that is neither a JavaScript MIME essence, all of which end
+							// in `script`, nor `module`, `importmap` or `speculationrules` is a
+							// data block the browser never executed, as safe to remove as a
+							// `<meta>`. An unrecognized type falls back to the reload.
 							`if (removed.some(${runtimeTemplate.basicFunction("node", [
 								'if (node.nodeName !== "SCRIPT") return false;',
 								`${declare} type = (node.getAttribute("type") || "").trim().toLowerCase();`,
@@ -1564,11 +1601,9 @@ class HtmlGenerator extends Generator {
 							]),
 							"}",
 							`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.
+							// Pair each retained element with its live node, scanning forward
+							// only: a moved element then finds no match and falls back to the
+							// reload, while an injected node never matches either way.
 							`${declare} liveByNew = [];`,
 							`${mutable} searchFrom = 0;`,
 							`for (${mutable} i = 0; i < newChildren.length; i++) {`,
@@ -1648,13 +1683,22 @@ class HtmlGenerator extends Generator {
 	 */
 	generateError(error, module, generateContext) {
 		if (generateContext.type === HTML_TYPE) {
-			// Strip `<`, `>`, `--` runs from `error.message` so it can't escape the comment.
-			const safe = String(error.message)
+			// Strip `<`, `>`, `--` runs from the message so it can't escape the comment.
+			const safe = Generator.buildErrorMessage(
+				error,
+				generateContext.runtimeTemplate.requestShortener
+			)
 				.replace(/[<>]/g, "")
 				.replace(/-{2,}/g, (m) => `${"-".repeat(m.length - 1)} `);
 			return new RawSource(`<!-- webpack error: ${safe} -->`);
 		}
-		return new RawSource(Generator.throwBuildErrorCode(error));
+		return new RawSource(
+			Generator.throwBuildErrorCode(
+				error,
+				undefined,
+				generateContext.runtimeTemplate.requestShortener
+			)
+		);
 	}
 
 	/**
@@ -1664,10 +1708,9 @@ class HtmlGenerator extends Generator {
 	 */
 	updateHash(hash, updateHashContext) {
 		hash.update("html");
-		// Source-type set changes when html-type exposure flips; the HMR shim's
-		// `extracting` branch changes when the emit decision flips. They differ
-		// only for `"inline"` (exposes html, but does not emit), so hash both.
-		// One `_shouldExtract` walk covers both checks (expose = extract ∪ inline).
+		// The source-type set turns on html-type exposure and the HMR shim's
+		// `extracting` branch on the emit decision. They differ only for
+		// `"inline"`, which exposes html without emitting, so hash both.
 		const extract = this._shouldExtract(updateHashContext.module);
 		if (extract || this.options.extract === "inline") {
 			hash.update("html-type");

package/lib/html/HtmlModule.js

@@ -4,16 +4,17 @@
 
 "use strict";
 
-const NormalModule = require("../NormalModule");
+const NormalModule = require("../module/NormalModule");
 const makeSerializable = require("../util/makeSerializable");
 
 /**
  * @import {
  * 	NormalModuleBuildInfo,
  * 	NormalModuleCreateData
- * } from "../NormalModule"
+ * } from "../module/NormalModule"
  */
 /** @import { HtmlEntryInfo } from "./HtmlModulesPlugin" */
+/** @import { ModuleKinds } from "../module/Module" */
 
 /**
  * Defines the build info properties specific to html modules.
@@ -42,4 +43,7 @@ class HtmlModule extends NormalModule {
 
 makeSerializable(HtmlModule, "webpack/lib/html/HtmlModule");
 
+/** @type {Set<keyof ModuleKinds>} */
+HtmlModule.KINDS = new Set([...NormalModule.KINDS, "html"]);
+
 module.exports = HtmlModule;