@depup/webpack 5.110.3-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");
@@ -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,9 +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 wrapper's own resource — the media type must end here, so that a
-// `data:text/htmlx,` entry (JavaScript to `DataUriPlugin`) is not one.
-const HTML_DATA_URL_RE = /^data:text\/html[,;]/i;
+/**
+ * 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`
@@ -294,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) {
@@ -316,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) {
@@ -355,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
 		);
@@ -391,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) => {
@@ -472,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);
@@ -497,6 +638,7 @@ class HtmlModulesPlugin {
 				state = {
 					htmlModules: new Set(),
 					stylesheetEntries: new Set(),
+					pendingNames: new Map(),
 					htmlAssetOptions: new Map()
 				};
 				compilationState.set(compilation, state);
@@ -504,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
@@ -533,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,
@@ -548,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(
@@ -558,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
 						},
@@ -575,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);
@@ -583,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(
@@ -636,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(
@@ -688,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
@@ -725,26 +931,6 @@ class HtmlModulesPlugin {
 						// a content-hashed filename makes a substring hit a real reference.
 						/** @type {Set<string>} */
 						const deletionCandidates = new Set(inlinedFiles);
-						// A wrapper entry's chunk only rebuilds the page's own markup; the
-						// page loads the `<script src>` entries the parser split out of it.
-						for (const entrypoint of compilation.entrypoints.values()) {
-							const chunk = entrypoint.getEntrypointChunk();
-							if (!chunk) continue;
-							let wrapperOnly = false;
-							for (const entryModule of compilation.chunkGraph.getChunkEntryModulesIterable(
-								chunk
-							)) {
-								const { resource } = /** @type {import("../NormalModule")} */ (
-									entryModule
-								);
-								wrapperOnly =
-									typeof resource === "string" &&
-									HTML_DATA_URL_RE.test(resource);
-								if (!wrapperOnly) break;
-							}
-							if (!wrapperOnly) continue;
-							for (const file of chunk.files) deletionCandidates.add(file);
-						}
 						// Materialize each other asset's source once (it can be expensive to
 						// render) and test all candidates against it, rather than
 						// re-materializing every asset per candidate.
@@ -787,45 +973,70 @@ 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 } = 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()
@@ -857,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
@@ -869,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
@@ -933,7 +1141,8 @@ class HtmlModulesPlugin {
 						);
 						return new (getHtmlGenerator())(
 							generatorOptions,
-							compilation.moduleGraph
+							compilation.moduleGraph,
+							(module) => getPageOnlyEntry(compilation, module) !== undefined
 						);
 					});
 
@@ -942,10 +1151,9 @@ class HtmlModulesPlugin {
 					(result, module) => {
 						if (module.type === HTML_MODULE_TYPE) {
 							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];
@@ -955,35 +1163,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();
 
@@ -1005,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(
@@ -1109,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;
@@ -1125,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;
@@ -1140,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 || "";
@@ -1166,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
@@ -1211,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
@@ -1281,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;
+	}
 }
 
 /**