webpack 5.110.2 → 5.111.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 */
@@ -222,9 +252,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`
@@ -241,7 +392,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];
@@ -289,7 +445,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) {
@@ -311,7 +467,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) {
@@ -480,11 +636,11 @@ class HtmlModulesPlugin {
 		// `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> }>} */
+		/** @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);
@@ -492,6 +648,7 @@ class HtmlModulesPlugin {
 				state = {
 					htmlModules: new Set(),
 					stylesheetEntries: new Set(),
+					pendingNames: new Map(),
 					htmlAssetOptions: new Map()
 				};
 				compilationState.set(compilation, state);
@@ -499,14 +656,21 @@ class HtmlModulesPlugin {
 			return state;
 		};
 		compiler.hooks.finishMake.tapAsync(PLUGIN_NAME, (compilation, callback) => {
-			const { htmlModules, stylesheetEntries } = getState(compilation);
+			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
 			// (`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 }[]} */
+			/** @type {(module: Module) => { context: string, request: string, name: string, dependOn: string[] | undefined }[]} */
 			const collectEntrySpecs = (module) => {
 				const { htmlEntries } = /** @type {HtmlModuleBuildInfo} */ (
 					module.buildInfo
@@ -528,10 +692,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,
@@ -543,9 +708,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(
@@ -553,10 +779,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
 						},
@@ -570,7 +794,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);
@@ -578,6 +802,7 @@ 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);
 						}
 					})
@@ -585,11 +810,15 @@ class HtmlModulesPlugin {
 			};
 			// 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
-			);
+			// recursion above. Sorted because they are tracked in build-completion
+			// order, which the 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
@@ -613,12 +842,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
@@ -719,26 +949,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.
@@ -790,26 +1000,57 @@ class HtmlModulesPlugin {
 				// entry emits to a distinct file derived from `output.cssFilename`
 				// (or `output.cssChunkFilename` for non-initial CSS chunks).
 				compilation.hooks.afterChunks.tap(PLUGIN_NAME, () => {
-					const { stylesheetEntries } = 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(
@@ -927,7 +1168,8 @@ class HtmlModulesPlugin {
 						);
 						return new (getHtmlGenerator())(
 							generatorOptions,
-							compilation.moduleGraph
+							compilation.moduleGraph,
+							(module) => getPageOnlyEntry(compilation, module) !== undefined
 						);
 					});
 
@@ -981,15 +1223,15 @@ class HtmlModulesPlugin {
 				/** @type {WeakMap<import("webpack-sources").Source, { resolvedContent: string, contentHash: string }>} */
 				const resolvedSentinelHashCache = new WeakMap();
 
-				// Compute a linked/entry HTML page's emitted filename + chunk-URL-resolved
-				// content + content hash for one (module, chunk). Shared by the emit loop
-				// below and the page-link resolver. The content hash covers only the
-				// chunk-URL-resolved source — links to *other* pages stay sentinels here,
-				// so a page's filename doesn't depend on the filenames of pages it links to.
-				const computePageEmit = (
-					/** @type {NormalModule} */ module,
-					/** @type {import("../Chunk")} */ chunk
-				) => {
+				/**
+				 * Computes an HTML page's emitted filename, chunk-URL-resolved content and
+				 * content hash. Links to other pages stay sentinels, so a page's filename
+				 * never depends on the filenames of the pages it links to.
+				 * @param {NormalModule} module the page's html module
+				 * @param {import("../Chunk")} chunk chunk the page is emitted from
+				 * @returns {{ resolvedContent: string, contentHash: string, filename: string, info: import("../Compilation").AssetInfo } | undefined} the page's emit, or `undefined` when it generates no html
+				 */
+				const computePageEmit = (module, chunk) => {
 					const { chunkGraph, outputOptions } = compilation;
 					const codeGenResult =
 						/** @type {import("../CodeGenerationResults")} */ (
@@ -1066,14 +1308,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:,";
@@ -1204,6 +1447,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
@@ -1274,6 +1527,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;
+	}
 }
 
 /**