@depup/webpack 5.110.1-depup.0 → 5.111.1-depup.0

package/lib/html/HtmlModulesPlugin.js

@@ -4,6 +4,7 @@
 
 "use strict";
 
+const { basename, extname } = require("path");
 const { pathToFileURL } = require("url");
 const { AsyncSeriesHook, AsyncSeriesWaterfallHook } = require("tapable");
 const { RawSource } = require("webpack-sources");
@@ -19,10 +20,18 @@ const ConstDependency = require("../dependencies/ConstDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const WebpackError = require("../errors/WebpackError");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const { compareModulesByFullName } = require("../util/comparators");
+const ConcatenatedModule = require("../optimize/ConcatenatedModule");
+const {
+	compareModulesByFullName,
+	compareModulesByIdentifier
+} = require("../util/comparators");
 const createHash = require("../util/createHash");
 const createHooksRegistry = require("../util/createHooksRegistry");
-const { getUndoPath, makePathsRelative } = require("../util/identifier");
+const {
+	getUndoPath,
+	makePathsRelative,
+	parseResource
+} = require("../util/identifier");
 const implicitTypeLoaderFallback = require("../util/implicitTypeLoaderFallback");
 const lazyModule = require("../util/lazyModule");
 const memoize = require("../util/memoize");
@@ -31,7 +40,7 @@ const preloadModuleType = require("../util/preloadModuleType");
 const {
 	PUBLIC_PATH_AUTO: autoPlaceholder
 } = require("../util/publicPathPlaceholder");
-const removeBOM = require("../util/removeBOM");
+const { removeBOMFromResult } = require("../util/removeBOM");
 const HtmlModule = require("./HtmlModule");
 
 const getMimeTypes = memoize(() => require("../util/mimeTypes"));
@@ -45,20 +54,41 @@ const getHtmlParser = lazyModule(() => require("./HtmlParser"));
 // html generation only happens once a build actually has an html module
 const getHtmlGenerator = memoize(() => require("./HtmlGenerator"));
 
+// only reached once a page names a CSS chunk of its own
+const getCssModulesPlugin = memoize(() => require("../css/CssModulesPlugin"));
+
 /**
  * @import {
  * 	EntryDescriptionNormalized,
+ * 	FilenameTemplate,
  * 	OutputHtmlOptions,
  * 	HtmlFaviconIcon
  * } from "../../declarations/WebpackOptions"
  */
+/**
+ * @import {
+ * 	OutputNormalizedWithDefaults as OutputOptions
+ * } from "../config/defaults"
+ */
 /** @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 Compiler from "../Compiler" */
+/** @import Module from "../Module" */
+/** @typedef {import("../Compilation").EntryData} EntryData */
 /** @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 {{ request: string, entryName: string, index: number, type: "script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch", css?: boolean }} 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.
+ * @typedef {object} PendingName
+ * @property {string} base name the tag's url (or its page) asks for, before numbering
+ * @property {FilenameTemplate} jsTemplate `output.filename` for this entry, as configured
+ * @property {string=} freeName name of a page-only entry, which emits nothing and leaves it free
+ */
 
 /** @typedef {{ outputName: string }} HtmlTransformHtmlContext */
 /** @typedef {{ outputName: string }} HtmlEmittedContext */
@@ -118,10 +148,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;
 
@@ -222,6 +251,130 @@ const isIntegrityEnabled = (integrity) =>
 // `\.html`/`\.css` request matchers for the synthetic `output.html` wrapper.
 const HTML_REQUEST_RE = /\.html(\?|$)/i;
 const CSS_REQUEST_RE = /\.css(\?|$)/i;
+/**
+ * The entry a page is the whole of: nothing imports the module and the entry
+ * asks for nothing else, so the entry's JavaScript would be the page itself.
+ * @param {Compilation} compilation compilation
+ * @param {Module} module html module
+ * @returns {{ name: string, data: EntryData } | undefined} the page's own entry, when it has one
+ */
+const getPageEntry = (compilation, module) => {
+	const { moduleGraph } = compilation;
+	for (const connection of moduleGraph.getIncomingConnections(module)) {
+		if (connection.originModule) return undefined;
+	}
+	for (const [name, data] of compilation.entries) {
+		if (data.dependencies.length !== 1) continue;
+		if (data.includeDependencies.length !== 0) continue;
+		if (moduleGraph.getModule(data.dependencies[0]) === module) {
+			return { name, data };
+		}
+	}
+	return undefined;
+};
+
+/**
+ * The entry of a page that emits nothing but its markup, so its chunk carries
+ * no JavaScript. An `output.library` asks for the page's exports, and keeps it.
+ * @param {Compilation} compilation compilation
+ * @param {Module} module html module
+ * @returns {{ name: string, data: EntryData } | undefined} the entry, when the page is all it emits
+ */
+const getPageOnlyEntry = (compilation, module) => {
+	const entry = getPageEntry(compilation, module);
+	if (entry === undefined) return undefined;
+	const { library } = entry.data.options;
+	const configured =
+		library === undefined ? compilation.outputOptions.library : library;
+	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
+ * @returns {string} the claimed name
+ */
+const claimName = (base, taken) => {
+	let name = base;
+	for (let index = 1; taken.has(name); index++) name = `${base}${index}`;
+	taken.add(name);
+	return name;
+};
+
+// Placeholders that tell chunks apart on their own, so a template carrying
+// one needs no `[name]`. Not `[id]`: an extracted entry's id is synthetic.
+const CONTENT_PLACEHOLDER_REGEXP =
+	/\[(?:chunkhash|contenthash|fullhash|hash)[\]:]/;
+
+// Basename stem of a filename template — what `[name]` stands in for, keeping
+// the directory, extension and query the template asked for.
+const TEMPLATE_STEM_REGEXP = /(^|\/)[^/?]*?((?:\.[^./?]+)*)(\?.*)?$/;
+
+const NAME_PLACEHOLDER_REGEXP = /\[name\]/g;
+
+/**
+ * A filename template usable for a page's extracted entries: it must tell one
+ * entry from another, or every entry of the page would be emitted to the same
+ * file. A template naming neither the chunk nor its content lends its directory
+ * and extension to a `[name]` instead.
+ * @param {string} template configured template
+ * @param {string} extension extension to fall back to when the template names none
+ * @returns {string} a template that tells the page's entries apart
+ */
+const getNamedTemplate = (template, extension) => {
+	if (
+		template.includes("[name]") ||
+		CONTENT_PLACEHOLDER_REGEXP.test(template)
+	) {
+		return template;
+	}
+	return template.replace(
+		TEMPLATE_STEM_REGEXP,
+		(_, dir, ext, query) => `${dir}[name]${ext || extension}${query || ""}`
+	);
+};
+
+/**
+ * The filename one extracted entry emits under, with `name` filling the
+ * `[name]` its template carries or the stem it leaves behind.
+ * @param {string} template configured template
+ * @param {string} extension extension to fall back to when the template names none
+ * @param {string} name the name this entry claimed
+ * @returns {string} the entry's filename template
+ */
+const fillNamedTemplate = (template, extension, name) =>
+	getNamedTemplate(template, extension).replace(NAME_PLACEHOLDER_REGEXP, name);
+
+/**
+ * The same, for a template `output.filename` states as a function: it is called
+ * at emit, and the path it returns read for a stem the same way.
+ * @param {FilenameTemplate} template configured template
+ * @param {string} extension extension to fall back to when the template names none
+ * @param {string} name the name this entry claimed
+ * @returns {ChunkFilenameTemplate} the entry's filename template
+ */
+const getEntryTemplate = (template, extension, name) => {
+	if (typeof template === "function") {
+		return (pathData, assetInfo) =>
+			fillNamedTemplate(template(pathData, assetInfo), extension, name);
+	}
+	return fillNamedTemplate(template, extension, name);
+};
 
 /**
  * Requests an `output.html` page must load for an entry: its `dependOn`
@@ -238,7 +391,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];
@@ -286,7 +444,7 @@ class HtmlModulesPlugin {
 	 * digest of `content`, with `nonNumericOnlyHash` applied — webpack's
 	 * standard `[contenthash]` recipe.
 	 * @param {string | Buffer} content content to hash
-	 * @param {import("../../declarations/WebpackOptions").Output} outputOptions output options
+	 * @param {OutputOptions} outputOptions output options
 	 * @returns {string} content hash
 	 */
 	static computeContentHash(content, outputOptions) {
@@ -308,7 +466,7 @@ class HtmlModulesPlugin {
 	 * initial chunks, `output.htmlChunkFilename` otherwise — the HTML counterpart
 	 * of `CssModulesPlugin.getChunkFilenameTemplate`.
 	 * @param {import("../Chunk")} chunk chunk
-	 * @param {import("../../declarations/WebpackOptions").Output} outputOptions output options
+	 * @param {OutputOptions} outputOptions output options
 	 * @returns {import("../Chunk").ChunkFilenameTemplate} used filename template
 	 */
 	static getChunkFilenameTemplate(chunk, outputOptions) {
@@ -347,10 +505,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
 		);
@@ -383,13 +540,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) => {
@@ -464,24 +617,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<import("../Module")>, stylesheetEntries: Set<string>, 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> }>} */
 		const compilationState = new WeakMap();
 		/**
 		 * @param {import("../Compilation")} compilation compilation
-		 * @returns {{ htmlModules: Set<import("../Module")>, stylesheetEntries: Set<string>, htmlAssetOptions: Map<string, OutputHtmlOptions> }} per-compilation state
+		 * @returns {{ htmlModules: Set<Module>, stylesheetEntries: Set<string>, pendingNames: Map<string, PendingName>, htmlAssetOptions: Map<string, OutputHtmlOptions> }} per-compilation state
 		 */
 		const getState = (compilation) => {
 			let state = compilationState.get(compilation);
@@ -489,6 +638,7 @@ class HtmlModulesPlugin {
 				state = {
 					htmlModules: new Set(),
 					stylesheetEntries: new Set(),
+					pendingNames: new Map(),
 					htmlAssetOptions: new Map()
 				};
 				compilationState.set(compilation, state);
@@ -496,14 +646,19 @@ class HtmlModulesPlugin {
 			return state;
 		};
 		compiler.hooks.finishMake.tapAsync(PLUGIN_NAME, (compilation, callback) => {
-			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 { htmlModules, stylesheetEntries, pendingNames } =
+				getState(compilation);
+			/** @type {Set<string>} */
+			const extractedNames = new Set();
+			// The page each `type: "html"` link built, so the naming walk below can
+			// follow the links in document order instead of in build order.
+			/** @type {Map<string, Module>} */
+			const linkedPages = new Map();
+
+			// 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) => { context: string, request: string, name: string, dependOn: string[] | undefined }[]} */
 			const collectEntrySpecs = (module) => {
 				const { htmlEntries } = /** @type {HtmlModuleBuildInfo} */ (
 					module.buildInfo
@@ -525,10 +680,11 @@ class HtmlModulesPlugin {
 							leaderName = entry.entryName;
 						}
 						// 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) {
+						// a CSS chunk, so they are named from `output.cssFilename` alone.
+						if (groupKind === "stylesheet" || Boolean(entry.css)) {
 							stylesheetEntries.add(entry.entryName);
 						}
+						extractedNames.add(entry.entryName);
 						specs.push({
 							context,
 							request: entry.request,
@@ -540,9 +696,70 @@ class HtmlModulesPlugin {
 				return specs;
 			};
 
+			// Records what a page's entries ask to be named, then walks its links —
+			// once every page is built, so the order is the documents', not the builds'.
+			/** @type {(module: Module, seen: Set<Module>) => void} */
+			const recordNames = (module, seen) => {
+				if (seen.has(module)) return;
+				seen.add(module);
+				const { htmlEntries } = /** @type {HtmlModuleBuildInfo} */ (
+					module.buildInfo
+				);
+				if (!htmlEntries) return;
+				const pageEntry = getPageOnlyEntry(compilation, module);
+				const namedEntry =
+					pageEntry !== undefined && !extractedNames.has(pageEntry.name)
+						? pageEntry
+						: undefined;
+				const { resource } = /** @type {NormalModule} */ (module);
+				// An `output.html` page is a wrapper webpack writes around an entry, so
+				// what it loads is that entry's own output and takes its name.
+				const wrapsEntry =
+					namedEntry !== undefined &&
+					typeof resource === "string" &&
+					resource.startsWith("data:text/html");
+				const { filename } = compilation.outputOptions;
+				// Kept as configured, a function included, and read for a name once the
+				// chunks exist.
+				const jsTemplate =
+					namedEntry && namedEntry.data.options.filename !== undefined
+						? namedEntry.data.options.filename
+						: filename;
+				// In document order, so of two tags sharing a basename the first a
+				// reader sees keeps it. A linked page is named on emit instead.
+				/** @type {HtmlEntryInfo[]} */
+				const ordered = [];
+				/** @type {HtmlEntryInfo[]} */
+				const links = [];
+				for (const [groupKind, group] of Object.entries(htmlEntries)) {
+					for (const entry of group) {
+						(groupKind === "html" ? links : ordered).push(entry);
+					}
+				}
+				ordered.sort((a, b) => a.index - b.index);
+				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.
+					const base =
+						wrapsEntry && namedEntry
+							? namedEntry.name
+							: getRequestBaseName(entry.request) || entry.entryName;
+					pendingNames.set(entry.entryName, {
+						base,
+						jsTemplate,
+						freeName: namedEntry && namedEntry.name
+					});
+				}
+				links.sort((a, b) => a.index - b.index);
+				for (const link of links) {
+					const page = linkedPages.get(link.entryName);
+					if (page) recordNames(page, seen);
+				}
+			};
+
 			// 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>} */
+			/** @type {(spec: { context: string, request: string, name: string, dependOn: string[] | undefined }) => Promise<Module | null>} */
 			const addEntry = (spec) =>
 				new Promise((resolve, reject) => {
 					compilation.addEntry(
@@ -550,10 +767,8 @@ class HtmlModulesPlugin {
 						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`.
+							// A placeholder `afterChunks` overwrites for every entry it
+							// names; only a linked page keeps it, and it emits no JavaScript.
 							filename: compilation.outputOptions.chunkFilename || "[name].js",
 							dependOn: spec.dependOn
 						},
@@ -567,7 +782,7 @@ class HtmlModulesPlugin {
 			// every HTML entry already gets. `processed` guards diamonds and cycles.
 			/** @type {WeakSet<import("../Module")>} */
 			const processed = new WeakSet();
-			/** @type {(module: import("../Module")) => Promise<void>} */
+			/** @type {(module: Module) => Promise<void>} */
 			const processEntry = async (module) => {
 				if (processed.has(module)) return;
 				processed.add(module);
@@ -575,27 +790,30 @@ class HtmlModulesPlugin {
 					collectEntrySpecs(module).map(async (spec) => {
 						const entryModule = await addEntry(spec);
 						if (entryModule && entryModule.type === HTML_MODULE_TYPE) {
+							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.
-			Promise.all([...htmlModules].map(processEntry)).then(
-				() => callback(),
-				callback
-			);
+			// 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>} */
+				const named = new Set();
+				for (const seed of seeds) recordNames(seed, named);
+				callback();
+			}, callback);
 		});
 
 		// `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).
+		// `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 webpack 6: html defaults to `true`, drop this implicit-only fallback.
 		const implicitlyEnabled = compiler.options.experiments.html === "auto";
 		compiler.hooks.compilation.tap(
@@ -610,12 +828,13 @@ 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) => {
+				/**
+				 * 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
@@ -627,13 +846,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(
@@ -679,12 +897,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
@@ -714,73 +929,114 @@ 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);
 						// 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);
 							}
-							for (const file of inlinedFiles) {
+							// 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 deletionCandidates) {
 								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).
-				// 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 } = getState(compilation);
-					if (stylesheetEntries.size === 0) return;
-					for (const entryName of stylesheetEntries) {
+					const { stylesheetEntries, pendingNames } = getState(compilation);
+					if (pendingNames.size === 0) return;
+					const { chunkGraph, outputOptions } = compilation;
+					const jsExtension = outputOptions.module ? ".mjs" : ".js";
+					// Claimed in the order the pages recorded them, which is the
+					// documents' order rather than their builds'.
+					const takenJsNames = new Set(compilation.entries.keys());
+					const takenCssNames = new Set(takenJsNames);
+					// 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()) {
+						takenJsNames.delete(entryName);
+						takenCssNames.delete(entryName);
+					}
+					for (const { freeName } of pendingNames.values()) {
+						if (freeName === undefined) continue;
+						// A page-only entry emits nothing of its own, so its name is free for
+						// the entries extracted from it — `app.html` keeps `app.js`.
+						takenJsNames.delete(freeName);
+						takenCssNames.delete(freeName);
+					}
+					for (const [entryName, { base, jsTemplate }] of pendingNames) {
 						const entrypoint = compilation.entrypoints.get(entryName);
 						if (!entrypoint) continue;
 						const chunk = entrypoint.getEntrypointChunk();
 						if (!chunk) continue;
-						// Each html-derived stylesheet entry uses the
-						// `cssChunkFilename` template — even though the entry
-						// chunk technically `canBeInitial()`, we deliberately
-						// avoid `cssFilename` here because that template often
-						// has no per-entry placeholder (it's derived from
-						// `output.filename`, which can be a literal like
-						// `bundle0.js`), and multiple `<link rel="stylesheet">`
-						// tags would then collide on the same emitted `.css`
-						// file. `cssChunkFilename` is derived from
-						// `output.chunkFilename` which webpack auto-extends
-						// with `[id].` when needed, guaranteeing uniqueness.
-						chunk.cssFilenameTemplate =
-							compilation.outputOptions.cssChunkFilename;
+						// A stylesheet entry emits no JavaScript, so it claims no JS name and
+						// leaves that one to a `<script src>` of the same basename.
+						const emitsCss = stylesheetEntries.has(entryName);
+						if (!emitsCss) {
+							// `output.filename` named after the tag's url, the way an entry
+							// point is named. `Compilation` set it from the placeholder above.
+							chunk.filenameTemplate = getEntryTemplate(
+								jsTemplate,
+								jsExtension,
+								claimName(base, takenJsNames)
+							);
+						}
+						// A `<script src>` whose chunk carries no CSS claims no CSS name, so
+						// a `<link>` of the same basename still gets the plain one.
+						if (
+							!emitsCss &&
+							!getCssModulesPlugin().chunkHasCss(chunk, chunkGraph)
+						) {
+							continue;
+						}
+						chunk.cssFilenameTemplate = getEntryTemplate(
+							outputOptions.cssFilename,
+							".css",
+							claimName(base, takenCssNames)
+						);
 					}
 				});
 				compilation.dependencyTemplates.set(
 					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()
@@ -812,10 +1068,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
@@ -824,11 +1079,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
@@ -888,7 +1141,8 @@ class HtmlModulesPlugin {
 						);
 						return new (getHtmlGenerator())(
 							generatorOptions,
-							compilation.moduleGraph
+							compilation.moduleGraph,
+							(module) => getPageOnlyEntry(compilation, module) !== undefined
 						);
 					});
 
@@ -896,61 +1150,45 @@ class HtmlModulesPlugin {
 					PLUGIN_NAME,
 					(result, module) => {
 						if (module.type === HTML_MODULE_TYPE) {
-							const [source, ...rest] = 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 [source, ...rest] = removeBOMFromResult(result);
+							// 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(removeBOM(source), module), ...rest];
+							return [parser.applyTemplate(source, module), ...rest];
 						}
 
 						return result;
 					}
 				);
 
-				// 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();
 
-				// 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")} */ (
@@ -960,15 +1198,12 @@ class HtmlModulesPlugin {
 					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(
@@ -1027,14 +1262,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:,";
@@ -1063,9 +1299,8 @@ 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;
 						const { chunkGraph } = compilation;
@@ -1079,12 +1314,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;
@@ -1094,11 +1330,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 || "";
@@ -1120,12 +1354,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
@@ -1165,6 +1396,16 @@ class HtmlModulesPlugin {
 				jsHooks.render.tap(PLUGIN_NAME, (source, renderContext) => {
 					// No HTML modules ⇒ no sentinels; skip materializing the JS source.
 					if (htmlModules.size === 0) return source;
+					// Chunks without HTML modules can't carry HTML sentinels — avoid
+					// ConcatSource.source() on the common pure-JS chunk path.
+					if (
+						!HtmlModulesPlugin.chunkHasHtml(
+							renderContext.chunk,
+							compilation.chunkGraph
+						)
+					) {
+						return source;
+					}
 					const raw = source.source();
 					if (typeof raw !== "string") return source;
 					// Every sentinel shares this prefix — one scan answers the common
@@ -1235,6 +1476,29 @@ class HtmlModulesPlugin {
 			}
 		);
 	}
+
+	/**
+	 * Returns true, when the chunk has html.
+	 * @param {Chunk} chunk chunk
+	 * @param {ChunkGraph} chunkGraph chunk graph
+	 * @returns {boolean} true, when the chunk has html
+	 */
+	static chunkHasHtml(chunk, chunkGraph) {
+		if (chunkGraph.getChunkModulesIterableBySourceType(chunk, HTML_TYPE)) {
+			return true;
+		}
+		// 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;
+				}
+			}
+		}
+		return false;
+	}
 }
 
 /**