webpack 5.111.0 → 5.112.0

package/lib/dependencies/{HtmlEntryDependency.js → html/HtmlEntryDependency.js}

@@ -9,27 +9,31 @@ const {
 	CSS_TYPE,
 	HTML_TYPE,
 	JAVASCRIPT_TYPE
-} = require("../ModuleSourceTypeConstants");
-const ResourceHintPlugin = require("../prefetch/ResourceHintPlugin");
-const ResourceHintRuntimeModule = require("../prefetch/ResourceHintRuntimeModule");
-const makeSerializable = require("../util/makeSerializable");
-const memoize = require("../util/memoize");
-const ModuleDependency = require("./ModuleDependency");
+} = require("../../module/ModuleSourceTypeConstants");
+const ResourceHintPlugin = require("../../prefetch/ResourceHintPlugin");
+const ResourceHintRuntimeModule = require("../../prefetch/ResourceHintRuntimeModule");
+const makeSerializable = require("../../util/makeSerializable");
+const memoize = require("../../util/memoize");
+const ModuleDependency = require("../core/ModuleDependency");
 
 // only the template needs it, and that runs only for a real html module
-const getHtmlGenerator = memoize(() => require("../html/HtmlGenerator"));
+const getHtmlGenerator = memoize(() => require("../../html/HtmlGenerator"));
+// only read when a page carries stylesheets, and it drags the css subsystem in
+const getCssModulesPlugin = memoize(() =>
+	require("../../css/CssModulesPlugin")
+);
 
 /** @import { ReplaceSource } from "webpack-sources" */
-/** @import Chunk from "../Chunk" */
-/** @import ChunkGraph from "../ChunkGraph" */
-/** @import Dependency from "../Dependency" */
-/** @import { DependencyTemplateContext } from "../DependencyTemplate" */
-/** @import Entrypoint from "../Entrypoint" */
-/** @import { Range } from "../javascript/JavascriptParser" */
+/** @import Chunk from "../../graph/Chunk" */
+/** @import ChunkGraph from "../../graph/ChunkGraph" */
+/** @import Dependency, { DependencyKinds } from "../../graph/Dependency" */
+/** @import { DependencyTemplateContext } from "../../template/DependencyTemplate" */
+/** @import Entrypoint from "../../graph/Entrypoint" */
+/** @import { Range } from "../../javascript/JavascriptParser" */
 /** @typedef {"script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch"} HtmlEntryElementKind */
 
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext<[string, string, HtmlEntryElementKind, number, number, boolean, string, number, boolean, number, (Range | null), (Range | null), boolean, number, number]>} ObjectDeserializerContext */
-/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext<[string, string, HtmlEntryElementKind, number, number, boolean, string, number, boolean, number, (Range | null), (Range | null), boolean, number, number]>} ObjectSerializerContext */
+/** @typedef {import("../../serialization/ObjectMiddleware").ObjectDeserializerContext<[string, string, HtmlEntryElementKind, number, number, boolean, string, number, boolean, number, (Range | null), (Range | null), boolean, number, number]>} ObjectDeserializerContext */
+/** @typedef {import("../../serialization/ObjectMiddleware").ObjectSerializerContext<[string, string, HtmlEntryElementKind, number, number, boolean, string, number, boolean, number, (Range | null), (Range | null), boolean, number, number]>} ObjectSerializerContext */
 
 class HtmlEntryDependency extends ModuleDependency {
 	/**
@@ -193,11 +197,11 @@ const getEntrypointChunksInLoadOrder = (entrypoint) => {
 
 	/** @type {Set<Chunk>} */
 	const chunksLoadedByAncestorTags = new Set();
-	/** @type {Set<import("../ChunkGroup")>} */
+	/** @type {Set<import("../../graph/ChunkGroup")>} */
 	const visitedGroups = new Set();
 	/**
 	 * Collects the chunks an ancestor entry's own tags already load.
-	 * @param {import("../ChunkGroup")} group chunk group to walk up from
+	 * @param {import("../../graph/ChunkGroup")} group chunk group to walk up from
 	 * @returns {void}
 	 */
 	const walk = (group) => {
@@ -296,83 +300,6 @@ const chunkHasCss = (chunk, chunkGraph) =>
 		chunkGraph.getChunkModulesIterableBySourceType(chunk, CSS_IMPORT_TYPE)
 	);
 
-/**
- * Deterministic tie-break key for CSS link ordering. `chunk.name` and
- * `chunk.id` are both stable strings (when present); one of them is set for
- * every chunk webpack emits. We can't rely on `Array.prototype.sort` being
- * stable — webpack still supports Node 10.13 where V8's sort is not guaranteed
- * stable for arrays larger than ten elements — so any time
- * `firstCssModulePostOrderIndex` returns the same value for two chunks (most
- * commonly when several chunks have no reachable CSS module in the entrypoint's
- * dependency walk and all map to `Infinity`) this key picks the canonical order.
- * Computed once per chunk when building the sort array rather than per
- * comparison.
- * @param {Chunk} chunk chunk
- * @returns {string} the tie-break key
- */
-const cssChunkSortKey = (chunk) =>
-	`${chunk.name || ""} ${
-		chunk.id === null || chunk.id === undefined ? "" : chunk.id
-	}`;
-
-/**
- * Sort comparator for the CSS sibling emission order. Direct subtraction
- * would yield `NaN` when both indices are `Infinity` (the documented
- * fallback for chunks whose CSS modules the entrypoint's walk never
- * reaches), and `Array#sort` doesn't promise stable ordering on the legacy
- * Node 10 targets this repo still supports — so the tie-breaker must always
- * run when the indices match, including the `Infinity === Infinity` case.
- * @param {{ index: number, key: string }} a first entry
- * @param {{ index: number, key: string }} b second entry
- * @returns {-1 | 0 | 1} sort order
- */
-const compareCssChunkOrder = (a, b) => {
-	if (a.index < b.index) return -1;
-	if (a.index > b.index) return 1;
-	if (a.key < b.key) return -1;
-	if (a.key > b.key) return 1;
-	return 0;
-};
-
-const CSS_SOURCE_TYPES = [CSS_TYPE, CSS_IMPORT_TYPE];
-
-/**
- * Smallest post-order index among the CSS modules of a chunk, taken
- * from the entrypoint's view of the dependency graph. Used to sort
- * sibling CSS chunks so they appear in source import order in the
- * extracted HTML — `entrypoint.chunks` itself does not give that
- * ordering for arbitrary splitChunks layouts. Considers both
- * `CSS_TYPE` and `CSS_IMPORT_TYPE` modules so a chunk made up
- * exclusively of `@import` placeholder modules (e.g. when splitChunks
- * separates them from their target CSS) still sorts by its true
- * source position rather than collapsing to `Infinity` and relying on
- * the chunk-name tie-breaker.
- * @param {Chunk} chunk chunk
- * @param {Entrypoint} entrypoint entrypoint the chunk belongs to
- * @param {ChunkGraph} chunkGraph chunk graph
- * @returns {number} the lowest post-order index of any CSS or
- * CSS-import module in the chunk, or `Number.POSITIVE_INFINITY` when
- * no such module has a defined index (e.g. for a module the
- * entrypoint never reached on its own dependency walk — runtime-only
- * modules, modules reached via `dependOn`, etc.) so such chunks sort
- * last among CSS chunks
- */
-const firstCssModulePostOrderIndex = (chunk, entrypoint, chunkGraph) => {
-	let min = Number.POSITIVE_INFINITY;
-	for (const sourceType of CSS_SOURCE_TYPES) {
-		const modules = chunkGraph.getChunkModulesIterableBySourceType(
-			chunk,
-			sourceType
-		);
-		if (!modules) continue;
-		for (const module of modules) {
-			const idx = entrypoint.getModulePostOrderIndex(module);
-			if (idx !== undefined && idx < min) min = idx;
-		}
-	}
-	return min;
-};
-
 /**
  * Build a fresh `<link rel="stylesheet" href="…">` for a CSS chunk that
  * was pulled in by a `<script src>` entry — the originating tag was a
@@ -498,11 +425,12 @@ const cloneTagWithUrl = (
 	return isLink ? body : `${body}</script>`;
 };
 
-// ES5 `<link rel="modulepreload">` polyfill (Safari <17, Firefox <115, …):
-// on browsers without native support, fetch each modulepreload target with the
-// tag's own credentials/integrity so the pending module import reuses it. The
-// `.ep` guard makes it idempotent, and the observer catches any later-inserted
-// links. Emitted only when the target environment lacks native support.
+// WHY: an ES5 `<link rel="modulepreload">` polyfill (Safari <17, Firefox <115,
+// …). On a browser without native support, each modulepreload target is fetched
+// with the tag's own credentials and integrity, so the pending module import
+// reuses it. The `.ep` guard makes that idempotent and the observer catches any
+// later-inserted link. Emitted only where the target environment lacks native
+// support.
 const MODULEPRELOAD_POLYFILL = [
 	"(function(){",
 	'var s=document.createElement("link").relList;',
@@ -552,7 +480,7 @@ const polyfilledSources = new WeakSet();
  * @property {string} entryName name of the entry this page loads
  * @property {Entrypoint} entrypoint the entrypoint
  * @property {"html" | "js"} hostType `"html"` when the entry has an extracted HTML page; `"js"` when a JS-only entry is being consulted (SSR framework case)
- * @property {import("../Compilation")} compilation the compilation
+ * @property {import("../../Compilation")} compilation the compilation
  * @property {{ rel: "modulepreload" | "preload" | "prefetch", chunk: string, hostChunks: string[] }[]} defaultHints the auto initial-graph hints (`chunk` / `hostChunks` name the referencing chunk — Vite's `hostId`)
  */
 
@@ -591,7 +519,7 @@ const buildLinkTag = (rel, attrs) =>
 /**
  * The chunks a hint means when it names a page: a page loads no JavaScript of
  * its own, so the hint follows the entries the parser extracted from it.
- * @param {import("../Compilation")} compilation compilation
+ * @param {import("../../Compilation")} compilation compilation
  * @param {Chunk} chunk chunk a hint resolved to
  * @returns {Chunk[]} the chunks to hint at
  */
@@ -614,7 +542,7 @@ const resolvePageChunk = (compilation, chunk) => {
 	if (modules === undefined) return chunks.length === 0 ? [chunk] : chunks;
 	for (const module of modules) {
 		const { htmlEntries } =
-			/** @type {import("../html/HtmlModule").HtmlModuleBuildInfo} */ (
+			/** @type {import("../../html/HtmlModule").HtmlModuleBuildInfo} */ (
 				module.buildInfo
 			) || {};
 		if (!htmlEntries) continue;
@@ -635,7 +563,7 @@ const resolvePageChunk = (compilation, chunk) => {
  * resolved with the final hash and public path), an `href` is used verbatim, and
  * `preconnect`/`dns-prefetch` use only `href`. Unknown chunk/entry names are skipped.
  * @param {HtmlResourceHint} desc the descriptor
- * @param {{ compilation: import("../Compilation"), chunkGraph: ChunkGraph, chunkByName: Map<string, Chunk>, outputCrossOrigin: string, integrityOn: boolean }} ctx resolution context
+ * @param {{ compilation: import("../../Compilation"), chunkGraph: ChunkGraph, chunkByName: Map<string, Chunk>, outputCrossOrigin: string, integrityOn: boolean }} ctx resolution context
  * @returns {string[]} the resolved tags
  */
 const resolveResourceHint = (desc, ctx) => {
@@ -737,10 +665,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 		const dep = /** @type {HtmlEntryDependency} */ (dependency);
 		const compilation = runtimeTemplate.compilation;
 
-		// A `type: "html"` link points at another emitted page, not a JS/CSS
-		// chunk: rewrite the attribute to that page's filename (resolved by
-		// HtmlModulesPlugin once it's built) and emit no sibling tags — a page
-		// link loads only itself.
+		// A `type: "html"` link points at another emitted page rather than a chunk,
+		// so rewrite the attribute to that page's filename and emit no siblings:
+		// a page link loads only itself.
 		if (dep.elementKind === "html") {
 			source.replace(
 				dep.range[0],
@@ -764,21 +691,17 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 		const orderedChunks = getEntrypointChunksInLoadOrder(entrypoint);
 		const entryChunk = orderedChunks[orderedChunks.length - 1];
 
-		// `crossorigin` mirrors `output.crossOriginLoading` onto every injected
-		// tag. Empty when the option is off or the originating tag already set
-		// `crossorigin` (author value wins, flagged at parse time). Mirrors
-		// webpack's runtime, which sets `crossOrigin` on chunk-loading scripts,
-		// and matches Vite, which emits it on every injected script/stylesheet.
+		// Mirrors `output.crossOriginLoading` onto every injected tag, as webpack's
+		// runtime does for chunk-loading scripts. Empty when the option is off or
+		// the originating tag set `crossorigin` itself, since the author wins.
 		const crossOrigin =
 			crossOriginLoading && !dep.hasOwnCrossOrigin
 				? ` crossorigin="${crossOriginLoading}"`
 				: "";
 
-		// Per-chunk SRI: emit an `integrity` sentinel resolved late (after the
-		// chunks' final bytes exist) by `resolveChunkIntegritySentinels`. Tags are
-		// generated per HTML module, but one module can back pages with different
-		// `integrity` options, so sentinels are emitted whenever any page wants SRI
-		// and each page then resolves or strips them on emit.
+		// Per-chunk SRI emits an `integrity` sentinel resolved once the chunks'
+		// final bytes exist. One module can back pages with different `integrity`
+		// options, so every page emits them and strips its own on emit.
 		const htmlOption = compilation.outputOptions.html;
 		const integrityOn = getHtmlGenerator().hasIntegritySentinels(compilation);
 		const inject =
@@ -841,10 +764,6 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 			compilation.outputOptions.module === true ? ' type="module"' : "";
 
 		const entryContentHashType = isStylesheet ? "css" : "javascript";
-		const inlineOption =
-			typeof htmlOption === "object" ? htmlOption.inline : undefined;
-		/** @type {RegExp[] | null} */
-		const inlinePatterns = Array.isArray(inlineOption) ? inlineOption : null;
 		/**
 		 * @param {Chunk} chunk chunk to test
 		 * @param {"javascript" | "css"} contentType which asset of the chunk is being emitted
@@ -854,25 +773,18 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 			// A `<link rel="modulepreload">` is a void fetch hint — inlining it would
 			// emit an unclosed, executing `<script>`.
 			if (dep.elementKind === "modulepreload") return false;
+			if (!getHtmlGenerator().canInlineChunk(compilation, chunk)) {
+				return false;
+			}
 			if (dep.forceInline) return true;
-			if (!inlineOption) return false;
-			if (inlineOption === true) return true;
-			// `"script"`/`"style"` inline by asset type, not chunk name — a chunk's
-			// JS and CSS share a name, so only the emitted `contentType` tells them
-			// apart.
-			if (inlineOption === "script") return contentType === "javascript";
-			if (inlineOption === "style") return contentType === "css";
-			const name = chunk.name || String(chunk.id);
-			return /** @type {RegExp[]} */ (inlinePatterns).some((re) =>
-				re.test(name)
-			);
+			return getHtmlGenerator().isChunkInlined(htmlOption, chunk, contentType);
 		};
 
 		// Only inline when the HTML module is emitted as a standalone page (extract mode).
 		// If it's exported as a JS string, sentinels would end up embedded in the JS chunk.
 		const isExtractedHtml = chunkGraph
 			.getModuleSourceTypes(
-				/** @type {import("../Module")} */ (templateContext.module)
+				/** @type {import("../../module/Module")} */ (templateContext.module)
 			)
 			.has("html");
 		const entryInlined =
@@ -948,11 +860,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 					? ` integrity="${getHtmlGenerator().makeChunkIntegritySentinel(chunk, kind)}"`
 					: "";
 				if (kind === "css") {
-					// A CSS chunk is always loaded via `<link rel="stylesheet">`.
-					// Clone only when the entry tag is itself a native `<link
-					// rel="stylesheet">` (so attributes like `media` carry over);
-					// a `<script>` entry that imported CSS, or a custom element,
-					// gets a freshly synthesized `<link>`.
+					// A CSS chunk always loads through `<link rel="stylesheet">`. Clone
+					// only when the entry tag is itself one, so `media` carries over;
+					// anything else gets a freshly synthesized `<link>`.
 					if (isStylesheet && tagIsNative) {
 						return cloneTagWithUrl(
 							originalTag,
@@ -1004,10 +914,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 			// Parser-derived anchor (a source text scan would match `</head>` inside
 			// comments or raw text).
 			const headClose = inject === "head" ? dep.headAnchor : -1;
-			// When the entry tag is already inside <head> (tagStart < headClose),
-			// inserting siblings at headClose would place them after the entry,
-			// reversing runtime-before-entry execution order for deferred scripts.
-			// Insert before the entry tag instead so the load order is preserved.
+			// With the entry tag already inside `<head>`, inserting at `headClose`
+			// would place siblings after it and reverse runtime-before-entry order
+			// for deferred scripts. Insert before the entry tag instead.
 			const headAt =
 				headClose < 0
 					? -1
@@ -1018,31 +927,26 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 			let cssHtml = "";
 			let cssAt = -1;
 			if (isStylesheet) {
-				// `<link rel="stylesheet">` entries are CSS, but a shared/runtime
-				// JS-only chunk (e.g. `optimization.runtimeChunk`) can still sit in
-				// the entrypoint — only clone the `<link>` for siblings that actually
-				// produce a `.css` asset (mirrors the JS branch below), otherwise the
-				// link points at a non-existent `.css` file (a 404, or an empty
-				// `<style>` when inlined). Attributes like `media` still carry over.
+				// WHY: a `<link rel="stylesheet">` entry is CSS, but a shared or runtime
+				// JS-only chunk — `optimization.runtimeChunk`, say — can still sit in the
+				// entrypoint, so the `<link>` is cloned only for siblings that actually
+				// produce a `.css` asset, mirroring the JS branch below. Otherwise it
+				// points at a `.css` file that does not exist: a 404, or an empty
+				// `<style>` when inlined. Attributes such as `media` still carry over.
 				for (let i = 0; i < orderedChunks.length - 1; i++) {
 					if (chunkHasCss(orderedChunks[i], chunkGraph)) {
 						siblings.push(buildSibling(orderedChunks[i], "css"));
 					}
 				}
 			} else {
-				// CSS chunks are emitted before JS chunks so the cascade is set
-				// up before any script runs. Within CSS the order needs to match
-				// the source's import order — `entrypoint.chunks` alone doesn't
-				// give us that for arbitrary splitChunks layouts (splitChunks
-				// inserts each new chunk before the entry chunk via
-				// `insertChunk(_, before)`, so split CSS siblings end up in
-				// *reverse* of the order they were processed — exactly the
-				// html-webpack-plugin#1838 / mini-css-extract#959 symptom). We
-				// re-derive the order from the entrypoint's module post-order
-				// index, which mirrors the dependency walk and so reflects the
-				// import order.
-				/** @type {{ chunk: Chunk, index: number, key: string }[]} */
-				const cssChunkOrder = [];
+				// WHY: splitChunks inserts each new chunk before the entry chunk, so
+				// `entrypoint.chunks` hands back split CSS siblings in reverse of the
+				// order they were processed — the html-webpack-plugin#1838 and
+				// mini-css-extract#959 symptom. The order is re-derived from the
+				// entrypoint's module post-order index, which follows the dependency
+				// walk and so the source's import order.
+				/** @type {Chunk[]} */
+				const cssChunks = [];
 				/** @type {Chunk[]} */
 				const jsChunks = [];
 				for (let i = 0; i < orderedChunks.length - 1; i++) {
@@ -1050,47 +954,27 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 					const hasCss = chunkHasCss(chunk, chunkGraph);
 					const hasJs = chunkHasJs(chunk, chunkGraph);
 					if (hasCss) {
-						cssChunkOrder.push({
-							chunk,
-							index: firstCssModulePostOrderIndex(
-								chunk,
-								entrypoint,
-								chunkGraph
-							),
-							key: cssChunkSortKey(chunk)
-						});
+						cssChunks.push(chunk);
 					}
-					// Anything that isn't CSS-only stays on the JS lane, in the
-					// `orderedChunks` order — that preserves the runtime-first /
-					// vendor-before-entry invariant of `getEntrypointChunksInLoadOrder`.
-					// Chunks that produce no `.js` and no `.css` (e.g. wasm-only
-					// or asset-only) still get a `<script>` clone here so we
-					// keep prior behavior for users who relied on it.
+					// Anything not CSS-only stays on the JS lane in `orderedChunks` order,
+					// preserving the runtime-first invariant. A chunk emitting neither
+					// `.js` nor `.css` still gets a clone, as it always has.
 					if (hasJs || !hasCss) jsChunks.push(chunk);
 				}
-				// If the entry chunk itself contains CSS (entry JS imports CSS
-				// without splitChunks separating it), fold it into the same CSS
-				// ordering so the entry-chunk `<link>` lands in the correct
-				// cascade position relative to sibling CSS chunks.
+				// When the entry chunk carries CSS itself, fold it into the same
+				// ordering so its `<link>` lands in the right cascade position
+				// relative to the sibling CSS chunks.
 				if (chunkHasCss(entryChunk, chunkGraph)) {
-					cssChunkOrder.push({
-						chunk: entryChunk,
-						index: firstCssModulePostOrderIndex(
-							entryChunk,
-							entrypoint,
-							chunkGraph
-						),
-						key: cssChunkSortKey(entryChunk)
-					});
+					cssChunks.push(entryChunk);
 				}
-				cssChunkOrder.sort(compareCssChunkOrder);
-				// Stylesheets always land in <head> when the page has one. A
-				// classic blocking script pins them ahead of itself (`cssAnchor`)
-				// so its execution never awaits later CSS; when every script is
-				// `defer`/module they go to the *end* of head, after the script
-				// tags — Vite's and html-webpack-plugin's order: the scripts
-				// start fetching earlier yet still execute after parsing and
-				// after pending stylesheets.
+				const cssChunkOrder = getCssModulesPlugin().getCssChunksInCascadeOrder(
+					cssChunks,
+					entrypoint,
+					chunkGraph
+				);
+				// Stylesheets land in `<head>`. A classic blocking script pins them
+				// ahead of itself, so it never awaits later CSS; with only `defer` and
+				// module scripts they go last, which starts the script fetches earlier.
 				cssAt =
 					dep.headAnchor >= 0
 						? dep.cssAnchor >= 0 && dep.cssAnchor < dep.headAnchor
@@ -1100,7 +984,7 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 							? dep.cssAnchor
 							: dep.tagStart;
 				cssHtml = cssChunkOrder
-					.map(({ chunk }) => buildSibling(chunk, "css"))
+					.map((chunk) => buildSibling(chunk, "css"))
 					.join("");
 				for (const chunk of jsChunks) {
 					siblings.push(buildSibling(chunk, "javascript"));
@@ -1116,15 +1000,15 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 			if (cssHtml !== "" && dep.cssAnchor < 0) source.insert(cssAt, cssHtml);
 		}
 
-		// Resource hints are opt-in — webpack already loads the initial chunks
-		// via parallel `<script>` tags, so there is no waterfall to prevent by
-		// default. `output.resourceHints` requests them: `true` preloads the
-		// entry's initial dependency chunks (runtime, vendor, split); an array
-		// or function adds custom hints (a function may spread the auto
-		// `defaultHints`). Only for extracted pages — a JS-string HTML export
-		// would embed the sentinels in the JS chunk. URL-referenced assets
-		// (fonts, images) carrying `webpackPrefetch` / `webpackPreload`
-		// (magic-comment or `parser.<type>.urlHints` rule) also emit here.
+		// WHY: resource hints are opt-in, the initial chunks already loading
+		// through parallel `<script>` tags, so there is no default waterfall to
+		// prevent. `output.resourceHints` requests them: `true` preloads the entry's
+		// initial dependency chunks (runtime, vendor, split), while an array or a
+		// function adds custom ones and a function may spread the auto
+		// `defaultHints`. Extracted pages only — a JS-string HTML export would embed
+		// the sentinels in the JS chunk. A URL-referenced asset carrying
+		// `webpackPrefetch` / `webpackPreload`, by magic comment or a
+		// `parser.<type>.urlHints` rule, emits here too.
 		const resourceHintResolver =
 			ResourceHintPlugin.getCompilationResolver(compilation);
 		const resourceHints = resourceHintResolver.hints;
@@ -1152,15 +1036,16 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 
 			// === chunks channel — the entry's own initial dependency graph ===
 			if (resourceHints !== undefined && resourceHints !== false) {
-				// The auto initial-graph preload as descriptors carrying their exact
-				// tag, built only when needed (`true`/`"prefetch"` emits them, a
-				// function may spread them). The entry chunk is skipped — it's
-				// already the `<script src>`. ESM uses `modulepreload` (fetch +
-				// parse), classic output `preload as="script"`, and `"prefetch"`
-				// opts into `<link rel="prefetch">` (idle-time fetch, no `as` / no
-				// `integrity` — the spec doesn't list them). Async `import()` chunks
-				// aren't covered here; use `module.parser.javascript.dynamicImport*`
-				// which routes through webpack's on-demand chunk-load runtime.
+				// WHY: descriptors for the auto initial-graph preload, carrying their
+				// exact tag and built only when needed — `true` or `"prefetch"` emits
+				// them, and a function may spread them. The entry chunk is skipped, being
+				// the `<script src>` already. ESM uses `modulepreload`, which fetches and
+				// parses; classic output `preload as="script"`; and `"prefetch"` opts into
+				// `<link rel="prefetch">`, an idle-time fetch with no `as` and no
+				// `integrity`, which the spec does not list. An async `import()` chunk is
+				// not covered here: that is
+				// `module.parser.javascript.dynamicImport*`, which routes through
+				// webpack's on-demand chunk-load runtime.
 				const prefetchMode = resourceHints === "prefetch";
 				const preloadMode = resourceHints === true;
 				/** @type {"modulepreload" | "preload" | "prefetch"} */
@@ -1195,10 +1080,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 										"javascript"
 									)}"`
 								: "";
-						// Mirror the entry tag's `nonce`/`crossorigin`/`referrerpolicy`
-						// (and `output.crossOriginLoading`) so the request matches the
-						// sibling `<script>`'s and the browser reuses it instead of
-						// fetching twice.
+						// Mirror the entry tag's `nonce`, `crossorigin` and `referrerpolicy`,
+						// so the request matches the sibling `<script>`'s and the browser
+						// reuses it rather than fetching twice.
 						const attrs = `${dep.copyableAttrsText}${crossOrigin}${integrityAttr}`;
 						const tag = prefetchMode
 							? `<link rel="prefetch" href="${href}"${attrs}>`
@@ -1229,7 +1113,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 						// `<script>` entry — that's what users key on.
 						let entryName = dep.entryName;
 						for (const c of chunkGraph.getModuleChunks(
-							/** @type {import("../Module")} */ (templateContext.module)
+							/** @type {import("../../module/Module")} */ (
+								templateContext.module
+							)
 						)) {
 							if (c.name) {
 								entryName = c.name;
@@ -1276,14 +1162,10 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 			}
 
 			// === assets channel — URL-referenced assets carrying `prefetch`/`preload` ===
-			// The plugin has already scanned the entrypoint's chunks × modules
-			// once and cached the URL/CSS/HTML asset deps for this entry name;
-			// consume that list here so this template doesn't repeat the walk.
-			// Each unique asset emits one `<link rel="prefetch|preload">` into
-			// the HTML `<head>`; the JS chunk-startup runtime skips it (no
-			// double `<link>` in DOM). URLs are sentinels resolved from asset
-			// codegen data during `HtmlModulesPlugin` render — the asset
-			// module might not have been codegen'd yet at this point.
+
+			// The plugin already walked the entrypoint once and cached this entry's
+			// asset deps, so consume that list rather than repeat it. URLs stay
+			// sentinels here: the asset module may not be codegen'd yet.
 			const outputCrossOriginAttr = crossOriginLoading
 				? ` crossorigin="${crossOriginLoading}"`
 				: "";
@@ -1294,7 +1176,7 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 				const asAttr =
 					md.asAttribute ||
 					ResourceHintRuntimeModule.guessAsAttribute(
-						/** @type {import("./URLDependency")} */ (md).request || ""
+						/** @type {import("../url/URLDependency")} */ (md).request || ""
 					);
 				const typeAttr = md.typeAttribute;
 				const mediaAttr = md.mediaAttribute;
@@ -1324,12 +1206,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 						finalHints.push(h);
 					}
 				}
-				// When the target environment lacks native `modulepreload` (an
-				// `output.environment` capability, like the JS-feature checks), append
-				// a tiny polyfill once per page so the hints still warm the cache there.
-				// `resourceHints.modulePreloadPolyfill` defaults from the target's
-				// modulepreload support (`output.environment.modulePreload`); `false`
-				// opts out (strict CSP).
+				// Without native `modulepreload` the hints warm no cache, so append the
+				// polyfill once per page. It defaults from the target's support, and
+				// `false` opts out, which a strict CSP needs.
 				if (
 					rhOptions &&
 					rhOptions.modulePreloadPolyfill &&
@@ -1339,10 +1218,9 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 					polyfilledSources.add(source);
 					finalHints.push(`<script>${MODULEPRELOAD_POLYFILL}</script>`);
 				}
-				// Insert right after the `<head>` open tag (parser-derived) so the
-				// hints are the document's first fetches; fall back to the first
-				// blocking script (else the entry tag) when the page has no
-				// written `<head>` (e.g. an HTML fragment).
+				// Insert just after the `<head>` open tag, so the hints are the first
+				// fetches. A page with no written `<head>` falls back to the first
+				// blocking script, else the entry tag.
 				const hintAt =
 					dep.headOpenEnd >= 0
 						? dep.headOpenEnd
@@ -1355,9 +1233,13 @@ HtmlEntryDependency.Template = class HtmlEntryDependencyTemplate extends (
 	}
 };
 
-makeSerializable(
-	HtmlEntryDependency,
+makeSerializable(HtmlEntryDependency, [
+	"webpack/lib/dependencies/html/HtmlEntryDependency",
+	// TODO in the next major release: remove, they restore pre-move cache packs
 	"webpack/lib/dependencies/HtmlEntryDependency"
-);
+]);
+
+/** @type {Set<keyof DependencyKinds>} */
+HtmlEntryDependency.KINDS = new Set([...ModuleDependency.KINDS, "html-entry"]);
 
 module.exports = HtmlEntryDependency;

package/lib/dependencies/{HtmlInlineHtmlDependency.js → html/HtmlInlineHtmlDependency.js}

@@ -4,17 +4,17 @@
 
 "use strict";
 
-const { HTML_TYPE } = require("../ModuleSourceTypeConstants");
-const makeSerializable = require("../util/makeSerializable");
-const ModuleDependency = require("./ModuleDependency");
+const { HTML_TYPE } = require("../../module/ModuleSourceTypeConstants");
+const makeSerializable = require("../../util/makeSerializable");
+const ModuleDependency = require("../core/ModuleDependency");
 
 /** @import { ReplaceSource } from "webpack-sources" */
-/** @import CodeGenerationResults from "../CodeGenerationResults" */
-/** @import Dependency, { UpdateHashContext } from "../Dependency" */
-/** @import { DependencyTemplateContext } from "../DependencyTemplate" */
-/** @import Module from "../Module" */
-/** @import { Range } from "../javascript/JavascriptParser" */
-/** @import Hash from "../util/Hash" */
+/** @import CodeGenerationResults from "../../module/CodeGenerationResults" */
+/** @import Dependency, { UpdateHashContext } from "../../graph/Dependency" */
+/** @import { DependencyTemplateContext } from "../../template/DependencyTemplate" */
+/** @import Module from "../../module/Module" */
+/** @import { Range } from "../../javascript/JavascriptParser" */
+/** @import Hash from "../../util/Hash" */
 
 // One pass over the source: each char is replaced once and replacements aren't
 // re-scanned, so this matches the `&`-first sequential escape chain exactly.
@@ -98,9 +98,10 @@ HtmlInlineHtmlDependency.Template = class HtmlInlineHtmlDependencyTemplate exten
 	}
 };
 
-makeSerializable(
-	HtmlInlineHtmlDependency,
+makeSerializable(HtmlInlineHtmlDependency, [
+	"webpack/lib/dependencies/html/HtmlInlineHtmlDependency",
+	// TODO in the next major release: remove, they restore pre-move cache packs
 	"webpack/lib/dependencies/HtmlInlineHtmlDependency"
-);
+]);
 
 module.exports = HtmlInlineHtmlDependency;