webpack 5.111.0 → 5.111.1

package/lib/dependencies/ImportParserPlugin.js

@@ -45,7 +45,7 @@ const getCommentCompilationWarning = memoize(() =>
  * } from "../../declarations/WebpackOptions"
  */
 /** @import { RawChunkGroupOptions } from "../ChunkGroup" */
-/** @import { ContextMode } from "../ContextModule" */
+/** @import { ContextMode } from "../context/ContextModule" */
 /** @import { RawReferencedExports } from "../Dependency" */
 /** @import { BuildMeta } from "../Module" */
 /**

package/lib/dependencies/LoaderPlugin.js

@@ -21,7 +21,7 @@ const LoaderImportDependency = require("./LoaderImportDependency");
  * } from "../Compilation"
  */
 /** @import Compiler from "../Compiler" */
-/** @import { BuildInfo } from "../Module" */
+/** @import Module, { BuildInfo } from "../Module" */
 
 /**
  * Defines the import module callback callback.
@@ -39,6 +39,31 @@ const LoaderImportDependency = require("./LoaderImportDependency");
  * @property {string=} baseUri target base uri
  */
 
+/**
+ * @callback LoadModuleCallback
+ * @param {Error | null} err error object
+ * @param {(string | Buffer)=} source source of the loaded module
+ * @param {(object | null)=} sourceMap source map of the loaded module
+ * @param {Module=} module the loaded module
+ * @returns {void}
+ */
+
+/**
+ * `importModule` takes a callback or, given none, answers with a promise, and
+ * TypeScript reads an intersection of call signatures as an overload set
+ * @typedef {{ (request: string, options: ImportModuleOptions | undefined, callback: ImportModuleCallback): void } & { (request: string, options?: ImportModuleOptions): Promise<ExecuteModuleExports> }} ImportModuleMethod
+ */
+
+/**
+ * These properties are added by the LoaderPlugin
+ * @typedef {object} LoaderPluginLoaderContext
+ * @property {(request: string, callback: LoadModuleCallback) => void} loadModule Resolves the given request to a module, applies all configured loaders and calls
+ * back with the generated source, the sourceMap and the module instance (usually an
+ * instance of NormalModule). Use this function if you need to know the source code
+ * of another module to generate the result.
+ * @property {ImportModuleMethod} importModule
+ */
+
 const PLUGIN_NAME = "LoaderPlugin";
 
 class LoaderPlugin {

package/lib/dependencies/RequireContextDependencyParserPlugin.js

@@ -7,7 +7,7 @@
 
 const RequireContextDependency = require("./RequireContextDependency");
 
-/** @import { ContextMode } from "../ContextModule" */
+/** @import { ContextMode } from "../context/ContextModule" */
 /** @import JavascriptParser, { Range } from "../javascript/JavascriptParser" */
 
 const PLUGIN_NAME = "RequireContextDependencyParserPlugin";

package/lib/dependencies/URLContextDependency.js

@@ -9,7 +9,7 @@ const makeSerializable = require("../util/makeSerializable");
 const ContextDependency = require("./ContextDependency");
 const ContextDependencyTemplateAsRequireCall = require("./ContextDependencyTemplateAsRequireCall");
 
-/** @import { ContextOptions } from "../ContextModule" */
+/** @import { ContextOptions } from "../context/ContextModule" */
 /** @import { Range } from "../javascript/JavascriptParser" */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext<[Range]>} ObjectDeserializerContext */
 /** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext<[Range]>} ObjectSerializerContext */

package/lib/dependencies/URLDependency.js

@@ -263,11 +263,12 @@ URLDependency.Template = class URLDependencyTemplate extends (
 			return;
 		}
 
-		// For ESM module output, emit the analyzable `new URL("./asset", import.meta.url)`
-		// form (literal specifier, no runtime helpers) so other bundlers and webpack itself
-		// can statically follow the asset. `url: "relative"` keeps the runtime form.
-		// A prefetch/preload hint doesn't force it: the `<link>` is emitted separately at
-		// chunk startup (`StartupAssetHintRuntimeModule`), independent of the call site.
+		// WHY: ESM module output emits the analyzable
+		// `new URL("./asset", import.meta.url)` form — a literal specifier, no runtime
+		// helpers — so other bundlers and webpack itself can statically follow the
+		// asset, while `url: "relative"` keeps the runtime form. A prefetch or preload
+		// hint does not force it: the `<link>` is emitted separately at chunk startup
+		// (`StartupAssetHintRuntimeModule`), independent of the call site.
 		if (
 			!dep.relative &&
 			runtimeTemplate.supportsAnalyzable(

package/lib/dependencies/WorkerAndWorkletPlugin.js

@@ -86,10 +86,9 @@ const WORKER_DEFAULT_SYNTAX = [
 	"Worker from worker_threads"
 ];
 
-// Worklets are always module scripts loaded through `addModule` and — unlike Web
-// Workers — cannot load additional chunks at runtime (no `importScripts`, no
-// dynamic `import()`). The WorkletDependency wraps the call so every chunk is
-// pre-added via `addModule` from the calling scope (see WorkletDependency).
+// A worklet is always a module script loaded through `addModule`, and unlike a
+// Web Worker cannot load further chunks at runtime, so WorkletDependency wraps
+// the call and pre-adds every chunk from the calling scope.
 const WORKLET_DEFAULT_SYNTAX = [
 	"*context.audioWorklet.addModule()",
 	"*audioWorklet.addModule()",
@@ -406,10 +405,9 @@ class WorkerAndWorkletPlugin {
 										)
 									);
 								} else {
-									// `webpackEntryOptions` is user input from a magic
-									// comment, so copy only safe own keys to avoid
-									// prototype pollution via `__proto__`/`constructor`/
-									// `prototype`.
+									// `webpackEntryOptions` is user input from a magic comment, so
+									// only safe own keys are copied, against prototype pollution
+									// through `__proto__` or `constructor`.
 									const userEntryOptions = importOptions.webpackEntryOptions;
 									for (const key of Object.keys(userEntryOptions)) {
 										if (
@@ -502,11 +500,9 @@ class WorkerAndWorkletPlugin {
 
 						/** @type {ResourceHint | undefined} */
 						let resourceHint;
-						// Resource-hint comments belong to the asset expression — read
-						// them from the inner `new URL(...)` range only, never from
-						// elsewhere inside `new Worker(...)`. When `arg1` is bare
-						// `import.meta.url` there is no `new URL` and no place for
-						// the comments to go, so resource hints are skipped.
+						// Resource-hint comments belong to the asset expression, so they are
+						// read from the inner `new URL(...)` range alone. A bare
+						// `import.meta.url` has none, so its hints are skipped.
 						if (arg1.type === "NewExpression") {
 							const { options: urlImportOptions } = parser.parseCommentOptions(
 								/** @type {Range} */ (arg1.range)
@@ -652,10 +648,9 @@ class WorkerAndWorkletPlugin {
 							name: entryOptions.name,
 							circular: false,
 							entryOptions: {
-								// A module worklet links its split chunks via native `import`
-								// (resolved by `addModule`), so it keeps the module chunk
-								// loading. A script worklet can't load chunks at runtime, so its
-								// chunks use import-scripts and are pre-added from the calling scope.
+								// A module worklet links its split chunks through native `import`
+								// and keeps module chunk loading. A script worklet loads none at
+								// runtime, so its chunks are pre-added from the calling scope.
 								chunkLoading: this._module
 									? this._chunkLoading
 									: "import-scripts",
@@ -800,10 +795,9 @@ class WorkerAndWorkletPlugin {
 						);
 					}
 
-					// Worklet parsing is opt-in: unset falls back to the `futureDefaults`
-					// default, `false` disables it. It is not defaulted in
-					// `config/defaults.js` because that would splice into the `"..."`
-					// merge sentinel of a user-provided list.
+					// Worklet parsing is opt-in: unset falls back to `futureDefaults` and
+					// `false` disables it. Not defaulted in `config/defaults.js`, which
+					// would splice into a user list's `"..."` sentinel.
 					const workletOption =
 						parserOptions.worklet === undefined
 							? this._workletDefault

package/lib/dependencies/WorkerDependency.js

@@ -131,11 +131,12 @@ WorkerDependency.Template = class WorkerDependencyTemplate extends (
 		);
 		const chunk = entrypoint.getEntrypointChunk();
 
-		// For ESM module output emit the analyzable `new URL("./worker.<name>.js",
-		// import.meta.url)` form (literal specifier, no runtime helpers) so other bundlers
-		// and webpack itself can statically follow the worker. A resource hint doesn't
-		// block it: the `<link>` is emitted at chunk startup instead of wrapping the href,
-		// which would turn the specifier into a non-analyzable expression.
+		// WHY: ESM module output emits the analyzable
+		// `new URL("./worker.<name>.js", import.meta.url)` form — a literal specifier,
+		// no runtime helpers — so other bundlers and webpack itself can statically
+		// follow the worker. A resource hint does not block it: the `<link>` is
+		// emitted at chunk startup instead of wrapping the href, which would turn the
+		// specifier into a non-analyzable expression.
 		const analyzableSpecifier = runtimeTemplate.getAnalyzableWorkerUrl(
 			dep.options.publicPath,
 			chunk,

package/lib/dependencies/WorkletDependency.js

@@ -136,10 +136,9 @@ WorkletDependency.Template = class WorkletDependencyTemplate extends (
 		const runtimeChunkId =
 			runtimeChunk && runtimeChunk.id !== null ? runtimeChunk.id : null;
 
-		// For ESM module output emit the analyzable `new URL("./worklet.<name>.js",
-		// import.meta.url)` form (literal specifier, no runtime helpers) so other bundlers
-		// and webpack itself can statically follow the worklet. The worklet chunk links its
-		// splits via native `import`, so only the entry chunk is referenced.
+		// ESM output emits the analyzable `new URL("./worklet.<name>.js",
+		// import.meta.url)`, which another bundler can follow statically. Only the
+		// entry chunk is named, its splits being linked by native `import`.
 		const analyzableSpecifier = runtimeTemplate.getAnalyzableWorkerUrl(
 			dep.options.publicPath,
 			entryChunk,
@@ -196,11 +195,9 @@ WorkletDependency.Template = class WorkletDependencyTemplate extends (
 			return;
 		}
 
-		// A worklet can't load chunks at runtime, so every reachable chunk (initial
-		// splits and async `import()` targets alike) is pre-added via `addModule`
-		// from the calling scope. The runtime chunk is added last so it installs the
-		// chunks pushed before it and runs entry startup with every module present
-		// (see ImportScriptsChunkLoadingRuntimeModule).
+		// A worklet loads no chunks at runtime, so every reachable one is pre-added
+		// from the calling scope. The runtime chunk goes last, installing what came
+		// before it and running startup with every module present.
 		/** @type {(string | number)[]} */
 		const restChunkIds = [];
 		for (const chunk of referencedChunks) {

package/lib/errors/HookWebpackError.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { toError } = require("../ErrorHelpers");
 const makeSerializable = require("../util/makeSerializable");
 const WebpackError = require("./WebpackError");
 
@@ -67,13 +68,13 @@ makeSerializable(HookWebpackError, "webpack/lib/errors/HookWebpackError");
 
 /**
  * Creates webpack error.
- * @param {Error} error an error
+ * @param {EXPECTED_ANY} error what a plugin failed with
  * @param {string} hook name of the hook
  * @returns {WebpackError} a webpack error
  */
 const makeWebpackError = (error, hook) => {
 	if (error instanceof WebpackError) return error;
-	return new HookWebpackError(error, hook);
+	return new HookWebpackError(toError(error), hook);
 };
 
 HookWebpackError.makeWebpackError = makeWebpackError;

package/lib/hmr/LazyCompilationPlugin.js

@@ -335,11 +335,9 @@ class LazyCompilationProxyModule extends Module {
 			block.addDependency(dep);
 			this.addBlock(block);
 		} else if (hasClosureLibrary(compilation.options.output)) {
-			// Reserve statically-declared externals as dependencies of the inactive
-			// proxy so the initial entry chunk's library wrapper already exposes
-			// their closure identifiers (e.g. `__WEBPACK_EXTERNAL_MODULE_react__`).
-			// Once the proxy activates and the lazily-built module references those
-			// externals, the identifiers resolve normally instead of throwing.
+			// Reserve the statically declared externals on the inactive proxy, so the
+			// entry chunk's library wrapper already exposes their closure identifiers
+			// and they resolve rather than throw once the proxy activates.
 			const requests = collectStaticExternalRequests(
 				options.externals,
 				this.layer

package/lib/html/HtmlGenerator.js

@@ -226,12 +226,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 +237,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,10 +248,9 @@ 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;
 
@@ -449,12 +443,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}`;
@@ -693,10 +684,9 @@ class HtmlGenerator extends Generator {
 							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();
 						if (name === "head") {
@@ -1058,12 +1048,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 +1062,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";
 		}
@@ -1278,10 +1263,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 +1329,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 +1405,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 +1453,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 +1470,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 +1508,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 +1537,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 +1619,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 +1644,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");