webpack 5.108.4 → 5.109.1

package/lib/html/HtmlModulesPlugin.js

@@ -4,7 +4,10 @@
 
 "use strict";
 
+const { pathToFileURL } = require("url");
+const { AsyncSeriesHook, AsyncSeriesWaterfallHook } = require("tapable");
 const { RawSource } = require("webpack-sources");
+const Compilation = require("../Compilation");
 const EntryOptionPlugin = require("../EntryOptionPlugin");
 const EntryPlugin = require("../EntryPlugin");
 const HotUpdateChunk = require("../HotUpdateChunk");
@@ -19,21 +22,149 @@ const HtmlInlineStyleDependency = require("../dependencies/HtmlInlineStyleDepend
 const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const WebpackError = require("../errors/WebpackError");
+const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
 const { compareModulesByFullName } = require("../util/comparators");
 const createHash = require("../util/createHash");
+const createHooksRegistry = require("../util/createHooksRegistry");
+const { getUndoPath, makePathsRelative } = require("../util/identifier");
+const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
+const memoize = require("../util/memoize");
 const { digestNonNumericOnly } = require("../util/nonNumericOnlyHash");
+const {
+	PUBLIC_PATH_AUTO: autoPlaceholder
+} = require("../util/publicPathPlaceholder");
 const removeBOM = require("../util/removeBOM");
 const HtmlGenerator = require("./HtmlGenerator");
 const HtmlModule = require("./HtmlModule");
 const HtmlParser = require("./HtmlParser");
+const { escapeAttribute } = require("./syntax");
 
 /** @typedef {import("../../declarations/WebpackOptions").EntryDescriptionNormalized} EntryDescriptionNormalized */
+/** @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 */
-/** @typedef {{ request: string, entryName: string, type: "script" | "script-module" | "modulepreload" | "stylesheet" }} EntryScriptInfo */
+/** @typedef {{ request: string, entryName: string, type: "script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch", css?: boolean }} HtmlEntryInfo */
+
+/** @typedef {{ outputName: string }} HtmlTransformHtmlContext */
+/** @typedef {{ outputName: string }} HtmlEmittedContext */
+/**
+ * A tag to inject into an emitted page as a structured descriptor. Injected
+ * verbatim (not re-bundled) at the `injectTo` position.
+ * @typedef {object} HtmlTagDescriptor
+ * @property {string} tag tag name, e.g. `"script"` / `"link"` / `"meta"`
+ * @property {Record<string, string | boolean | undefined>=} attrs attributes; `true` renders a bare boolean attribute, `false`/`undefined` is omitted
+ * @property {string=} children inner content (ignored for void elements like `<link>`/`<meta>`)
+ * @property {("head" | "body" | "head-prepend" | "body-prepend")=} injectTo placement; defaults to `"head"`
+ * @property {boolean=} voidTag force a void element (no closing tag); inferred from the tag name when omitted
+ */
+/** @typedef {{ outputName: string, html: string }} HtmlInjectTagsContext */
+/**
+ * A `<script>`/`<link>`/`<style>`/`<meta>` tag already present in an emitted
+ * page, exposed for in-place mutation by `transformTags`. Mutate `attrs`, set
+ * `remove`, or change `injectTo` to move it; don't reorder the array itself.
+ * @typedef {object} HtmlMutableTag
+ * @property {string} tag the (lowercased) tag name
+ * @property {Record<string, string | boolean | undefined>} attrs mutable attributes; a string value renders `name="value"`, `true` a bare attribute, `false`/`undefined`/deleting the key drops it
+ * @property {("head" | "body" | "head-prepend" | "body-prepend")=} injectTo the tag's current region (`"head"`/`"body"`); set a different value to move it there (`*-prepend` to the region's start)
+ * @property {boolean=} remove set true to delete the whole element
+ */
+/** @typedef {{ outputName: string, html: string }} HtmlTransformTagsContext */
+/**
+ * @typedef {object} HtmlCompilationHooks
+ * @property {AsyncSeriesWaterfallHook<[HtmlTagDescriptor[], HtmlInjectTagsContext]>} injectTags called with the list of extra tags to inject into each page (initially empty) plus the current HTML; push `HtmlTagDescriptor`s and return the list — webpack serializes and places them by `injectTo`. A structured alternative to the string-level `transformHtml` for adding tags; runs before CSP so injected inline tags are hashed
+ * @property {AsyncSeriesHook<[HtmlMutableTag[], HtmlTransformTagsContext]>} transformTags called with the page's `<script>`/`<link>`/`<style>`/`<meta>` tags (webpack's own and any injected) as mutable descriptors; mutate `attrs` (add a `nonce`/`data-*`, switch `defer`↔`async`, …), set `remove: true`, or change `injectTo` to move a tag between `<head>` and `<body>`, and webpack rewrites the changed tags. Add new tags with `injectTags` instead
+ * @property {AsyncSeriesWaterfallHook<[string, HtmlTransformHtmlContext]>} transformHtml called with each emitted page's final HTML (all sentinels resolved) just before it is written; return the (possibly transformed) HTML — e.g. to minify, inject a CSP meta, or rewrite tags
+ * @property {AsyncSeriesHook<[HtmlEmittedContext]>} htmlEmitted called once each page's HTML asset has been finalized — a post-emit notification (nothing to return)
+ */
 
 const PLUGIN_NAME = "HtmlModulesPlugin";
 
+// Built-in default favicon (the webpack logo). Referenced as a `file:` request
+// so `<link rel="icon">` in the synthetic wrapper flows through the normal
+// asset pipeline — emitted hashed, with the correct publicPath, no direct IO.
+// Resolved from `__filename` (a sibling of this module) — no `path` needed.
+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.
+ * `false`/absent → none; `true` → the webpack logo; a string → one `icon`
+ * link; an object maps each `rel` to an icon (a path string, an attributes
+ * object, or an array of those for several icons under one `rel`); a function
+ * receives the page name and returns any of those. Each icon is normalized to
+ * an object so `faviconLinkTag` reads one shape.
+ * @param {FaviconOption} favicon favicon option
+ * @param {string} name page/entry name
+ * @returns {[string, FaviconIcon][]} rel/icon pairs, in order
+ */
+const resolveFaviconLinks = (favicon, name) => {
+	const value = typeof favicon === "function" ? favicon(name) : favicon;
+	if (value === true) return [["icon", { href: DEFAULT_FAVICON }]];
+	if (typeof value === "string") return [["icon", { href: value }]];
+	if (value && typeof value === "object") {
+		/** @type {[string, FaviconIcon][]} */
+		const pairs = [];
+		for (const [rel, icon] of Object.entries(value)) {
+			for (const one of Array.isArray(icon) ? icon : [icon]) {
+				pairs.push([rel, typeof one === "string" ? { href: one } : one]);
+			}
+		}
+		return pairs;
+	}
+	return [];
+};
+
+/**
+ * @param {string} rel link relation
+ * @param {FaviconIcon} icon icon `href` plus optional link attributes
+ * @returns {string} a `<link rel=… [attrs…] href=…>` tag; `type` defaults to the file format
+ */
+const faviconLinkTag = (rel, icon) => {
+	const type = icon.type || getMimeTypes().lookup(icon.href) || "";
+	const attrs = [
+		`rel="${escapeAttribute(rel)}"`,
+		icon.sizes && `sizes="${escapeAttribute(icon.sizes)}"`,
+		type && `type="${escapeAttribute(type)}"`,
+		icon.media && `media="${escapeAttribute(icon.media)}"`,
+		icon.color && `color="${escapeAttribute(icon.color)}"`,
+		icon.crossorigin && `crossorigin="${escapeAttribute(icon.crossorigin)}"`,
+		`href="${escapeAttribute(icon.href)}"`
+	];
+	return `<link ${attrs.filter(Boolean).join(" ")}>`;
+};
+
+/**
+ * Resolves `output.html.manifest` for one page to a `<link rel="manifest">`
+ * tag, or `""` when unset. A string is a path to an existing `.webmanifest`
+ * file; an object is serialized to a base64 `data:application/manifest+json`
+ * URL (routed to `asset/webmanifest` by a default rule, so its relative icon
+ * `src`s are hashed like any request); a function receives the page name.
+ * Base64 (not percent-encoding) is required because this tag is embedded in
+ * the outer `data:text/html` wrapper, which is itself percent-decoded — a
+ * percent-encoded inner URL would be corrupted by that decode.
+ * @param {ManifestOption} manifest manifest option
+ * @param {string} name page/entry name
+ * @returns {string} the `<link>` tag, or ""
+ */
+const manifestLinkTag = (manifest, name) => {
+	const value = typeof manifest === "function" ? manifest(name) : manifest;
+	if (!value) return "";
+	const href =
+		typeof value === "string"
+			? value
+			: `data:application/manifest+json;base64,${Buffer.from(
+					JSON.stringify(value),
+					"utf8"
+				).toString("base64")}`;
+	return `<link rel="manifest" href="${escapeAttribute(href)}">`;
+};
+
 // `\.html`/`\.css` request matchers for the synthetic `output.html` wrapper.
 const HTML_REQUEST_RE = /\.html(\?|$)/i;
 const CSS_REQUEST_RE = /\.css(\?|$)/i;
@@ -118,6 +249,24 @@ class HtmlModulesPlugin {
 		);
 	}
 
+	/**
+	 * Filename template for an extracted HTML page: `output.htmlFilename` for
+	 * initial chunks, `output.htmlChunkFilename` otherwise — the HTML counterpart
+	 * of `CssModulesPlugin.getChunkFilenameTemplate`.
+	 * @param {import("../Chunk")} chunk chunk
+	 * @param {import("../../declarations/WebpackOptions").Output} outputOptions output options
+	 * @returns {import("../Chunk").ChunkFilenameTemplate} used filename template
+	 */
+	static getChunkFilenameTemplate(chunk, outputOptions) {
+		return chunk.canBeInitial()
+			? /** @type {import("../Chunk").ChunkFilenameTemplate} */ (
+					outputOptions.htmlFilename
+				)
+			: /** @type {import("../Chunk").ChunkFilenameTemplate} */ (
+					outputOptions.htmlChunkFilename
+				);
+	}
+
 	/**
 	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the compiler instance
@@ -179,9 +328,37 @@ class HtmlModulesPlugin {
 						scripts.push(`<script${scriptAttr} src="${r}"></script>`);
 					}
 				}
-				return `data:text/html,<!doctype html><html><head>${links.join(
-					""
-				)}</head><body>${scripts.join("")}</body></html>`;
+				const htmlObj =
+					typeof html === "object"
+						? html
+						: typeof htmlOption === "object"
+							? htmlOption
+							: {};
+				const headTags = HtmlParser.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)
+					.map(([rel, icon]) => faviconLinkTag(rel, icon))
+					.join("");
+				const manifest =
+					typeof html === "object" && html.manifest !== undefined
+						? html.manifest
+						: false;
+				const manifestTag = manifestLinkTag(manifest, name);
+				const inject = htmlObj.inject;
+				const scriptsInHead =
+					inject === "head" || (inject !== "body" && output.module);
+				const scriptsFirst = output.module || scriptAttr === " defer";
+				const headScripts = scriptsInHead ? scripts.join("") : "";
+				return `data:text/html,<!doctype html><html><head>${faviconTag}${manifestTag}${headTags}${
+					scriptsFirst
+						? headScripts + links.join("")
+						: links.join("") + headScripts
+				}</head><body>${scriptsInHead ? "" : scripts.join("")}</body></html>`;
 			}
 		);
 
@@ -199,35 +376,46 @@ class HtmlModulesPlugin {
 		// can never be imported as a runtime leader by a later script —
 		// that's what keeps the "preload but don't execute" contract of
 		// `<link rel="modulepreload">` intact.
-		/** @type {WeakMap<import("../Compilation"), Set<string>>} */
-		const stylesheetEntriesPerCompilation = new WeakMap();
+		// 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> }>} */
+		const compilationState = new WeakMap();
+		/**
+		 * @param {import("../Compilation")} compilation compilation
+		 * @returns {{ htmlModules: Set<import("../Module")>, stylesheetEntries: Set<string>, htmlAssetNames: Set<string> }} per-compilation state
+		 */
+		const getState = (compilation) => {
+			let state = compilationState.get(compilation);
+			if (state === undefined) {
+				state = {
+					htmlModules: new Set(),
+					stylesheetEntries: new Set(),
+					htmlAssetNames: new Set()
+				};
+				compilationState.set(compilation, state);
+			}
+			return state;
+		};
 		compiler.hooks.finishMake.tapAsync(PLUGIN_NAME, (compilation, callback) => {
-			/** @type {Promise<void>[]} */
-			const promises = [];
-			/** @type {Set<string>} */
-			const stylesheetEntries = new Set();
-			stylesheetEntriesPerCompilation.set(compilation, stylesheetEntries);
-
-			for (const module of compilation.modules) {
-				if (module.type !== HTML_MODULE_TYPE) continue;
-				const buildInfo = /** @type {HtmlModuleBuildInfo | undefined} */ (
+			const { htmlModules, stylesheetEntries } = getState(compilation);
+
+			// Collect the entries an HTML module asks for. Only the script chains
+			// (`script`, `script-module`) share a runtime via a leader-only
+			// `dependOn`; `modulepreload`, `stylesheet` and `html` links are all
+			// independent entries (a CSS or page entry must not chain into a JS
+			// leader, or the chunk would mix unrelated outputs).
+			/** @type {(module: import("../Module")) => { context: string, request: string, name: string, dependOn: string[] | undefined }[]} */
+			const collectEntrySpecs = (module) => {
+				const { htmlEntries } = /** @type {HtmlModuleBuildInfo} */ (
 					module.buildInfo
 				);
-				const htmlEntryScripts = buildInfo && buildInfo.htmlEntryScripts;
-				if (!htmlEntryScripts) continue;
-
+				if (!htmlEntries) return [];
 				const context = /** @type {string} */ (module.context);
-
-				for (const [groupKind, group] of Object.entries(htmlEntryScripts)) {
-					// Only the script chains (`script`, `script-module`) need a
-					// shared runtime via leader-only `dependOn` — the others
-					// either preload without executing (`modulepreload`) or
-					// produce CSS chunks (`stylesheet`) which have no runtime
-					// to share. CSS entries must NOT chain into a JS leader
-					// either, because the resulting chunk would mix a CSS
-					// stylesheet with a JS runtime.
+				const specs = [];
+				for (const [groupKind, group] of Object.entries(htmlEntries)) {
 					const isChainGroup =
-						groupKind !== "modulepreload" && groupKind !== "stylesheet";
+						groupKind === "script" || groupKind === "script-module";
 					/** @type {string | undefined} */
 					let leaderName;
 					for (const entry of group) {
@@ -238,48 +426,220 @@ class HtmlModulesPlugin {
 						if (isChainGroup && leaderName === undefined) {
 							leaderName = entry.entryName;
 						}
-						if (groupKind === "stylesheet") {
+						// Stylesheet entries and `as="style"` preload/prefetch entries emit
+						// a CSS chunk, so they need the CSS filename template below.
+						if (groupKind === "stylesheet" || entry.css) {
 							stylesheetEntries.add(entry.entryName);
 						}
-						promises.push(
-							new Promise((resolve, reject) => {
-								compilation.addEntry(
-									context,
-									EntryPlugin.createDependency(entry.request, {
-										name: entry.entryName
-									}),
-									{
-										name: entry.entryName,
-										// Each script src / modulepreload entry gets its own
-										// filename derived from the synthetic entry name so it
-										// doesn't collide with the user's `output.filename`.
-										// For CSS entries the JS `filename` is irrelevant (no
-										// `.js` is emitted) — the CSS file's name is set on the
-										// chunk via `cssFilenameTemplate` in `afterChunks` below.
-										filename:
-											compilation.outputOptions.chunkFilename || "[name].js",
-										dependOn
-									},
-									(err) => {
-										if (err) reject(err);
-										else resolve();
-									}
-								);
-							})
-						);
+						specs.push({
+							context,
+							request: entry.request,
+							name: entry.entryName,
+							dependOn
+						});
 					}
 				}
-			}
+				return specs;
+			};
+
+			// Push one collected reference as a compilation entry; resolves with
+			// the built entry module.
+			/** @type {(spec: { context: string, request: string, name: string, dependOn: string[] | undefined }) => Promise<import("../Module") | null>} */
+			const addEntry = (spec) =>
+				new Promise((resolve, reject) => {
+					compilation.addEntry(
+						spec.context,
+						EntryPlugin.createDependency(spec.request, { name: spec.name }),
+						{
+							name: spec.name,
+							// Each entry gets its own filename from the synthetic entry name so
+							// it doesn't collide with `output.filename`. CSS entries set their
+							// `.css` name via `cssFilenameTemplate` below; `html` page entries
+							// emit their file via `renderManifest`.
+							filename: compilation.outputOptions.chunkFilename || "[name].js",
+							dependOn: spec.dependOn
+						},
+						(err, entryModule) =>
+							err ? reject(err) : resolve(entryModule || null)
+					);
+				});
 
-			Promise.all(promises).then(
+			// Create one HTML module's entries. A `type: "html"` link is itself an
+			// HTML entry, so after it builds we recurse into it — the same handling
+			// every HTML entry already gets. `processed` guards diamonds and cycles.
+			/** @type {WeakSet<import("../Module")>} */
+			const processed = new WeakSet();
+			/** @type {(module: import("../Module")) => Promise<void>} */
+			const processEntry = async (module) => {
+				if (processed.has(module)) return;
+				processed.add(module);
+				await Promise.all(
+					collectEntrySpecs(module).map(async (spec) => {
+						const entryModule = await addEntry(spec);
+						if (entryModule && entryModule.type === HTML_MODULE_TYPE) {
+							await processEntry(entryModule);
+						}
+					})
+				);
+			};
+			// Seed with the HTML modules seen during make (config entries /
+			// imports, fresh or cache-restored); linked pages are reached by
+			// recursion above.
+			Promise.all([...htmlModules].map(processEntry)).then(
 				() => callback(),
-				(err) => callback(err)
+				callback
 			);
 		});
 
+		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;
+		// `"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).
+		// TODO webpack 6: html defaults to `true`, drop this implicit-only fallback.
+		const implicitlyEnabled = compiler.options.experiments.html === "auto";
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
 			(compilation, { normalModuleFactory }) => {
+				if (implicitlyEnabled) {
+					implicitTypeLoaderFallback(
+						normalModuleFactory,
+						PLUGIN_NAME,
+						/\.html$/i,
+						HTML_MODULE_TYPE
+					);
+				}
+				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);
+				};
+				compilation.hooks.succeedModule.tap(PLUGIN_NAME, trackHtmlModule);
+				compilation.hooks.stillValidModule.tap(PLUGIN_NAME, trackHtmlModule);
+
+				// Resolve integrity and inline sentinels after `RealContentHashPlugin`
+				// so final bytes are in place. Only HTML pages carry these sentinels —
+				// never JS chunks that embed an HTML string.
+				// SRI only takes effect on a cross-origin subresource fetched
+				// 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) {
+					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.'
+						)
+					);
+				}
+				compilation.hooks.processAssets.tapPromise(
+					{
+						name: PLUGIN_NAME,
+						stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH + 1
+					},
+					async (assets) => {
+						const { htmlAssetNames } = 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 content = assets[name].source();
+							if (typeof content !== "string") continue;
+							let resolved = content;
+							if (
+								integrityOn &&
+								resolved.includes("__WEBPACK_HTML_INTEGRITY__")
+							) {
+								resolved = HtmlGenerator.resolveChunkIntegritySentinels(
+									resolved,
+									compilation,
+									/** @type {import("./HtmlGenerator").HtmlIntegrity} */ (
+										integrity
+									)
+								);
+							}
+							if (resolved.includes("__WEBPACK_HTML_INLINE__")) {
+								resolved = HtmlGenerator.resolveChunkInlineSentinels(
+									resolved,
+									compilation,
+									name,
+									inlinedFiles
+								);
+							}
+							// `injectTags` (add tags), `transformTags` (mutate/move/remove the
+							// page's own and injected tags), and CSP all run over a single
+							// parse: collect the tags/anchors once, let the hooks act, then
+							// render every edit — placement, attribute rewrites, moves,
+							// removals, CSP hashes/nonce/meta — in one pass. Injected inline
+							// `<script>`/`<style>` are hashed like the page's own.
+							const injected = await hooks.injectTags.promise([], {
+								outputName: name,
+								html: resolved
+							});
+							const transformTags = hooks.transformTags.taps.length > 0;
+							if (injected.length > 0 || transformTags || csp) {
+								const model = HtmlGenerator.collectHtml(resolved);
+								HtmlGenerator.addInjectedTags(model, injected);
+								if (transformTags) {
+									await hooks.transformTags.promise(model.tags, {
+										outputName: name,
+										html: resolved
+									});
+								}
+								resolved = HtmlGenerator.renderHtml(resolved, model, csp);
+							}
+							// Final, fully-resolved HTML — let plugins transform it (minify,
+							// inject a CSP meta, rewrite tags) before it is written.
+							resolved = await hooks.transformHtml.promise(resolved, {
+								outputName: name
+							});
+							if (resolved !== content) {
+								compilation.updateAsset(name, new RawSource(resolved));
+							}
+							await hooks.htmlEmitted.promise({ outputName: name });
+						}
+						// 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.
+						// 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) {
+							/** @type {Set<string>} */
+							const stillReferenced = new Set();
+							for (const name of Object.keys(compilation.assets)) {
+								if (
+									inlinedFiles.has(name) ||
+									stillReferenced.size === inlinedFiles.size
+								) {
+									continue;
+								}
+								const source = compilation.assets[name].source();
+								if (typeof source !== "string") continue;
+								for (const file of inlinedFiles) {
+									if (!stillReferenced.has(file) && source.includes(file)) {
+										stillReferenced.add(file);
+									}
+								}
+							}
+							for (const file of inlinedFiles) {
+								if (!stillReferenced.has(file)) compilation.deleteAsset(file);
+							}
+						}
+					}
+				);
+
 				// CSS entries created by `<link rel="stylesheet">` in HTML need
 				// their `.css` filename set via `chunk.cssFilenameTemplate`
 				// (the field `CssModulesPlugin.getChunkFilenameTemplate` reads).
@@ -289,9 +649,8 @@ class HtmlModulesPlugin {
 				// entry emits to a distinct file derived from `output.cssFilename`
 				// (or `output.cssChunkFilename` for non-initial CSS chunks).
 				compilation.hooks.afterChunks.tap(PLUGIN_NAME, () => {
-					const stylesheetEntries =
-						stylesheetEntriesPerCompilation.get(compilation);
-					if (!stylesheetEntries || stylesheetEntries.size === 0) return;
+					const { stylesheetEntries } = getState(compilation);
+					if (stylesheetEntries.size === 0) return;
 					for (const entryName of stylesheetEntries) {
 						const entrypoint = compilation.entrypoints.get(entryName);
 						if (!entrypoint) continue;
@@ -451,13 +810,6 @@ class HtmlModulesPlugin {
 				// template's `[contenthash]` placeholder works; the
 				// compilation hash is also forwarded so `[fullhash]` /
 				// `[hash]` work in user-supplied templates.
-				const {
-					getUndoPath,
-					makePathsRelative
-				} = require("../util/identifier");
-				const {
-					PUBLIC_PATH_AUTO: autoPlaceholder
-				} = require("../util/publicPathPlaceholder");
 
 				// Sentinel-resolved content and its content hash depend only on
 				// the HTML-type module source — not on the chunk or output
@@ -469,9 +821,124 @@ 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
+				) => {
+					const { chunkGraph, outputOptions } = compilation;
+					const codeGenResult =
+						/** @type {import("../CodeGenerationResults")} */ (
+							compilation.codeGenerationResults
+						).get(module, chunk.runtime);
+					const placeholderSource = codeGenResult.sources.get(HTML_TYPE);
+					if (!placeholderSource) return undefined;
+					let cached = resolvedSentinelHashCache.get(placeholderSource);
+					if (cached === undefined) {
+						// Resolve chunk-URL sentinels *before* hashing so the HTML's
+						// `[contenthash]` invalidates with the referenced chunks'
+						// filenames. Inlined chunks have no URL, so tag their inline
+						// sentinels with the chunk content hash — that keeps the emitted
+						// bytes (and RealContentHashPlugin's later recompute)
+						// content-dependent, so the page hash tracks inlined content too.
+						// 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(
+									/** @type {string} */ (placeholderSource.source()),
+									compilation
+								),
+								compilation
+							),
+							compilation
+						);
+						cached = {
+							resolvedContent,
+							contentHash: HtmlModulesPlugin.computeContentHash(
+								resolvedContent,
+								outputOptions
+							)
+						};
+						resolvedSentinelHashCache.set(placeholderSource, cached);
+					}
+					const resource = module.getResource() || module.resource;
+					// Synthetic `output.html` entries are `data:text/html` modules with no
+					// real basename — name the file after the entry instead.
+					const sourceFilename =
+						resource.startsWith("data:text/html") && chunk.name
+							? chunk.name
+							: makePathsRelative(
+									compiler.context,
+									/** @type {string} */ (resource),
+									compiler.root
+								).replace(/^\.\//, "");
+					const filenameTemplate = HtmlModulesPlugin.getChunkFilenameTemplate(
+						chunk,
+						outputOptions
+					);
+					const { path: filename, info } = compilation.getPathWithInfo(
+						/** @type {import("../TemplatedPathPlugin").TemplatePath} */
+						(filenameTemplate),
+						{
+							module,
+							runtime: chunk.runtime,
+							chunkGraph,
+							contentHash: cached.contentHash,
+							contentHashType: HTML_TYPE,
+							filename: sourceFilename,
+							hash: compilation.hash
+						}
+					);
+					return {
+						resolvedContent: cached.resolvedContent,
+						contentHash: cached.contentHash,
+						filename,
+						info
+					};
+				};
+
+				// 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
+				) => {
+					const cached = htmlPageFilenameCache.get(entryName);
+					if (cached !== undefined) return cached;
+					let filename = "data:,";
+					const entrypoint = compilation.entrypoints.get(entryName);
+					const chunk = entrypoint && entrypoint.getEntrypointChunk();
+					if (chunk) {
+						const modules =
+							compilation.chunkGraph.getOrderedChunkModulesIterableBySourceType(
+								chunk,
+								HTML_TYPE,
+								compareModulesByFullName(compilation.compiler)
+							);
+						const module = modules && modules[Symbol.iterator]().next().value;
+						if (module) {
+							const emit = computePageEmit(
+								/** @type {NormalModule} */ (module),
+								chunk
+							);
+							if (emit) filename = emit.filename;
+						}
+					}
+					htmlPageFilenameCache.set(entryName, filename);
+					return filename;
+				};
+
 				compilation.hooks.renderManifest.tap(
 					PLUGIN_NAME,
-					(result, { chunk, codeGenerationResults, hash: compilationHash }) => {
+					(result, { chunk }) => {
 						// HMR's `HotUpdateChunk`s flow through the same hook
 						// but aren't real output chunks — extracting `.html`
 						// for them would create stray hot-update HTML files.
@@ -488,88 +955,26 @@ class HtmlModulesPlugin {
 						const outputOptions = compilation.outputOptions;
 						for (const module of modules) {
 							const normalModule = /** @type {NormalModule} */ (module);
-							const codeGenResult = codeGenerationResults.get(
-								module,
-								chunk.runtime
-							);
-							const placeholderSource = codeGenResult.sources.get(HTML_TYPE);
-							if (!placeholderSource) continue;
-
-							// `<iframe srcdoc>` modules expose `html` only so
-							// HtmlInlineHtmlDependency can write the processed markup back
-							// into the host attribute — they are never standalone pages.
-							// `generator.extract: "inline"` marks them so no `.html` file is
-							// emitted; without this they'd collide on the `data:text/html`
-							// → chunk-name path below (every srcdoc module in a chunk would
+							// `<iframe srcdoc>` modules expose `html` only so HtmlInlineHtmlDependency
+							// can write the processed markup back into the host attribute — they are
+							// never standalone pages. `generator.extract: "inline"` marks them so no
+							// `.html` file is emitted; without this they'd collide on the
+							// `data:text/html` → chunk-name path (every srcdoc module in a chunk would
 							// emit `<chunk>.html`). An O(1) flag check, not a scan.
 							const generatorOptions = normalModule.generatorOptions;
 							if (generatorOptions && generatorOptions.extract === "inline") {
 								continue;
 							}
 
-							const filenameTemplate = chunk.canBeInitial()
-								? outputOptions.htmlFilename
-								: outputOptions.htmlChunkFilename;
-
-							const resource =
-								normalModule.getResource() || normalModule.resource;
-							// Synthetic `output.html` entries are `data:text/html` modules
-							// with no real basename — name the file after the entry instead.
-							const sourceFilename =
-								resource.startsWith("data:text/html") && chunk.name
-									? chunk.name
-									: makePathsRelative(
-											compiler.context,
-											/** @type {string} */ (resource),
-											compiler.root
-										).replace(/^\.\//, "");
-
-							let cached = resolvedSentinelHashCache.get(placeholderSource);
-							if (cached === undefined) {
-								const placeholderContent = /** @type {string} */ (
-									placeholderSource.source()
-								);
-								// Resolve sentinels *before* hashing so the HTML's `[contenthash]`
-								// invalidates with the referenced chunks' filenames.
-								const resolvedContent = HtmlGenerator.resolveChunkUrlSentinels(
-									placeholderContent,
-									compilation
-								);
-								cached = {
-									resolvedContent,
-									contentHash: HtmlModulesPlugin.computeContentHash(
-										resolvedContent,
-										outputOptions
-									)
-								};
-								resolvedSentinelHashCache.set(placeholderSource, cached);
-							}
-							const { resolvedContent, contentHash } = cached;
-
-							const { path: filename, info } = compilation.getPathWithInfo(
-								/** @type {import("../TemplatedPathPlugin").TemplatePath} */
-								(filenameTemplate),
-								{
-									module,
-									runtime: chunk.runtime,
-									chunkGraph,
-									contentHash,
-									contentHashType: HTML_TYPE,
-									filename: sourceFilename,
-									hash: compilationHash
-								}
-							);
+							const emit = computePageEmit(normalModule, chunk);
+							if (!emit) continue;
+							const { resolvedContent, contentHash, filename, info } = emit;
 
-							// Resolve any remaining `[webpack/auto]` placeholders to
-							// an undo path computed from the emitted HTML's location.
-							// Without this, an `output.htmlFilename` that emits into
-							// a subdirectory (e.g. `pages/[name].html`) would leave
-							// asset URLs like `image.png` and chunk URLs like
-							// `main.js` root-relative, so the browser would resolve
-							// them under the HTML's directory instead of the
-							// `output.path` root.
-							// A relative `<base href>` prepends `../`s so the base can't
-							// misdirect the rewritten URLs (see `HtmlParser`).
+							// Resolve any remaining `[webpack/auto]` placeholders to an undo
+							// path computed from the emitted HTML's location, so asset/chunk
+							// URLs stay relative to `output.path` even when the page emits into
+							// a subdirectory. A relative `<base href>` prepends `../`s so the
+							// base can't misdirect the rewritten URLs (see `HtmlParser`).
 							const basePrefix =
 								/** @type {HtmlModuleBuildInfo} */ (normalModule.buildInfo)
 									.baseUrlPrefix || "";
@@ -580,20 +985,22 @@ class HtmlModulesPlugin {
 									/** @type {string} */ (outputOptions.path),
 									false
 								);
-							const finalContent = resolvedContent.includes(autoPlaceholder)
-								? resolvedContent.split(autoPlaceholder).join(undoPath)
-								: resolvedContent;
+							// 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
+							)
+								.split(autoPlaceholder)
+								.join(undoPath);
 							const finalSource = new RawSource(finalContent);
-							// The same HTML module can land in multiple chunks
-							// with different `output.htmlFilename` /
-							// `output.htmlChunkFilename` shapes, which means
-							// different `undoPath`s and therefore different
-							// final content for the same module id. Include
-							// the emitted filename in the asset cache key and
-							// the post-undo-path content in the hash, so the
-							// asset cache can't reuse one variant's bytes at
-							// another variant's URL. Unchanged content reuses
-							// the memoized hash instead of re-digesting.
+							// The same HTML module can land in multiple chunks with different
+							// `htmlFilename`/`htmlChunkFilename` shapes → different `undoPath`s and
+							// final content for the same module id. Include the emitted filename in
+							// the asset cache key and the post-undo-path content in the hash so the
+							// asset cache can't reuse one variant's bytes at another variant's URL.
+							// Unchanged content reuses the memoized hash instead of re-digesting.
 							const finalContentHash =
 								finalContent === resolvedContent
 									? contentHash
@@ -602,6 +1009,9 @@ class HtmlModulesPlugin {
 											outputOptions
 										);
 
+							// Track HTML pages for the integrity sentinel pass (never JS chunks).
+							getState(compilation).htmlAssetNames.add(filename);
+
 							result.push({
 								render: () => finalSource,
 								filename,
@@ -619,20 +1029,39 @@ class HtmlModulesPlugin {
 
 				// Resolve sentinels at JS chunk render time so later passes
 				// (SourceMapDevToolPlugin, size optimizers, RealContentHash) see resolved bytes.
-				const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-
 				const jsHooks =
 					JavascriptModulesPlugin.getCompilationHooks(compilation);
 				jsHooks.render.tap(PLUGIN_NAME, (source, renderContext) => {
+					// No HTML modules ⇒ no sentinels; skip materializing the JS source.
+					if (htmlModules.size === 0) return source;
 					const raw = source.source();
 					if (typeof raw !== "string") return source;
-					if (!raw.includes("__WEBPACK_HTML_CHUNK_URL__")) return source;
-					const resolved = HtmlGenerator.resolveChunkUrlSentinels(
-						raw,
-						compilation
-					)
-						.split(autoPlaceholder)
-						.join("");
+					if (
+						!raw.includes("__WEBPACK_HTML_CHUNK_URL__") &&
+						!raw.includes("__WEBPACK_HTML_PAGE_URL__") &&
+						!raw.includes("__WEBPACK_HTML_INTEGRITY__") &&
+						!raw.includes("__WEBPACK_HTML_INLINE__") &&
+						!raw.includes("__WEBPACK_HTML_ASSET_URL__")
+					) {
+						return source;
+					}
+					// 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
+						)
+							.split(autoPlaceholder)
+							.join("")
+					).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);
@@ -664,4 +1093,19 @@ class HtmlModulesPlugin {
 	}
 }
 
+/**
+ * Per-compilation hooks for the experimental HTML support.
+ * @param {Compilation} compilation the compilation
+ * @returns {HtmlCompilationHooks} the hooks
+ */
+HtmlModulesPlugin.getCompilationHooks = createHooksRegistry(
+	() =>
+		/** @type {HtmlCompilationHooks} */ ({
+			injectTags: new AsyncSeriesWaterfallHook(["tags", "context"]),
+			transformTags: new AsyncSeriesHook(["tags", "context"]),
+			transformHtml: new AsyncSeriesWaterfallHook(["html", "context"]),
+			htmlEmitted: new AsyncSeriesHook(["context"])
+		})
+);
+
 module.exports = HtmlModulesPlugin;