webpack 5.111.0 → 5.112.0

package/lib/html/HtmlModulesPlugin.js

@@ -4,23 +4,20 @@
 
 "use strict";
 
-const { basename, extname } = require("path");
 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");
-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 StaticExportsDependency = require("../dependencies/StaticExportsDependency");
+const ConstDependency = require("../dependencies/core/ConstDependency");
+const StaticExportsDependency = require("../dependencies/core/StaticExportsDependency");
+const EntryOptionPlugin = require("../entry/EntryOptionPlugin");
+const EntryPlugin = require("../entry/EntryPlugin");
 const WebpackError = require("../errors/WebpackError");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const ConcatenatedModule = require("../optimize/ConcatenatedModule");
+const { HTML_TYPE } = require("../module/ModuleSourceTypeConstants");
+const { HTML_MODULE_TYPE } = require("../module/ModuleTypeConstants");
+const NormalModule = require("../module/NormalModule");
+const { toTemplateSourceFileName } = require("../template/TemplatedPathPlugin");
 const {
 	compareModulesByFullName,
 	compareModulesByIdentifier
@@ -28,9 +25,9 @@ const {
 const createHash = require("../util/createHash");
 const createHooksRegistry = require("../util/createHooksRegistry");
 const {
+	getRequestBaseName,
 	getUndoPath,
-	makePathsRelative,
-	parseResource
+	makePathsRelative
 } = require("../util/identifier");
 const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
 const lazyModule = require("../util/lazyModule");
@@ -45,7 +42,7 @@ const HtmlModule = require("./HtmlModule");
 
 const getMimeTypes = memoize(() => require("../util/mimeTypes"));
 
-const getHtmlSyntax = memoize(() => require("./syntax"));
+const getHtmlSyntax = memoize(() => require("./syntax-parser"));
 
 // 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.
@@ -73,14 +70,14 @@ const getCssModulesPlugin = memoize(() => require("../css/CssModulesPlugin"));
 /** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["favicon"]} FaviconOption */
 /** @typedef {import("../../declarations/WebpackOptions").OutputHtmlOptions["manifest"]} ManifestOption */
 /** @typedef {Exclude<HtmlFaviconIcon, string>} FaviconIcon */
-/** @import Chunk, { ChunkFilenameTemplate } from "../Chunk" */
-/** @import ChunkGraph from "../ChunkGraph" */
+/** @import Chunk, { ChunkFilenameTemplate } from "../graph/Chunk" */
+/** @import ChunkGraph from "../graph/ChunkGraph" */
 /** @import Compiler from "../Compiler" */
-/** @import Module from "../Module" */
+/** @import Module from "../module/Module" */
 /** @typedef {import("../Compilation").EntryData} EntryData */
 /** @import { HtmlModuleBuildInfo } from "./HtmlModule" */
 /** @import HtmlParser from "./HtmlParser" */
-/** @typedef {{ request: string, entryName: string, index: number, type: "script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch", css?: boolean }} HtmlEntryInfo */
+/** @typedef {{ request: string, entryName: string, index: number, type: "script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch", css?: boolean, chunkName?: string }} HtmlEntryInfo */
 /**
  * What one extracted entry needs to be named. Recorded in page order once
  * every page is built, and resolved to filenames once chunks exist.
@@ -114,6 +111,7 @@ const getCssModulesPlugin = memoize(() => require("../css/CssModulesPlugin"));
  * @property {boolean=} remove set true to delete the whole element
  */
 /** @typedef {{ outputName: string, html: string }} HtmlTransformTagsContext */
+/** @typedef {{ context: string, request: string, name: string, index: number, dependOn: string[] | undefined, page: boolean }} HtmlEntrySpec */
 
 const createCompilationHooks = () => ({
 	/**
@@ -148,10 +146,9 @@ const createCompilationHooks = () => ({
 
 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.
+// Built-in default favicon, referenced as a `file:` request so the wrapper's
+// `<link rel="icon">` flows through the normal asset pipeline: emitted hashed,
+// with the right publicPath and no direct IO.
 const DEFAULT_FAVICON = new URL("./favicon.svg", pathToFileURL(__filename))
 	.href;
 
@@ -290,29 +287,19 @@ const getPageOnlyEntry = (compilation, module) => {
 	return configured === undefined ? entry : undefined;
 };
 
-/**
- * The basename a tag's url lends to the entry it becomes, so
- * `src="./my-script.js"` emits `my-script.js`. Undefined for an inline body.
- * @param {string} request the tag's request
- * @returns {string | undefined} the basename, when the url carries one
- */
-const getRequestBaseName = (request) => {
-	// An inline `<script>` body is a `data:` request webpack writes itself.
-	if (request.startsWith("data:")) return undefined;
-	const { path: file } = parseResource(request);
-	return basename(file, extname(file)) || undefined;
-};
-
 /**
  * Claims `base`, numbering it while something else already emits under that
  * name, so two tags sharing a basename stay distinct.
  * @param {string} base preferred name
  * @param {Set<string>} taken names this kind of output already emits under
+ * @param {Map<string, number>} next per base, the number every lower one is taken up to
  * @returns {string} the claimed name
  */
-const claimName = (base, taken) => {
-	let name = base;
-	for (let index = 1; taken.has(name); index++) name = `${base}${index}`;
+const claimName = (base, taken, next) => {
+	let index = next.get(base) || 0;
+	let name = index === 0 ? base : `${base}${index}`;
+	while (taken.has(name)) name = `${base}${++index}`;
+	next.set(base, index + 1);
 	taken.add(name);
 	return name;
 };
@@ -418,7 +405,7 @@ const collectHtmlEntryRequests = (name, entries) => {
 
 /**
  * @param {string} name definition name in `schemas/WebpackOptions.json`
- * @returns {EXPECTED_OBJECT} a schema referencing `#/definitions/<name>`
+ * @returns {{ oneOf: [{ $ref: string }], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} a schema referencing `#/definitions/<name>`
  */
 const getSchema = (name) => {
 	const { definitions } = require("../../schemas/WebpackOptions.json");
@@ -466,16 +453,16 @@ 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("../graph/Chunk")} chunk chunk
 	 * @param {OutputOptions} outputOptions output options
-	 * @returns {import("../Chunk").ChunkFilenameTemplate} used filename template
+	 * @returns {import("../graph/Chunk").ChunkFilenameTemplate} used filename template
 	 */
 	static getChunkFilenameTemplate(chunk, outputOptions) {
 		return chunk.canBeInitial()
-			? /** @type {import("../Chunk").ChunkFilenameTemplate} */ (
+			? /** @type {import("../graph/Chunk").ChunkFilenameTemplate} */ (
 					outputOptions.htmlFilename
 				)
-			: /** @type {import("../Chunk").ChunkFilenameTemplate} */ (
+			: /** @type {import("../graph/Chunk").ChunkFilenameTemplate} */ (
 					outputOptions.htmlChunkFilename
 				);
 	}
@@ -506,10 +493,9 @@ class HtmlModulesPlugin {
 		// 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.
+		// SRI sentinels are emitted before the owning entry is known, so one page
+		// asking for integrity turns them on for all and the rest drop them on emit.
+		// Authored `.html` pages never reach the entry hook, hence the global seed.
 		let anyIntegrity = isIntegrityEnabled(
 			globalHtmlOptions && globalHtmlOptions.integrity
 		);
@@ -542,13 +528,9 @@ class HtmlModulesPlugin {
 			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
-		// chunks and applies the `template` option. `dependOn` ancestors are
-		// injected first so the page loads the shared/runtime chunks before
-		// the entry's own (see `collectHtmlEntryRequests`). `crossOriginLoading`
-		// and SRI are applied to the injected tags centrally in
-		// HtmlEntryDependency.
+		// `output.html` wraps a non-HTML entry in a synthetic HTML module, so the
+		// existing pipeline injects its chunks. `dependOn` ancestors go first, so the
+		// page loads shared and runtime chunks before the entry's own.
 		EntryOptionPlugin.getHooks(compiler).entry.tap(
 			PLUGIN_NAME,
 			(context, name, desc) => {
@@ -623,24 +605,20 @@ class HtmlModulesPlugin {
 		/** @type {Map<string, { content: string, source: import("webpack-sources").RawSource }>} */
 		const sentinelResolvedSourceCache = new Map();
 
-		// `<script src>` and `<link rel="modulepreload">` references collected
-		// by HtmlParser become real compilation entries here. The `script`
-		// and `script-module` groups are chained via a leader-only dependOn so
-		// they share a runtime — the first entry of the group owns it and
-		// every subsequent entry sets `dependOn: [leader]`. Modulepreload
-		// entries are emitted as independent entries (no dependOn) so they
-		// 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.
-		// Per-compilation state: the HTML modules seen during make (so
-		// `finishMake` creates their entries without scanning the whole module
-		// 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<Module>, stylesheetEntries: Set<string>, pendingNames: Map<string, PendingName>, htmlAssetOptions: Map<string, OutputHtmlOptions> }>} */
+		// WHY: the `script` and `script-module` groups are chained through a
+		// leader-only `dependOn`, so they share a runtime: the group's first entry
+		// owns it and every later one sets `dependOn: [leader]`. A modulepreload
+		// entry is emitted independently, with no `dependOn`, so a later script can
+		// never import it as a runtime leader — which is what keeps the "preload but
+		// don't execute" contract of `<link rel="modulepreload">` intact.
+		// Per-compilation state: the HTML modules seen during make, so `finishMake`
+		// creates their entries without scanning the module graph, plus the
+		// stylesheet entry names and each emitted page's html options.
+		/** @type {WeakMap<import("../Compilation"), { htmlModules: Set<Module>, stylesheetEntries: Set<string>, pendingNames: Map<string, PendingName>, htmlAssetOptions: Map<string, OutputHtmlOptions>, pageNames: Map<string, string> }>} */
 		const compilationState = new WeakMap();
 		/**
 		 * @param {import("../Compilation")} compilation compilation
-		 * @returns {{ htmlModules: Set<Module>, stylesheetEntries: Set<string>, pendingNames: Map<string, PendingName>, htmlAssetOptions: Map<string, OutputHtmlOptions> }} per-compilation state
+		 * @returns {{ htmlModules: Set<Module>, stylesheetEntries: Set<string>, pendingNames: Map<string, PendingName>, htmlAssetOptions: Map<string, OutputHtmlOptions>, pageNames: Map<string, string> }} per-compilation state
 		 */
 		const getState = (compilation) => {
 			let state = compilationState.get(compilation);
@@ -649,14 +627,15 @@ class HtmlModulesPlugin {
 					htmlModules: new Set(),
 					stylesheetEntries: new Set(),
 					pendingNames: new Map(),
-					htmlAssetOptions: new Map()
+					htmlAssetOptions: new Map(),
+					pageNames: new Map()
 				};
 				compilationState.set(compilation, state);
 			}
 			return state;
 		};
 		compiler.hooks.finishMake.tapAsync(PLUGIN_NAME, (compilation, callback) => {
-			const { htmlModules, stylesheetEntries, pendingNames } =
+			const { htmlModules, stylesheetEntries, pendingNames, pageNames } =
 				getState(compilation);
 			/** @type {Set<string>} */
 			const extractedNames = new Set();
@@ -665,27 +644,32 @@ class HtmlModulesPlugin {
 			/** @type {Map<string, Module>} */
 			const linkedPages = new Map();
 
-			// 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: Module) => { context: string, request: string, name: string, dependOn: string[] | undefined }[]} */
+			// Collect the entries an HTML module asks for. Only the script chains share
+			// a runtime, through a leader-only `dependOn`; chaining a CSS or page entry
+			// into a JS leader would mix unrelated outputs into one chunk.
+			/** @type {(module: Module) => HtmlEntrySpec[]} */
 			const collectEntrySpecs = (module) => {
 				const { htmlEntries } = /** @type {HtmlModuleBuildInfo} */ (
 					module.buildInfo
 				);
 				if (!htmlEntries) return [];
 				const context = /** @type {string} */ (module.context);
+				/** @type {HtmlEntrySpec[]} */
 				const specs = [];
+				/** @type {Set<string>} */
+				const specNames = new Set();
 				for (const [groupKind, group] of Object.entries(htmlEntries)) {
 					const isChainGroup =
 						groupKind === "script" || groupKind === "script-module";
 					/** @type {string | undefined} */
 					let leaderName;
 					for (const entry of group) {
+						// A run's tags are added under one entry name and the first of
+						// them carries its options, so a later one re-decides nothing.
 						const dependOn =
-							isChainGroup && leaderName !== undefined
+							isChainGroup &&
+							leaderName !== undefined &&
+							!specNames.has(entry.entryName)
 								? [leaderName]
 								: undefined;
 						if (isChainGroup && leaderName === undefined) {
@@ -697,14 +681,39 @@ class HtmlModulesPlugin {
 							stylesheetEntries.add(entry.entryName);
 						}
 						extractedNames.add(entry.entryName);
+						specNames.add(entry.entryName);
 						specs.push({
 							context,
 							request: entry.request,
 							name: entry.entryName,
-							dependOn
+							index: entry.index,
+							dependOn,
+							page: groupKind === "html"
 						});
 					}
 				}
+				// A run is collected group by group, so its members are put back into
+				// the document's order — an entry's array is executed in it.
+				/** @type {Map<string, number[]>} */
+				const positionsByName = new Map();
+				for (let position = 0; position < specs.length; position++) {
+					const { name } = specs[position];
+					const positions = positionsByName.get(name);
+					if (positions === undefined) {
+						positionsByName.set(name, [position]);
+					} else {
+						positions.push(position);
+					}
+				}
+				for (const positions of positionsByName.values()) {
+					if (positions.length < 2) continue;
+					const ordered = positions
+						.map((position) => specs[position])
+						.sort((a, b) => a.index - b.index);
+					for (let i = 0; i < positions.length; i++) {
+						specs[positions[i]] = ordered[i];
+					}
+				}
 				return specs;
 			};
 
@@ -749,13 +758,29 @@ class HtmlModulesPlugin {
 					}
 				}
 				ordered.sort((a, b) => a.index - b.index);
+				// An inline body has no url to be named after, so its page lends the
+				// name — and a `data:` page has none either, so its holder is walked to.
+				/** @type {string | undefined} */
+				let pageBase;
+				/** @type {Module | null | undefined} */
+				let holder = module;
+				while (pageBase === undefined && holder) {
+					const holderResource = /** @type {NormalModule} */ (holder).resource;
+					if (typeof holderResource === "string") {
+						pageBase = getRequestBaseName(holderResource);
+					}
+					holder = compilation.moduleGraph.getIssuer(holder);
+				}
 				for (const entry of ordered) {
-					// An inline `<script>` body has no url to be named after, so it
-					// keeps the name of its own entry, page hash and tag index.
+					// A name the page or `module.parser.html.chunkName` asked for is what
+					// the file is called too; otherwise the tag's url lends its basename.
 					const base =
 						wrapsEntry && namedEntry
 							? namedEntry.name
-							: getRequestBaseName(entry.request) || entry.entryName;
+							: entry.chunkName ||
+								getRequestBaseName(entry.request) ||
+								pageBase ||
+								entry.entryName;
 					pendingNames.set(entry.entryName, {
 						base,
 						jsTemplate,
@@ -764,6 +789,11 @@ class HtmlModulesPlugin {
 				}
 				links.sort((a, b) => a.index - b.index);
 				for (const link of links) {
+					// A linked page is named after its own path; a name the page asked
+					// for replaces that, and the link to it is rewritten either way.
+					if (link.chunkName && !contestedPageNames.has(link.entryName)) {
+						pageNames.set(link.entryName, link.chunkName);
+					}
 					const page = linkedPages.get(link.entryName);
 					if (page) recordNames(page, seen);
 				}
@@ -771,7 +801,7 @@ class HtmlModulesPlugin {
 
 			// 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<Module | null>} */
+			/** @type {(spec: HtmlEntrySpec) => Promise<Module | null>} */
 			const addEntry = (spec) =>
 				new Promise((resolve, reject) => {
 					compilation.addEntry(
@@ -789,10 +819,32 @@ class HtmlModulesPlugin {
 					);
 				});
 
+			// What each page name was claimed for, so a second page asking for a
+			// taken one is refused rather than appended to the entry holding it.
+			/** @type {Map<string, string>} */
+			const pageRequests = new Map();
+			// Names a second page asked for and did not get, so it keeps the one its
+			// own path lends and emits beside the page holding the name.
+			/** @type {Set<string>} */
+			const contestedPageNames = new Set();
+			/**
+			 * @param {string} name the name two things ask for
+			 * @param {string} taken what holds it
+			 * @param {string} request what asked for it
+			 */
+			const reportNameTaken = (name, taken, request) => {
+				contestedPageNames.add(name);
+				compilation.errors.push(
+					new WebpackError(
+						`The name "${name}" is asked for by ${request} and is already taken by ${taken}. A page is emitted as its name, so give one of them another.`
+					)
+				);
+			};
+
 			// 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")>} */
+			/** @type {WeakSet<import("../module/Module")>} */
 			const processed = new WeakSet();
 			/** @type {(module: Module) => Promise<void>} */
 			const processEntry = async (module) => {
@@ -800,18 +852,42 @@ class HtmlModulesPlugin {
 				processed.add(module);
 				await Promise.all(
 					collectEntrySpecs(module).map(async (spec) => {
+						if (spec.page) {
+							const claimed = pageRequests.get(spec.name);
+							// The page holding the name is already an entry of its own:
+							// a second link to it adds nothing, a second page cannot have it.
+							if (claimed !== undefined) {
+								if (claimed !== spec.request) {
+									reportNameTaken(spec.name, claimed, spec.request);
+								}
+								return;
+							}
+							pageRequests.set(spec.name, spec.request);
+						}
 						const entryModule = await addEntry(spec);
-						if (entryModule && entryModule.type === HTML_MODULE_TYPE) {
+						// A page entry webpack made for us holds that page alone; anything
+						// else in it named the same and would be emitted over.
+						if (spec.page) {
+							const entry = compilation.entries.get(spec.name);
+							if (entry && entry.dependencies.length !== 1) {
+								reportNameTaken(
+									spec.name,
+									`entry "${spec.name}"`,
+									spec.request
+								);
+								return;
+							}
+						}
+						if (entryModule && entryModule.is("html")) {
 							linkedPages.set(spec.name, entryModule);
 							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. Sorted because they are tracked in build-completion
-			// order, which the names must not depend on.
+			// Seed with the HTML modules seen during make; linked pages are reached by
+			// the recursion above. Sorted because they are tracked in build-completion
+			// order, which the generated names must not depend on.
 			const seeds = [...htmlModules].sort(compareModulesByIdentifier);
 			Promise.all(seeds.map(processEntry)).then(() => {
 				/** @type {Set<Module>} */
@@ -822,13 +898,12 @@ class HtmlModulesPlugin {
 		});
 
 		// `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).
-		// TODO webpack 6: html defaults to `true`, drop this implicit-only fallback.
+		// `integrity` resolves the SRI sentinels, both per page once its inline
+		// content is final, so an entry's `html` can override them.
+
+		// `"auto"` marks implicit enablement, the one case where loaders win over
+		// the built-in type — see `applyExperimentsDefaults`.
+		// TODO in the next major release: html defaults to `true`, drop this implicit-only fallback.
 		const implicitlyEnabled = compiler.options.experiments.html === "auto";
 		compiler.hooks.compilation.tap(
 			PLUGIN_NAME,
@@ -845,11 +920,11 @@ class HtmlModulesPlugin {
 				/**
 				 * 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
+				 * @param {import("../module/Module")} module built or restored module
 				 * @returns {void}
 				 */
 				const trackHtmlModule = (module) => {
-					if (module.type !== HTML_MODULE_TYPE) return;
+					if (!module.is("html")) return;
 					// enabled here, not on the compilation hook: an integrity build
 					// with no html module must not load the generator
 					if (anyIntegrity) {
@@ -860,13 +935,12 @@ class HtmlModulesPlugin {
 				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.
+				// Resolve integrity and inline sentinels after `RealContentHashPlugin`,
+				// so final bytes are in place. Only HTML pages carry them.
+
+				// SRI takes effect only on a cross-origin subresource fetched with CORS,
+				// so without `output.crossOriginLoading` the browser ignores `integrity`.
+				// Warn once, rather than let a CDN deployment ship no-op attributes.
 				if (anyIntegrity && !compilation.outputOptions.crossOriginLoading) {
 					compilation.warnings.push(
 						new WebpackError(
@@ -912,12 +986,9 @@ class HtmlModulesPlugin {
 									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.
+							// `injectTags`, `transformTags` and CSP all run over a single parse:
+							// collect the tags and anchors once, let the hooks act, then render
+							// every edit in one pass.
 							const injected = await hooks.injectTags.promise([], {
 								outputName: name,
 								html: resolved
@@ -991,14 +1062,9 @@ class HtmlModulesPlugin {
 					}
 				);
 
-				// CSS entries created by `<link rel="stylesheet">` in HTML need
-				// their `.css` filename set via `chunk.cssFilenameTemplate`
-				// (the field `CssModulesPlugin.getChunkFilenameTemplate` reads).
-				// Compilation only flows `options.filename` to `chunk.filenameTemplate`,
-				// which controls JS emit — there's no entry-level `cssFilename`.
-				// Set it ourselves after chunks are created so each stylesheet
-				// entry emits to a distinct file derived from `output.cssFilename`
-				// (or `output.cssChunkFilename` for non-initial CSS chunks).
+				// There is no entry-level `cssFilename`: Compilation flows
+				// `options.filename` only to `chunk.filenameTemplate`, which drives JS
+				// emit. So set `chunk.cssFilenameTemplate` here, once chunks exist.
 				compilation.hooks.afterChunks.tap(PLUGIN_NAME, () => {
 					const { stylesheetEntries, pendingNames } = getState(compilation);
 					if (pendingNames.size === 0) return;
@@ -1008,6 +1074,10 @@ class HtmlModulesPlugin {
 					// documents' order rather than their builds'.
 					const takenJsNames = new Set(compilation.entries.keys());
 					const takenCssNames = new Set(takenJsNames);
+					/** @type {Map<string, number>} */
+					const nextJsIndex = new Map();
+					/** @type {Map<string, number>} */
+					const nextCssIndex = new Map();
 					// An extracted entry emits nothing under its own synthetic name, so
 					// that name never stands in the way of the one its tag asks for.
 					for (const entryName of pendingNames.keys()) {
@@ -1035,7 +1105,7 @@ class HtmlModulesPlugin {
 							chunk.filenameTemplate = getEntryTemplate(
 								jsTemplate,
 								jsExtension,
-								claimName(base, takenJsNames)
+								claimName(base, takenJsNames, nextJsIndex)
 							);
 						}
 						// A `<script src>` whose chunk carries no CSS claims no CSS name, so
@@ -1049,7 +1119,7 @@ class HtmlModulesPlugin {
 						chunk.cssFilenameTemplate = getEntryTemplate(
 							outputOptions.cssFilename,
 							".css",
-							claimName(base, takenCssNames)
+							claimName(base, takenCssNames, nextCssIndex)
 						);
 					}
 				});
@@ -1057,10 +1127,9 @@ class HtmlModulesPlugin {
 					StaticExportsDependency,
 					new StaticExportsDependency.Template()
 				);
-				// `ConstDependency` is used by HtmlParser to insert
-				// ` type="module"` into the rewritten <script> tag when
-				// `output.module` is on. Register its template so the HTML
-				// generator runs the insertion.
+				// HtmlParser uses `ConstDependency` to insert ` type="module"` into a
+				// rewritten `<script>` under `output.module`; its template has to be
+				// registered for the HTML generator to run that insertion.
 				compilation.dependencyTemplates.set(
 					ConstDependency,
 					new ConstDependency.Template()
@@ -1070,11 +1139,11 @@ class HtmlModulesPlugin {
 				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");
+						const HtmlSourceDependency = require("../dependencies/html/HtmlSourceDependency");
+						const HtmlEntryDependency = require("../dependencies/html/HtmlEntryDependency");
+						const HtmlInlineScriptDependency = require("../dependencies/html/HtmlInlineScriptDependency");
+						const HtmlInlineStyleDependency = require("../dependencies/html/HtmlInlineStyleDependency");
+						const HtmlInlineHtmlDependency = require("../dependencies/html/HtmlInlineHtmlDependency");
 
 						compilation.dependencyFactories.set(
 							HtmlSourceDependency,
@@ -1092,10 +1161,9 @@ class HtmlModulesPlugin {
 							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=…>`.
+						// Inline `<script>` content becomes its own entry through a
+						// `data:text/javascript,...` request, the same pipeline as
+						// `<script src>`; the template then rewrites the tag.
 						compilation.dependencyFactories.set(
 							HtmlInlineScriptDependency,
 							normalModuleFactory
@@ -1104,11 +1172,9 @@ class HtmlModulesPlugin {
 							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"`).
+						// Inline `<style>` content goes through the CSS pipeline as a
+						// `data:text/css` module; the template reads the processed text
+						// from the `css-text` code-generation channel.
 						compilation.dependencyFactories.set(
 							HtmlInlineStyleDependency,
 							normalModuleFactory
@@ -1176,12 +1242,11 @@ class HtmlModulesPlugin {
 				NormalModule.getCompilationHooks(compilation).processResult.tap(
 					PLUGIN_NAME,
 					(result, module) => {
-						if (module.type === HTML_MODULE_TYPE) {
+						if (module.is("html")) {
 							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.
+							// Run here, where the returned source becomes the module's stored
+							// source, so the parser's dependency offsets and the generator's
+							// render base stay in sync.
 							const parser = /** @type {HtmlParser} */ (module.parser);
 
 							return [parser.applyTemplate(source, module), ...rest];
@@ -1191,35 +1256,20 @@ class HtmlModulesPlugin {
 					}
 				);
 
-				// Emit extracted `.html` files for any HTML module that opted
-				// into extraction. The opt-in is computed by
-				// `HtmlGenerator#_shouldExtract`: `module.generator.html.extract:
-				// true` always extracts, `false` never extracts, and when
-				// `extract` is unset the generator extracts iff the HTML module
-				// is a compilation entry — the iteration below picks up only
-				// modules whose generator reported the `html` source type, so
-				// that decision is honored implicitly. The HTML content is read
-				// from the generator's secondary `"html"` source type (see
-				// HtmlGenerator#generate). The filename template comes from
-				// `output.htmlFilename` (initial chunks) or
-				// `output.htmlChunkFilename` (non-initial chunks), mirroring
-				// the CSS pipeline. Path data follows the asset-module pattern —
-				// `module` + a relative source `filename`, with `chunk`
-				// intentionally omitted so `[name]` resolves to the HTML
-				// source's basename (e.g. `page` for `./page.html`) rather
-				// than the importing chunk's name (e.g. `main`). A per-module
-				// content hash is computed from the rewritten HTML so the
-				// template's `[contenthash]` placeholder works; the
-				// compilation hash is also forwarded so `[fullhash]` /
-				// `[hash]` work in user-supplied templates.
-
-				// Sentinel-resolved content and its content hash depend only on
-				// the HTML-type module source — not on the chunk or output
-				// filename — yet `renderManifest` runs per `(chunk, module)`.
-				// Memoize so a module landing in multiple chunks resolves and
-				// hashes its sentinels once. Scoped to this compilation because
-				// sentinel resolution embeds chunk filenames, which change
-				// across rebuilds; weakly keyed by source so entries release.
+				// WHY: emit extracted `.html` files for any HTML module that opted in.
+				// `HtmlGenerator#_shouldExtract` computes that opt-in —
+				// `module.generator.html.extract: true` always extracts, `false` never,
+				// and unset extracts only a compilation entry — and the iteration below
+				// picks up only modules whose generator reported the `html` source type,
+				// so that decision is honoured implicitly. The filename comes from
+				// `output.htmlFilename` for initial chunks and `output.htmlChunkFilename`
+				// otherwise, mirroring the CSS pipeline, and the path data follows the
+				// asset-module pattern with `chunk` deliberately left out, so `[name]`
+				// resolves to the HTML source's basename rather than the chunk's.
+
+				// `renderManifest` runs per `(chunk, module)`, but resolved content and
+				// its hash depend only on the module source, so memoize. Scoped to this
+				// compilation, since resolution embeds chunk filenames.
 				/** @type {WeakMap<import("webpack-sources").Source, { resolvedContent: string, contentHash: string }>} */
 				const resolvedSentinelHashCache = new WeakMap();
 
@@ -1228,28 +1278,25 @@ class HtmlModulesPlugin {
 				 * 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
+				 * @param {import("../graph/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")} */ (
+						/** @type {import("../module/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.
+						// Resolve chunk-URL sentinels before hashing, so the page's
+						// `[contenthash]` tracks the referenced chunks. An inlined chunk has
+						// no URL, so its sentinel carries the chunk content hash instead.
+
+						// Asset URL sentinels resolve here rather than in `template.apply`,
+						// which would race with asset-module codegen.
 						const resolvedContent = getHtmlGenerator().resolveAssetUrlSentinels(
 							getHtmlGenerator().embedInlineChunkHashes(
 								getHtmlGenerator().resolveChunkUrlSentinels(
@@ -1270,10 +1317,14 @@ class HtmlModulesPlugin {
 						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.
+					// A page is named after its own path, unless it asked for a name; a
+					// synthetic `output.html` entry has none, so its entry names it.
+					const requestedPageName = chunk.name
+						? getState(compilation).pageNames.get(chunk.name)
+						: undefined;
 					const sourceFilename =
-						resource.startsWith("data:text/html") && chunk.name
+						requestedPageName ||
+						(resource.startsWith("data:text/html") && chunk.name
 							? chunk.name
 							: toTemplateSourceFileName(
 									makePathsRelative(
@@ -1282,13 +1333,13 @@ class HtmlModulesPlugin {
 										compiler.root
 									).replace(/^\.\//, ""),
 									compilation
-								);
+								));
 					const filenameTemplate = HtmlModulesPlugin.getChunkFilenameTemplate(
 						chunk,
 						outputOptions
 					);
 					const { path: filename, info } = compilation.getPathWithInfo(
-						/** @type {import("../TemplatedPathPlugin").TemplatePath} */
+						/** @type {import("../template/TemplatedPathPlugin").TemplatePath} */
 						(filenameTemplate),
 						{
 							module,
@@ -1345,11 +1396,10 @@ class HtmlModulesPlugin {
 				compilation.hooks.renderManifest.tap(
 					PLUGIN_NAME,
 					(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.
+						// HMR's `HotUpdateChunk`s reach this hook but are not output chunks,
+						// so extracting `.html` for them would emit stray hot-update files.
 						// `CssModulesPlugin` early-returns for the same reason.
-						if (chunk instanceof HotUpdateChunk) return result;
+						if (chunk.isHotUpdate()) return result;
 						const { chunkGraph } = compilation;
 						const modules =
 							chunkGraph.getOrderedChunkModulesIterableBySourceType(
@@ -1361,12 +1411,13 @@ class HtmlModulesPlugin {
 						const outputOptions = compilation.outputOptions;
 						for (const module of modules) {
 							const normalModule = /** @type {NormalModule} */ (module);
-							// `<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.
+							// WHY: an `<iframe srcdoc>` module exposes `html` only so that
+							// `HtmlInlineHtmlDependency` can write the processed markup back
+							// into the host attribute; it is never a standalone page.
+							// `generator.extract: "inline"` marks it so no `.html` file is
+							// emitted — without it they would collide on the `data:text/html`
+							// to chunk-name path, every srcdoc module in a chunk emitting
+							// `<chunk>.html`. An O(1) flag check rather than a scan.
 							const generatorOptions = normalModule.generatorOptions;
 							if (generatorOptions && generatorOptions.extract === "inline") {
 								continue;
@@ -1376,11 +1427,9 @@ class HtmlModulesPlugin {
 							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, 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`).
+							// Resolve the remaining `[webpack/auto]` placeholders against the
+							// emitted page's own location, so URLs stay relative to `output.path`
+							// from a subdirectory. A relative `<base href>` prepends `../`s.
 							const basePrefix =
 								/** @type {HtmlModuleBuildInfo} */ (normalModule.buildInfo)
 									.baseUrlPrefix || "";
@@ -1402,12 +1451,9 @@ class HtmlModulesPlugin {
 								.split(autoPlaceholder)
 								.join(undoPath);
 							const finalSource = new RawSource(finalContent);
-							// 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.
+							// One module can land in several chunks whose filename shapes give
+							// different undo paths, so the emitted filename joins the cache key
+							// and the post-undo content the hash — else variants alias.
 							const finalContentHash =
 								finalContent === resolvedContent
 									? contentHash
@@ -1541,11 +1587,10 @@ class HtmlModulesPlugin {
 		// Scope-hoisted HTML loses HTML_TYPE on the ConcatenatedModule, but its
 		// JS export can still carry unresolved sentinels that need this path.
 		for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
-			if (module instanceof HtmlModule) return true;
-			if (module instanceof ConcatenatedModule) {
-				for (const inner of module.modules) {
-					if (inner instanceof HtmlModule) return true;
-				}
+			if (module.is("html")) return true;
+			if (module.getRootModule() === module) continue;
+			for (const inner of module.getSourceModules()) {
+				if (inner.is("html")) return true;
 			}
 		}
 		return false;