@depup/webpack 5.109.2-depup.0 → 5.110.3-depup.0

package/lib/html/HtmlModulesPlugin.js

@@ -14,12 +14,8 @@ const HotUpdateChunk = require("../HotUpdateChunk");
 const { HTML_TYPE } = require("../ModuleSourceTypeConstants");
 const { HTML_MODULE_TYPE } = require("../ModuleTypeConstants");
 const NormalModule = require("../NormalModule");
+const { toTemplateSourceFileName } = require("../TemplatedPathPlugin");
 const ConstDependency = require("../dependencies/ConstDependency");
-const HtmlEntryDependency = require("../dependencies/HtmlEntryDependency");
-const HtmlInlineHtmlDependency = require("../dependencies/HtmlInlineHtmlDependency");
-const HtmlInlineScriptDependency = require("../dependencies/HtmlInlineScriptDependency");
-const HtmlInlineStyleDependency = require("../dependencies/HtmlInlineStyleDependency");
-const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const WebpackError = require("../errors/WebpackError");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
@@ -28,24 +24,40 @@ const createHash = require("../util/createHash");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const { getUndoPath, makePathsRelative } = require("../util/identifier");
 const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
+const lazyModule = require("../util/lazyModule");
 const memoize = require("../util/memoize");
 const { digestNonNumericOnly } = require("../util/nonNumericOnlyHash");
+const preloadModuleType = require("../util/preloadModuleType");
 const {
 	PUBLIC_PATH_AUTO: autoPlaceholder
 } = require("../util/publicPathPlaceholder");
-const removeBOM = require("../util/removeBOM");
-const HtmlGenerator = require("./HtmlGenerator");
+const { removeBOMFromResult } = require("../util/removeBOM");
 const HtmlModule = require("./HtmlModule");
-const HtmlParser = require("./HtmlParser");
-const { escapeAttribute } = require("./syntax");
 
-/** @typedef {import("../../declarations/WebpackOptions").EntryDescriptionNormalized} EntryDescriptionNormalized */
+const getMimeTypes = memoize(() => require("../util/mimeTypes"));
+
+const getHtmlSyntax = memoize(() => require("./syntax"));
+
+// Lazy: this plugin is applied on every build (`experiments.html` defaults on),
+// but the HTML parser and tokenizer are only reached once HTML is in the graph.
+const getHtmlParser = lazyModule(() => require("./HtmlParser"));
+
+// html generation only happens once a build actually has an html module
+const getHtmlGenerator = memoize(() => require("./HtmlGenerator"));
+
+/**
+ * @import {
+ * 	EntryDescriptionNormalized,
+ * 	OutputHtmlOptions,
+ * 	HtmlFaviconIcon
+ * } from "../../declarations/WebpackOptions"
+ */
 /** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["favicon"]} FaviconOption */
 /** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["manifest"]} ManifestOption */
-/** @typedef {import("../../declarations/WebpackOptions").HtmlFaviconIcon} HtmlFaviconIcon */
 /** @typedef {Exclude<HtmlFaviconIcon, string>} FaviconIcon */
-/** @typedef {import("../Compiler")} Compiler */
-/** @typedef {import("./HtmlModule").HtmlModuleBuildInfo} HtmlModuleBuildInfo */
+/** @import Compiler from "../Compiler" */
+/** @import { HtmlModuleBuildInfo } from "./HtmlModule" */
+/** @import HtmlParser from "./HtmlParser" */
 /** @typedef {{ request: string, entryName: string, type: "script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch", css?: boolean }} HtmlEntryInfo */
 
 /** @typedef {{ outputName: string }} HtmlTransformHtmlContext */
@@ -114,7 +126,6 @@ const DEFAULT_FAVICON = new URL("./favicon.svg", pathToFileURL(__filename))
 	.href;
 
 // mime-db is heavy — only load it when a favicon actually needs a `type`.
-const getMimeTypes = memoize(() => require("../util/mimeTypes"));
 
 /**
  * Resolves `output.html.favicon` for one page to `[rel, icon]` pairs.
@@ -150,6 +161,7 @@ const resolveFaviconLinks = (favicon, name) => {
  * @returns {string} a `<link rel=… [attrs…] href=…>` tag; `type` defaults to the file format
  */
 const faviconLinkTag = (rel, icon) => {
+	const { escapeAttribute } = getHtmlSyntax();
 	const type = icon.type || getMimeTypes().lookup(icon.href) || "";
 	const attrs = [
 		`rel="${escapeAttribute(rel)}"`,
@@ -186,12 +198,33 @@ const manifestLinkTag = (manifest, name) => {
 					JSON.stringify(value),
 					"utf8"
 				).toString("base64")}`;
-	return `<link rel="manifest" href="${escapeAttribute(href)}">`;
+	return `<link rel="manifest" href="${getHtmlSyntax().escapeAttribute(
+		href
+	)}">`;
 };
 
+// Decided while the page's HTML is generated, which happens once per module —
+// and one synthetic page module can back several entries — so an entry's `html`
+// object can't override it.
+/** @type {"inline"[]} */
+const GLOBAL_ONLY_HTML_OPTIONS = ["inline"];
+
+/**
+ * SRI is on when `integrity` names at least one algorithm.
+ * @param {OutputHtmlOptions["integrity"]} integrity integrity option
+ * @returns {boolean} true when integrity attributes must be emitted
+ */
+const isIntegrityEnabled = (integrity) =>
+	integrity === true ||
+	typeof integrity === "function" ||
+	(Array.isArray(integrity) && integrity.length > 0);
+
 // `\.html`/`\.css` request matchers for the synthetic `output.html` wrapper.
 const HTML_REQUEST_RE = /\.html(\?|$)/i;
 const CSS_REQUEST_RE = /\.css(\?|$)/i;
+// The wrapper's own resource — the media type must end here, so that a
+// `data:text/htmlx,` entry (JavaScript to `DataUriPlugin`) is not one.
+const HTML_DATA_URL_RE = /^data:text\/html[,;]/i;
 
 /**
  * Requests an `output.html` page must load for an entry: its `dependOn`
@@ -208,7 +241,12 @@ const collectHtmlEntryRequests = (name, entries) => {
 	const seenRequests = new Set();
 	/** @type {Set<string>} */
 	const visited = new Set();
-	const walk = (/** @type {string} */ entryName) => {
+	/**
+	 * Collects an entry's non-html requests, `dependOn` entries included.
+	 * @param {string} entryName entry to walk
+	 * @returns {void}
+	 */
+	const walk = (entryName) => {
 		if (visited.has(entryName)) return;
 		visited.add(entryName);
 		const desc = entries[entryName];
@@ -299,25 +337,59 @@ class HtmlModulesPlugin {
 	apply(compiler) {
 		const { output } = compiler.options;
 		const htmlOption = output.html;
-		const scriptLoading =
-			(typeof htmlOption === "object" && htmlOption.scriptLoading) || "auto";
-		// ESM output emits `type="module"` (already deferred), so scriptLoading
-		// is ignored under output.module — warn on an explicit defer/blocking.
-		let scriptAttr = " defer";
-		if (output.module) {
-			scriptAttr = "";
-			if (scriptLoading === "defer" || scriptLoading === "blocking") {
-				compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-					compilation.warnings.push(
-						new WebpackError(
-							`output.html.scriptLoading: "${scriptLoading}" is ignored with output.module — ES module scripts are always deferred.`
-						)
-					);
-				});
+		const globalHtmlOptions =
+			typeof htmlOption === "object" ? htmlOption : undefined;
+		// Collected while entries are resolved (`entryOption`, before the first
+		// compilation) and reported on every compilation; a Set dedupes entries
+		// that hit the same problem.
+		/** @type {Set<string>} */
+		const optionWarnings = new Set();
+		compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+			for (const message of optionWarnings) {
+				compilation.warnings.push(new WebpackError(message));
 			}
-		} else if (scriptLoading === "blocking") {
-			scriptAttr = "";
-		}
+		});
+
+		// Resolved options per entry that owns a generated page, read back when the
+		// page is emitted (`csp`, `integrity`) — one synthetic page module can back
+		// several entries, so those can only be applied per emitted asset.
+		/** @type {Map<string, OutputHtmlOptions>} */
+		const htmlOptionsByEntry = new Map();
+		// SRI sentinels are emitted while the page's HTML is generated, before the
+		// owning entry is known, so any page asking for integrity turns them on for
+		// all of them; pages that don't want SRI drop them again on emit. Authored
+		// `.html` pages never reach the entry hook, hence the global seed.
+		let anyIntegrity = isIntegrityEnabled(
+			globalHtmlOptions && globalHtmlOptions.integrity
+		);
+
+		/**
+		 * Options for one page: an entry's `html` object overrides `output.html`
+		 * option by option, `true` inherits it as-is.
+		 * @param {EntryDescriptionNormalized["html"]} html the entry's `html` value
+		 * @param {string} name entry name
+		 * @returns {OutputHtmlOptions} resolved options
+		 */
+		const resolveHtmlOptions = (html, name) => {
+			const options =
+				typeof html !== "object"
+					? globalHtmlOptions || {}
+					: globalHtmlOptions
+						? { ...globalHtmlOptions, ...html }
+						: html;
+			if (typeof html === "object") {
+				for (const option of GLOBAL_ONLY_HTML_OPTIONS) {
+					if (html[option] !== undefined) {
+						optionWarnings.add(
+							`entry "${name}" html.${option} is ignored — ${option} is resolved once per generated page and can only be set on output.html.`
+						);
+					}
+				}
+			}
+			htmlOptionsByEntry.set(name, options);
+			if (isIntegrityEnabled(options.integrity)) anyIntegrity = true;
+			return options;
+		};
 
 		// `output.html` (or an entry's `html`) wraps a non-HTML entry in a
 		// synthetic HTML module so the existing pipeline injects its JS/CSS
@@ -329,6 +401,9 @@ class HtmlModulesPlugin {
 		EntryOptionPlugin.getHooks(compiler).entry.tap(
 			PLUGIN_NAME,
 			(context, name, desc) => {
+				// Resolved for every entry, including the authored `.html` ones that
+				// need no wrapper below — their page reads back `csp`/`integrity` too.
+				const htmlObj = resolveHtmlOptions(desc.html, name);
 				const html = desc.html !== undefined ? desc.html : htmlOption;
 				const imports = desc.import;
 				if (
@@ -338,6 +413,26 @@ class HtmlModulesPlugin {
 				) {
 					return;
 				}
+				const scriptLoading = htmlObj.scriptLoading || "auto";
+				// ESM output emits `type="module"` (already deferred), so
+				// scriptLoading is ignored under output.module — warn on an
+				// explicit defer/blocking.
+				let scriptAttr = " defer";
+				if (output.module) {
+					scriptAttr = "";
+					if (scriptLoading === "defer" || scriptLoading === "blocking") {
+						const source =
+							typeof desc.html === "object" &&
+							desc.html.scriptLoading !== undefined
+								? `entry "${name}" html`
+								: "output.html";
+						optionWarnings.add(
+							`${source}.scriptLoading: "${scriptLoading}" is ignored with output.module — ES module scripts are always deferred.`
+						);
+					}
+				} else if (scriptLoading === "blocking") {
+					scriptAttr = "";
+				}
 				const entries = compiler.options.entry;
 				const requests =
 					typeof entries === "object" && entries[name]
@@ -352,27 +447,13 @@ class HtmlModulesPlugin {
 						scripts.push(`<script${scriptAttr} src="${r}"></script>`);
 					}
 				}
-				const htmlObj =
-					typeof html === "object"
-						? html
-						: typeof htmlOption === "object"
-							? htmlOption
-							: {};
-				const headTags = HtmlParser.buildHeadTags(htmlObj);
+				const headTags = getHtmlSyntax().buildHeadTags(htmlObj);
 				// Injected into webpack-generated pages only; each icon's href is a
 				// normal request the parser turns into a hashed asset.
-				const favicon =
-					typeof html === "object" && html.favicon !== undefined
-						? html.favicon
-						: false;
-				const faviconTag = resolveFaviconLinks(favicon, name)
+				const faviconTag = resolveFaviconLinks(htmlObj.favicon, name)
 					.map(([rel, icon]) => faviconLinkTag(rel, icon))
 					.join("");
-				const manifest =
-					typeof html === "object" && html.manifest !== undefined
-						? html.manifest
-						: false;
-				const manifestTag = manifestLinkTag(manifest, name);
+				const manifestTag = manifestLinkTag(htmlObj.manifest, name);
 				const inject = htmlObj.inject;
 				const scriptsInHead =
 					inject === "head" || (inject !== "body" && output.module);
@@ -402,12 +483,13 @@ class HtmlModulesPlugin {
 		// `<link rel="modulepreload">` intact.
 		// Per-compilation state: the HTML modules seen during make (so
 		// `finishMake` creates their entries without scanning the whole module
-		// graph) and the stylesheet entry names (read in `afterChunks`).
-		/** @type {WeakMap<import("../Compilation"), { htmlModules: Set<import("../Module")>, stylesheetEntries: Set<string>, htmlAssetNames: Set<string> }>} */
+		// graph), the stylesheet entry names (read in `afterChunks`) and the html
+		// options of every emitted page, keyed by its asset name.
+		/** @type {WeakMap<import("../Compilation"), { htmlModules: Set<import("../Module")>, stylesheetEntries: Set<string>, htmlAssetOptions: Map<string, OutputHtmlOptions> }>} */
 		const compilationState = new WeakMap();
 		/**
 		 * @param {import("../Compilation")} compilation compilation
-		 * @returns {{ htmlModules: Set<import("../Module")>, stylesheetEntries: Set<string>, htmlAssetNames: Set<string> }} per-compilation state
+		 * @returns {{ htmlModules: Set<import("../Module")>, stylesheetEntries: Set<string>, htmlAssetOptions: Map<string, OutputHtmlOptions> }} per-compilation state
 		 */
 		const getState = (compilation) => {
 			let state = compilationState.get(compilation);
@@ -415,7 +497,7 @@ class HtmlModulesPlugin {
 				state = {
 					htmlModules: new Set(),
 					stylesheetEntries: new Set(),
-					htmlAssetNames: new Set()
+					htmlAssetOptions: new Map()
 				};
 				compilationState.set(compilation, state);
 			}
@@ -515,15 +597,10 @@ class HtmlModulesPlugin {
 			);
 		});
 
-		const integrity =
-			typeof htmlOption === "object" ? htmlOption.integrity : undefined;
-		const integrityOn =
-			integrity === true ||
-			typeof integrity === "function" ||
-			(Array.isArray(integrity) && integrity.length > 0);
-		// `output.html.csp` injects a `<meta http-equiv="Content-Security-Policy">`
-		// once the page's inline content is final (in `processAssets` below).
-		const csp = typeof htmlOption === "object" ? htmlOption.csp : undefined;
+		// `csp` injects a `<meta http-equiv="Content-Security-Policy">` and
+		// `integrity` resolves the SRI sentinels — both once the page's inline
+		// content is final (in `processAssets` below), per page, so an entry's
+		// `html` can override them.
 		// `"auto"` marks implicit enablement (no user rule for HTML files) — see
 		// `applyExperimentsDefaults`. Only then loaders win over the built-in type
 		// (e.g. html-webpack-plugin's template loader in its child compiler).
@@ -541,13 +618,20 @@ class HtmlModulesPlugin {
 					);
 				}
 				const { htmlModules } = getState(compilation);
-				// Record HTML modules as they appear — freshly built
-				// (`succeedModule`) or restored from cache (`stillValidModule`) —
-				// so `finishMake` creates their entries without scanning every
-				// module in the graph. Tracking only records; entries are still
-				// added (and awaited) in `finishMake`.
-				const trackHtmlModule = (/** @type {import("../Module")} */ module) => {
-					if (module.type === HTML_MODULE_TYPE) htmlModules.add(module);
+				/**
+				 * Records HTML modules as they are built or restored, so `finishMake`
+				 * creates their entries without scanning the whole module graph.
+				 * @param {import("../Module")} module built or restored module
+				 * @returns {void}
+				 */
+				const trackHtmlModule = (module) => {
+					if (module.type !== HTML_MODULE_TYPE) return;
+					// enabled here, not on the compilation hook: an integrity build
+					// with no html module must not load the generator
+					if (anyIntegrity) {
+						getHtmlGenerator().enableIntegritySentinels(compilation);
+					}
+					htmlModules.add(module);
 				};
 				compilation.hooks.succeedModule.tap(PLUGIN_NAME, trackHtmlModule);
 				compilation.hooks.stillValidModule.tap(PLUGIN_NAME, trackHtmlModule);
@@ -559,7 +643,7 @@ class HtmlModulesPlugin {
 				// with CORS; without `output.crossOriginLoading` the browser
 				// silently ignores `integrity` on cross-origin loads. Warn once
 				// so a CDN deployment doesn't ship no-op integrity attributes.
-				if (integrityOn && !compilation.outputOptions.crossOriginLoading) {
+				if (anyIntegrity && !compilation.outputOptions.crossOriginLoading) {
 					compilation.warnings.push(
 						new WebpackError(
 							'output.html.integrity is set but output.crossOriginLoading is not. Browsers ignore Subresource Integrity on cross-origin requests made without CORS; set output.crossOriginLoading (e.g. "anonymous") if any asset is served from a different origin.'
@@ -572,29 +656,32 @@ class HtmlModulesPlugin {
 						stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH + 1
 					},
 					async (assets) => {
-						const { htmlAssetNames } = getState(compilation);
+						const { htmlAssetOptions } = getState(compilation);
 						const hooks = HtmlModulesPlugin.getCompilationHooks(compilation);
 						/** @type {Set<string>} */
 						const inlinedFiles = new Set();
 						for (const name of Object.keys(assets)) {
-							if (!htmlAssetNames.has(name)) continue;
+							const pageOptions = htmlAssetOptions.get(name);
+							if (pageOptions === undefined) continue;
 							const content = assets[name].source();
 							if (typeof content !== "string") continue;
+							const { csp, integrity } = pageOptions;
 							let resolved = content;
-							if (
-								integrityOn &&
-								resolved.includes("__WEBPACK_HTML_INTEGRITY__")
-							) {
-								resolved = HtmlGenerator.resolveChunkIntegritySentinels(
-									resolved,
-									compilation,
-									/** @type {import("./HtmlGenerator").HtmlIntegrity} */ (
-										integrity
-									)
-								);
+							// Sentinels are emitted whenever any page wants SRI, so a page
+							// that doesn't drops them again here.
+							if (resolved.includes("__WEBPACK_HTML_INTEGRITY__")) {
+								resolved = isIntegrityEnabled(integrity)
+									? getHtmlGenerator().resolveChunkIntegritySentinels(
+											resolved,
+											compilation,
+											/** @type {import("./HtmlGenerator").HtmlIntegrity} */ (
+												integrity
+											)
+										)
+									: getHtmlGenerator().stripChunkIntegritySentinels(resolved);
 							}
 							if (resolved.includes("__WEBPACK_HTML_INLINE__")) {
-								resolved = HtmlGenerator.resolveChunkInlineSentinels(
+								resolved = getHtmlGenerator().resolveChunkInlineSentinels(
 									resolved,
 									compilation,
 									name,
@@ -613,15 +700,15 @@ class HtmlModulesPlugin {
 							});
 							const transformTags = hooks.transformTags.taps.length > 0;
 							if (injected.length > 0 || transformTags || csp) {
-								const model = HtmlGenerator.collectHtml(resolved);
-								HtmlGenerator.addInjectedTags(model, injected);
+								const model = getHtmlGenerator().collectHtml(resolved);
+								getHtmlGenerator().addInjectedTags(model, injected);
 								if (transformTags) {
 									await hooks.transformTags.promise(model.tags, {
 										outputName: name,
 										html: resolved
 									});
 								}
-								resolved = HtmlGenerator.renderHtml(resolved, model, csp);
+								resolved = getHtmlGenerator().renderHtml(resolved, model, csp);
 							}
 							// Final, fully-resolved HTML — let plugins transform it (minify,
 							// inject a CSP meta, rewrite tags) before it is written.
@@ -636,28 +723,64 @@ class HtmlModulesPlugin {
 						// An inlined chunk file is dead weight once nothing else references
 						// it by URL (another page's tag, or the runtime's async chunk map);
 						// a content-hashed filename makes a substring hit a real reference.
+						/** @type {Set<string>} */
+						const deletionCandidates = new Set(inlinedFiles);
+						// A wrapper entry's chunk only rebuilds the page's own markup; the
+						// page loads the `<script src>` entries the parser split out of it.
+						for (const entrypoint of compilation.entrypoints.values()) {
+							const chunk = entrypoint.getEntrypointChunk();
+							if (!chunk) continue;
+							let wrapperOnly = false;
+							for (const entryModule of compilation.chunkGraph.getChunkEntryModulesIterable(
+								chunk
+							)) {
+								const { resource } = /** @type {import("../NormalModule")} */ (
+									entryModule
+								);
+								wrapperOnly =
+									typeof resource === "string" &&
+									HTML_DATA_URL_RE.test(resource);
+								if (!wrapperOnly) break;
+							}
+							if (!wrapperOnly) continue;
+							for (const file of chunk.files) deletionCandidates.add(file);
+						}
 						// Materialize each other asset's source once (it can be expensive to
-						// render) and test all inlined files against it, rather than
-						// re-materializing every asset per inlined file.
-						if (inlinedFiles.size > 0) {
+						// render) and test all candidates against it, rather than
+						// re-materializing every asset per candidate.
+						if (deletionCandidates.size > 0) {
 							/** @type {Set<string>} */
 							const stillReferenced = new Set();
-							for (const name of Object.keys(compilation.assets)) {
-								if (
-									inlinedFiles.has(name) ||
-									stillReferenced.size === inlinedFiles.size
-								) {
-									continue;
-								}
+							/** @type {string[]} */
+							const pending = [];
+							/**
+							 * @param {string} name asset whose source may name a candidate
+							 */
+							const markReferenced = (name) => {
 								const source = compilation.assets[name].source();
-								if (typeof source !== "string") continue;
-								for (const file of inlinedFiles) {
+								if (typeof source !== "string") return;
+								for (const file of deletionCandidates) {
 									if (!stillReferenced.has(file) && source.includes(file)) {
 										stillReferenced.add(file);
+										pending.push(file);
 									}
 								}
+							};
+							for (const name of Object.keys(compilation.assets)) {
+								if (
+									deletionCandidates.has(name) ||
+									stillReferenced.size === deletionCandidates.size
+								) {
+									continue;
+								}
+								markReferenced(name);
+							}
+							// A kept candidate can reference another through its async chunk
+							// map, so follow each until nothing new is kept.
+							while (pending.length > 0) {
+								markReferenced(/** @type {string} */ (pending.pop()));
 							}
-							for (const file of inlinedFiles) {
+							for (const file of deletionCandidates) {
 								if (!stillReferenced.has(file)) compilation.deleteAsset(file);
 							}
 						}
@@ -695,58 +818,6 @@ class HtmlModulesPlugin {
 							compilation.outputOptions.cssChunkFilename;
 					}
 				});
-				compilation.dependencyFactories.set(
-					HtmlSourceDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					HtmlSourceDependency,
-					new HtmlSourceDependency.Template()
-				);
-				compilation.dependencyFactories.set(
-					HtmlEntryDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					HtmlEntryDependency,
-					new HtmlEntryDependency.Template()
-				);
-				// Inline `<script>` content is bundled as its own entry — the
-				// same pipeline that handles `<script src>` — via a
-				// `data:text/javascript,...` request. The dependency
-				// template rewrites the original tag to `<script src=…>`.
-				compilation.dependencyFactories.set(
-					HtmlInlineScriptDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					HtmlInlineScriptDependency,
-					new HtmlInlineScriptDependency.Template()
-				);
-				// Inline `<style>` content is routed through the CSS pipeline
-				// as a `data:text/css` module. The dependency template reads
-				// the processed CSS text from the CSS module's code
-				// generation data (`css-text` channel set by CssGenerator
-				// when `exportType` is `"text"`).
-				compilation.dependencyFactories.set(
-					HtmlInlineStyleDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					HtmlInlineStyleDependency,
-					new HtmlInlineStyleDependency.Template()
-				);
-				// `<iframe srcdoc>` content is routed back through the HTML
-				// pipeline as a `data:text/html` module; the template reads the
-				// processed HTML from the nested module's `html` channel.
-				compilation.dependencyFactories.set(
-					HtmlInlineHtmlDependency,
-					normalModuleFactory
-				);
-				compilation.dependencyTemplates.set(
-					HtmlInlineHtmlDependency,
-					new HtmlInlineHtmlDependency.Template()
-				);
 				compilation.dependencyTemplates.set(
 					StaticExportsDependency,
 					new StaticExportsDependency.Template()
@@ -759,6 +830,74 @@ class HtmlModulesPlugin {
 					ConstDependency,
 					new ConstDependency.Template()
 				);
+				// registered when the first html module is prepared, so a build
+				// without html never loads these dependency classes
+				normalModuleFactory.hooks.prepareModuleType
+					.for(HTML_MODULE_TYPE)
+					.tap(PLUGIN_NAME, () => {
+						const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
+						const HtmlEntryDependency = require("../dependencies/HtmlEntryDependency");
+						const HtmlInlineScriptDependency = require("../dependencies/HtmlInlineScriptDependency");
+						const HtmlInlineStyleDependency = require("../dependencies/HtmlInlineStyleDependency");
+						const HtmlInlineHtmlDependency = require("../dependencies/HtmlInlineHtmlDependency");
+
+						compilation.dependencyFactories.set(
+							HtmlSourceDependency,
+							normalModuleFactory
+						);
+						compilation.dependencyTemplates.set(
+							HtmlSourceDependency,
+							new HtmlSourceDependency.Template()
+						);
+						compilation.dependencyFactories.set(
+							HtmlEntryDependency,
+							normalModuleFactory
+						);
+						compilation.dependencyTemplates.set(
+							HtmlEntryDependency,
+							new HtmlEntryDependency.Template()
+						);
+						// Inline `<script>` content is bundled as its own entry — the
+						// same pipeline that handles `<script src>` — via a
+						// `data:text/javascript,...` request. The dependency
+						// template rewrites the original tag to `<script src=…>`.
+						compilation.dependencyFactories.set(
+							HtmlInlineScriptDependency,
+							normalModuleFactory
+						);
+						compilation.dependencyTemplates.set(
+							HtmlInlineScriptDependency,
+							new HtmlInlineScriptDependency.Template()
+						);
+						// Inline `<style>` content is routed through the CSS pipeline
+						// as a `data:text/css` module. The dependency template reads
+						// the processed CSS text from the CSS module's code
+						// generation data (`css-text` channel set by CssGenerator
+						// when `exportType` is `"text"`).
+						compilation.dependencyFactories.set(
+							HtmlInlineStyleDependency,
+							normalModuleFactory
+						);
+						compilation.dependencyTemplates.set(
+							HtmlInlineStyleDependency,
+							new HtmlInlineStyleDependency.Template()
+						);
+						// `<iframe srcdoc>` content is routed back through the HTML
+						// pipeline as a `data:text/html` module; the template reads the
+						// processed HTML from the nested module's `html` channel.
+						compilation.dependencyFactories.set(
+							HtmlInlineHtmlDependency,
+							normalModuleFactory
+						);
+						compilation.dependencyTemplates.set(
+							HtmlInlineHtmlDependency,
+							new HtmlInlineHtmlDependency.Template()
+						);
+					});
+				preloadModuleType(normalModuleFactory, PLUGIN_NAME, [
+					[HTML_MODULE_TYPE, [getHtmlParser]]
+				]);
+
 				normalModuleFactory.hooks.createModuleClass
 					.for(HTML_MODULE_TYPE)
 					.tap(
@@ -777,7 +916,7 @@ class HtmlModulesPlugin {
 									options
 								)
 						);
-						return new HtmlParser(parserOptions);
+						return new (getHtmlParser.loaded())(parserOptions);
 					});
 
 				normalModuleFactory.hooks.createGenerator
@@ -792,21 +931,24 @@ class HtmlModulesPlugin {
 									options
 								)
 						);
-						return new HtmlGenerator(generatorOptions, compilation.moduleGraph);
+						return new (getHtmlGenerator())(
+							generatorOptions,
+							compilation.moduleGraph
+						);
 					});
 
 				NormalModule.getCompilationHooks(compilation).processResult.tap(
 					PLUGIN_NAME,
 					(result, module) => {
 						if (module.type === HTML_MODULE_TYPE) {
-							const [source, ...rest] = result;
+							const [source, ...rest] = removeBOMFromResult(result);
 							// `applyTemplate` is a no-op unless `module.parser.html.template`
 							// is set. Running it here (where the returned source becomes the
 							// module's stored source) keeps the parser's dependency offsets
 							// and the generator's render base in sync.
 							const parser = /** @type {HtmlParser} */ (module.parser);
 
-							return [parser.applyTemplate(removeBOM(source), module), ...rest];
+							return [parser.applyTemplate(source, module), ...rest];
 						}
 
 						return result;
@@ -845,15 +987,15 @@ class HtmlModulesPlugin {
 				/** @type {WeakMap<import("webpack-sources").Source, { resolvedContent: string, contentHash: string }>} */
 				const resolvedSentinelHashCache = new WeakMap();
 
-				// Compute a linked/entry HTML page's emitted filename + chunk-URL-resolved
-				// content + content hash for one (module, chunk). Shared by the emit loop
-				// below and the page-link resolver. The content hash covers only the
-				// chunk-URL-resolved source — links to *other* pages stay sentinels here,
-				// so a page's filename doesn't depend on the filenames of pages it links to.
-				const computePageEmit = (
-					/** @type {NormalModule} */ module,
-					/** @type {import("../Chunk")} */ chunk
-				) => {
+				/**
+				 * Computes an HTML page's emitted filename, chunk-URL-resolved content and
+				 * content hash. Links to other pages stay sentinels, so a page's filename
+				 * never depends on the filenames of the pages it links to.
+				 * @param {NormalModule} module the page's html module
+				 * @param {import("../Chunk")} chunk chunk the page is emitted from
+				 * @returns {{ resolvedContent: string, contentHash: string, filename: string, info: import("../Compilation").AssetInfo } | undefined} the page's emit, or `undefined` when it generates no html
+				 */
+				const computePageEmit = (module, chunk) => {
 					const { chunkGraph, outputOptions } = compilation;
 					const codeGenResult =
 						/** @type {import("../CodeGenerationResults")} */ (
@@ -872,9 +1014,9 @@ class HtmlModulesPlugin {
 						// Asset URL sentinels (from `HtmlEntryDependency` resource-hint
 						// tags) resolve here too — deferred from template.apply so it
 						// doesn't race with asset-module codegen.
-						const resolvedContent = HtmlGenerator.resolveAssetUrlSentinels(
-							HtmlGenerator.embedInlineChunkHashes(
-								HtmlGenerator.resolveChunkUrlSentinels(
+						const resolvedContent = getHtmlGenerator().resolveAssetUrlSentinels(
+							getHtmlGenerator().embedInlineChunkHashes(
+								getHtmlGenerator().resolveChunkUrlSentinels(
 									/** @type {string} */ (placeholderSource.source()),
 									compilation
 								),
@@ -897,11 +1039,14 @@ class HtmlModulesPlugin {
 					const sourceFilename =
 						resource.startsWith("data:text/html") && chunk.name
 							? chunk.name
-							: makePathsRelative(
-									compiler.context,
-									/** @type {string} */ (resource),
-									compiler.root
-								).replace(/^\.\//, "");
+							: toTemplateSourceFileName(
+									makePathsRelative(
+										compiler.context,
+										/** @type {string} */ (resource),
+										compiler.root
+									).replace(/^\.\//, ""),
+									compilation
+								);
 					const filenameTemplate = HtmlModulesPlugin.getChunkFilenameTemplate(
 						chunk,
 						outputOptions
@@ -927,14 +1072,15 @@ class HtmlModulesPlugin {
 					};
 				};
 
-				// Emitted filename of a linked `type: "html"` page, keyed by its entry
-				// name. Looked up from the page's own entry chunk so it's independent of
-				// chunk render order; cached for the compilation.
 				/** @type {Map<string, string>} */
 				const htmlPageFilenameCache = new Map();
-				const computePageFilenameByEntry = (
-					/** @type {string} */ entryName
-				) => {
+				/**
+				 * Emitted filename of a linked `type: "html"` page, read from the page's
+				 * own entry chunk so chunk render order cannot affect it.
+				 * @param {string} entryName entry name of the linked page
+				 * @returns {string} the page's emitted filename, `"data:,"` when it has none
+				 */
+				const computePageFilenameByEntry = (entryName) => {
 					const cached = htmlPageFilenameCache.get(entryName);
 					if (cached !== undefined) return cached;
 					let filename = "data:,";
@@ -1012,10 +1158,11 @@ class HtmlModulesPlugin {
 							// Resolve linked-page (`type: "html"`) sentinels to each page's
 							// emitted filename before the undo path, so the href is relative to
 							// this page.
-							const finalContent = HtmlGenerator.resolveHtmlPageUrlSentinels(
-								resolvedContent,
-								computePageFilenameByEntry
-							)
+							const finalContent = getHtmlGenerator()
+								.resolveHtmlPageUrlSentinels(
+									resolvedContent,
+									computePageFilenameByEntry
+								)
 								.split(autoPlaceholder)
 								.join(undoPath);
 							const finalSource = new RawSource(finalContent);
@@ -1033,8 +1180,14 @@ class HtmlModulesPlugin {
 											outputOptions
 										);
 
-							// Track HTML pages for the integrity sentinel pass (never JS chunks).
-							getState(compilation).htmlAssetNames.add(filename);
+							// Track HTML pages (never JS chunks) with the html options of the
+							// entry that owns them, read back by the emit passes below.
+							getState(compilation).htmlAssetOptions.set(
+								filename,
+								(chunk.name && htmlOptionsByEntry.get(chunk.name)) ||
+									globalHtmlOptions ||
+									{}
+							);
 
 							result.push({
 								render: () => finalSource,
@@ -1060,6 +1213,13 @@ class HtmlModulesPlugin {
 					if (htmlModules.size === 0) return source;
 					const raw = source.source();
 					if (typeof raw !== "string") return source;
+					// Every sentinel shares this prefix — one scan answers the common
+					// sentinel-free case instead of five.
+					if (!raw.includes("__WEBPACK_HTML_")) {
+						return source;
+					}
+					// Exact re-check on a prefix hit: the autoPlaceholder strip below is
+					// not sentinel-guarded, so bare-prefix false positives must bail here.
 					if (
 						!raw.includes("__WEBPACK_HTML_CHUNK_URL__") &&
 						!raw.includes("__WEBPACK_HTML_PAGE_URL__") &&
@@ -1072,20 +1232,26 @@ class HtmlModulesPlugin {
 					// Strip integrity and inline sentinels (not resolve): a JS chunk
 					// can't hold real SRI hashes for its own not-yet-final bytes, and
 					// inline content belongs only in the final .html, never in JS bundles.
-					const resolved = HtmlGenerator.stripChunkIntegritySentinels(
-						HtmlGenerator.resolveAssetUrlSentinels(
-							HtmlGenerator.resolveHtmlPageUrlSentinels(
-								HtmlGenerator.resolveChunkUrlSentinels(raw, compilation),
-								computePageFilenameByEntry
-							),
-							compilation
+					const resolved = getHtmlGenerator()
+						.stripChunkIntegritySentinels(
+							getHtmlGenerator()
+								.resolveAssetUrlSentinels(
+									getHtmlGenerator().resolveHtmlPageUrlSentinels(
+										getHtmlGenerator().resolveChunkUrlSentinels(
+											raw,
+											compilation
+										),
+										computePageFilenameByEntry
+									),
+									compilation
+								)
+								.split(autoPlaceholder)
+								.join("")
 						)
-							.split(autoPlaceholder)
-							.join("")
-					).replace(
-						/__WEBPACK_HTML_INLINE__[0-9a-f]+__[a-z]+(?:__[0-9a-f]+)?__END__/g,
-						""
-					);
+						.replace(
+							/__WEBPACK_HTML_INLINE__[0-9a-f]+__[a-z]+(?:__[0-9a-f]+)?__END__/g,
+							""
+						);
 					if (resolved === raw) return source;
 					const chunkId = String(renderContext.chunk.id);
 					const prior = sentinelResolvedSourceCache.get(chunkId);