webpack 5.111.0 → 5.112.0

package/lib/html/HtmlParser.js

@@ -4,21 +4,22 @@
 
 "use strict";
 
-const Parser = require("../Parser");
-const ConstDependency = require("../dependencies/ConstDependency");
-const HtmlEntryDependency = require("../dependencies/HtmlEntryDependency");
-const HtmlInlineHtmlDependency = require("../dependencies/HtmlInlineHtmlDependency");
-const HtmlInlineScriptDependency = require("../dependencies/HtmlInlineScriptDependency");
-const HtmlInlineStyleDependency = require("../dependencies/HtmlInlineStyleDependency");
-const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
-const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
+const ConstDependency = require("../dependencies/core/ConstDependency");
+const StaticExportsDependency = require("../dependencies/core/StaticExportsDependency");
+const HtmlEntryDependency = require("../dependencies/html/HtmlEntryDependency");
+const HtmlInlineHtmlDependency = require("../dependencies/html/HtmlInlineHtmlDependency");
+const HtmlInlineScriptDependency = require("../dependencies/html/HtmlInlineScriptDependency");
+const HtmlInlineStyleDependency = require("../dependencies/html/HtmlInlineStyleDependency");
+const HtmlSourceDependency = require("../dependencies/html/HtmlSourceDependency");
 const WebpackError = require("../errors/WebpackError");
+const Parser = require("../module/Parser");
 const ResourceHintPlugin = require("../prefetch/ResourceHintPlugin");
 const parseResourceHintOptions = require("../prefetch/parseResourceHintOptions");
+const ModuleInfoHeaderPlugin = require("../template/ModuleInfoHeaderPlugin");
 const LazySet = require("../util/LazySet");
 const LocConverter = require("../util/LocConverter");
 const createHash = require("../util/createHash");
-const { contextify } = require("../util/identifier");
+const { contextify, getRequestBaseName } = require("../util/identifier");
 const {
 	createMagicCommentContext,
 	parseMagicComment,
@@ -26,12 +27,13 @@ const {
 } = require("../util/magicComment");
 const memoize = require("../util/memoize");
 const { JAVASCRIPT_SCRIPT_TYPES } = require("./data");
+const { SVG_TAG_ADJUST } = require("./data");
+const { SourceProcessor } = require("./syntax");
 const {
-	NS_HTML,
-	NS_SVG,
+	Field,
+	Flag,
 	NodeType,
-	SVG_TAG_ADJUST,
-	SourceProcessor,
+	Part,
 	baseTag,
 	buildHeadTags,
 	decodeEntities,
@@ -43,7 +45,7 @@ const {
 	parseMsapplicationTask,
 	parseSrc,
 	parseSrcset
-} = require("./syntax");
+} = require("./syntax-parser");
 
 const getUnsupportedFeatureWarning = memoize(() =>
 	require("../errors/UnsupportedFeatureWarning")
@@ -59,10 +61,10 @@ const getCommentCompilationWarning = memoize(() =>
 
 /** @import { HtmlParserOptions } from "../../declarations/WebpackOptions" */
 /** @import { Range } from "../javascript/JavascriptParser" */
-/** @import Module, { BuildInfo, BuildMeta } from "../Module" */
+/** @import Module, { BuildInfo, BuildMeta } from "../module/Module" */
 /** @import { FileSystemDependencies } from "../Compilation" */
-/** @import NormalModule from "../NormalModule" */
-/** @import { ParserState, PreparsedAst } from "../Parser" */
+/** @import NormalModule from "../module/NormalModule" */
+/** @import { ParserState, PreparsedAst } from "../module/Parser" */
 /** @import { HtmlModuleBuildInfo } from "./HtmlModule" */
 
 /**
@@ -78,7 +80,8 @@ const getCommentCompilationWarning = memoize(() =>
  */
 /** @typedef {(source: string, context: HtmlTemplateContext) => string} HtmlTemplateFunction */
 
-/** @import { ParsedSource } from "./syntax" */
+/** @import { ParsedSource } from "./syntax-parser" */
+/** @import { MagicCommentOptions } from "../util/magicComment" */
 
 // Cheap pre-filter for a `style="..."` attribute: only route it through the
 // CSS pipeline when it can hold a URL-bearing function (`url()` / `src()` /
@@ -90,10 +93,9 @@ const STYLE_ATTR_URL_REGEXP = /url\(|src\(|image\(|image-set\(/i;
 // hold a `url(...)` FuncIRI. Most are plain colors/keywords (`#fff`, `red`).
 const FUNC_IRI_URL_REGEXP = /url\(/i;
 
-// Cheap pre-filter for `<iframe srcdoc>` markup: only spin up a nested HTML
-// module when the document can reference an asset — via any attribute (`src=`,
-// `href=`, `style=`, …), a CSS `url(...)`, or a CSS `@import`. Pure
-// formatting/text markup (`<p>hi</p>`) rewrites to itself, so skip it.
+// Cheap pre-filter for `<iframe srcdoc>`: a nested HTML module is only worth
+// building when the markup can reference an asset — any attribute, a CSS
+// `url(...)` or an `@import`. Pure text markup rewrites to itself.
 const SRCDOC_ASSET_REGEXP = /[=]|url\(|@import/i;
 
 // A URL carrying its own scheme (`https:`, `data:`, …) ignores the document
@@ -106,6 +108,12 @@ const CHARSET_DECLARATION_REGEXP = /charset\s*=/i;
 // CSP/fetch attributes copied verbatim onto a synthesized sibling `<link>` /
 // `<script>` (`HtmlEntryDependency`). Fixed output order, independent of
 // source order.
+/**
+ * @param {import("./syntax-parser").HtmlPath} path walk path at an element
+ * @returns {boolean} whether the element is in the HTML namespace
+ */
+const isHtmlElement = (path) => !path.flag(Flag.svg) && !path.flag(Flag.mathml);
+
 const COPYABLE_SIBLING_ATTRS = ["nonce", "crossorigin", "referrerpolicy"];
 
 const CC_QUOTATION = '"'.charCodeAt(0);
@@ -116,54 +124,135 @@ const CC_SLASH = "/".charCodeAt(0);
  * Byte-exact source span of an attribute including the single leading
  * whitespace (` name`, ` name=value`, ` name="value"`), mirroring the
  * tokenizer's end-of-attribute rule (`valueEnd + 1` past the closing quote).
- * @param {import("./syntax").HtmlPath} path walk path (used only for attribute-ref reads)
+ * @param {import("./syntax-parser").HtmlPath} path walk path (used only for attribute-ref reads)
  * @param {string} source HTML source
- * @param {import("./syntax").HtmlAttributeRef} attr attribute ref
+ * @param {import("./syntax-parser").HtmlAttributeRef} attr attribute ref
  * @returns {string} the attribute's source slice
  */
 const attrSourceSpan = (path, source, attr) => {
-	const valueStart = path.attributeValueStart(attr);
-	const valueEnd = path.attributeValueEnd(attr);
+	const valueStart = path.startOf(Part.value, attr);
+	const valueEnd = path.endOf(Part.value, attr);
 	const end =
 		valueStart === -1
-			? path.attributeNameEnd(attr)
+			? path.endOf(Part.name, attr)
 			: source.charCodeAt(valueStart - 1) === CC_QUOTATION ||
 				  source.charCodeAt(valueStart - 1) === CC_APOSTROPHE
 				? valueEnd + 1
 				: valueEnd;
-	return source.slice(path.attributeNameStart(attr) - 1, end);
+	return source.slice(path.startOf(Part.name, attr) - 1, end);
 };
 
 /**
  * Source span of a tag's `integrity` attribute (offsets relative to
  * `elementStart`, leading whitespace and quotes included), so the template can
  * drop the content-specific author value without re-parsing. Null when absent.
- * @param {import("./syntax").HtmlPath} path walk path (for attribute reads)
+ * @param {import("./syntax-parser").HtmlPath} path walk path (for attribute reads)
  * @param {string} source HTML source
  * @param {number} elementStart offset of the tag's opening `<`
  * @returns {Range | null} the span, or null when there is no `integrity`
  */
 const captureIntegrityRange = (path, source, elementStart) => {
-	const integrityAttr = path.findAttribute("integrity");
-	if (integrityAttr === 0 || path.attributeNameStart(integrityAttr) < 0) {
+	const integrityAttr = path.fieldNamed(Field.attributes, "integrity");
+	if (integrityAttr === 0 || path.startOf(Part.name, integrityAttr) < 0) {
 		return null;
 	}
-	let rs = path.attributeNameStart(integrityAttr);
+	let rs = path.startOf(Part.name, integrityAttr);
 	while (rs > 0 && isAsciiWhitespace(source.charCodeAt(rs - 1))) {
 		rs--;
 	}
 	let re;
-	const ivs = path.attributeValueStart(integrityAttr);
+	const ivs = path.startOf(Part.value, integrityAttr);
 	if (ivs === -1) {
-		re = path.attributeNameEnd(integrityAttr);
+		re = path.endOf(Part.name, integrityAttr);
 	} else {
 		const q = source.charCodeAt(ivs - 1);
-		const ive = path.attributeValueEnd(integrityAttr);
+		const ive = path.endOf(Part.value, integrityAttr);
 		re = q === CC_QUOTATION || q === CC_APOSTROPHE ? ive + 1 : ive;
 	}
 	return [rs - elementStart, re - elementStart];
 };
 
+/**
+ * Whether a span holds nothing a script body could have read — whitespace and
+ * comments only. Scanned rather than matched: the pattern for it backtracks.
+ * @param {string} source HTML source
+ * @param {number} start offset the span starts at
+ * @param {number} end offset the span ends at
+ * @returns {boolean} true when no node of the span reaches the DOM
+ */
+const isEmptyRunGap = (source, start, end) => {
+	let offset = start;
+	while (offset < end) {
+		if (isAsciiWhitespace(source.charCodeAt(offset))) {
+			offset++;
+			continue;
+		}
+		if (!source.startsWith("<!--", offset)) return false;
+		const close = source.indexOf("-->", offset + 4);
+		if (close === -1 || close + 3 > end) return false;
+		offset = close + 3;
+	}
+	return true;
+};
+
+// What an entry name keeps from a page's path. The mapping is reversible, so
+// two pages of one compilation can never sanitize to the same name.
+const ENTRY_NAME_KEPT_REGEXP = /[^\w.]/g;
+const ENTRY_NAME_EXTENSION_REGEXP = /\.[^./\\]*$/;
+const ENTRY_NAME_TRIM_REGEXP = /^[-.]+|[-.]+$/g;
+
+/**
+ * Names the entries a page's tags are extracted under, after the page itself.
+ * A `data:` document has no path to be named after, so it keeps a digest of
+ * the one thing that tells it from another such document.
+ * @param {string} pagePath the page's path, relative to the compiler context
+ * @param {import("../util/Hash").HashFunction | undefined} hashFunction `output.hashFunction`
+ * @returns {string} the prefix every entry name of this page starts with
+ */
+const entryNamePrefix = (pagePath, hashFunction) => {
+	if (pagePath.startsWith("data:")) {
+		const digest = createHash(hashFunction || "md4")
+			.update(pagePath)
+			.digest("hex")
+			.slice(0, 8);
+		return `data-${digest}`;
+	}
+	return pagePath
+		.replace(ENTRY_NAME_EXTENSION_REGEXP, "")
+		.replace(ENTRY_NAME_KEPT_REGEXP, (character) => {
+			if (character === "-") return "--";
+			if (character === "/" || character === "\\") return "-";
+			return `_${character.charCodeAt(0).toString(16)}_`;
+		})
+		.replace(ENTRY_NAME_TRIM_REGEXP, "");
+};
+
+/**
+ * @typedef {object} HtmlChunkNameData
+ * @property {string} page the page's path, escaped for use in a name
+ * @property {string} name the tag's own basename, empty for an inline body
+ * @property {number} index the tag's position in the page, across all kinds
+ * @property {"script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch"} type what the tag is extracted as
+ */
+
+/** @typedef {(data: HtmlChunkNameData) => string} HtmlChunkNameFn */
+
+const CHUNK_NAME_PLACEHOLDER_REGEXP = /\[(page|name|index|type)\]/g;
+
+/**
+ * End offset of a raw-text element, its closing tag included. `contentEnd`
+ * sits at the `</` that ended the body, and at the body's end without one.
+ * @param {string} source HTML source
+ * @param {number} contentEnd end offset of the element's raw text
+ * @returns {number} offset just past the element
+ */
+const rawTextElementEnd = (source, contentEnd) => {
+	const close = source.startsWith("</", contentEnd)
+		? source.indexOf(">", contentEnd)
+		: -1;
+	return close === -1 ? contentEnd : close + 1;
+};
+
 /**
  * @param {Map<string, string>} attributes attributes
  * @param {string} name name
@@ -349,8 +438,8 @@ const isLinkStylesheet = (attributes) => {
 /** @typedef {SourceType | ((attrs: Map<string, string>, css: boolean) => SourceType)} SourceTypeOrResolver */
 /** @typedef {(attributes: Map<string, string>, value: string) => boolean} SourceFilter */
 /** @typedef {{ tag?: string, attribute: string, type: SourceType, filter?: SourceFilter }} SourceEntry */
-/** A `type` plus optional gates: `filter` (the decoded attribute map + the decoded value; return false to skip — covers both cross-attribute checks and cheap value checks) and `namespace` (restrict to an element namespace, e.g. SVG). */
-/** @typedef {{ type: SourceTypeOrResolver, filter?: SourceFilter, namespace?: number }} SourceItem */
+/** A `type` plus optional gates: `filter` (the decoded attribute map + the decoded value; return false to skip — covers both cross-attribute checks and cheap value checks) and `namespace` (restrict to an element namespace, by its `Flag`, e.g. SVG). */
+/** @typedef {{ type: SourceTypeOrResolver, filter?: SourceFilter, namespace?: typeof Flag.svg | typeof Flag.mathml }} SourceItem */
 /** A tag→attribute lookup; a `undefined` value marks a built-in source disabled via `sources` (`type: false`). */
 /** @typedef {Record<string, SourceItem | undefined>} SourceBucket */
 /** @typedef {Record<string, SourceBucket>} SourceTable */
@@ -365,15 +454,15 @@ const isLinkStylesheet = (attributes) => {
  * `constructor`, or `toString` resolve to inherited values at lookup
  * time — producing bogus dependencies and letting `sources: false` be
  * bypassed.
- * @param {...(Record<string, EXPECTED_ANY> | undefined)} bags property bags
- * @returns {EXPECTED_ANY} null-prototype dictionary
+ * @template T
+ * @param {...(Record<string, T> | undefined)} bags property bags
+ * @returns {Record<string, T>} null-prototype dictionary
  */
 const dict = (...bags) => Object.assign(Object.create(null), ...bags);
 
-// Shared `SourceItem` singletons used by the built-in defaults —
-// keeping one instance per kind stabilizes V8's hidden classes across
-// lookups in the walk. `srcset` is its own type; the walk picks the
-// `parseSrcset` parser for it and otherwise treats it like `src`.
+// One shared `SourceItem` per kind, so the walk's lookups stay on a single V8
+// hidden class. `srcset` is its own type: the walk picks `parseSrcset` for it
+// and otherwise treats it like `src`.
 /** @type {SourceItem} */
 const PLAIN_SRC = { type: "src", filter: undefined };
 /** @type {SourceItem} */
@@ -389,10 +478,9 @@ const LINK_HREF = {
 	type: (attrs, css) => {
 		if (isLinkModulePreload(attrs)) return "modulepreload";
 		if (css && isLinkStylesheet(attrs)) return "stylesheet";
-		// `rel="preload"/"prefetch"` with `as="script"` (or `as="style"` when
-		// `experiments.css` is on) becomes a bundled, non-executing entry whose
-		// `href` is rewritten to the built chunk; other `as` targets (image,
-		// font, fetch, …) stay plain asset URLs.
+		// `rel="preload"/"prefetch"` with `as="script"` — or `as="style"` under
+		// `experiments.css` — becomes a non-executing entry pointing at the built
+		// chunk; every other `as` target stays a plain asset URL.
 		const rel = getAttributeValue(attrs, "rel");
 		if (rel) {
 			const rels = rel.trim().toLowerCase().split(/\s+/);
@@ -446,11 +534,9 @@ const META_CONTENT = {
 	filter: filterMetaContent
 };
 
-// Built-in lookup table, written directly in its final resolved shape:
-// `DEFAULT_SOURCES_BY_TAG[tag][attribute] = item`. No module-load
-// loop, no separate array representation — every parser created with
-// the default `sources` config just references this table and pays
-// zero per-parser work.
+// Written in its final resolved shape, `[tag][attribute] = item`, rather than
+// built from an array at module load: a parser on the default `sources` config
+// references this table and pays nothing per instance.
 /** @type {Record<string, Record<string, SourceItem>>} */
 const DEFAULT_SOURCES_BY_TAG = dict({
 	// Obsolete Java-applet element; `code`/`object` are single class/object URLs.
@@ -489,13 +575,14 @@ const DEFAULT_SOURCES_BY_TAG = dict({
 	th: dict({ background: PLAIN_SRC }),
 	track: dict({ src: PLAIN_SRC }),
 	video: dict({ poster: PLAIN_SRC, src: PLAIN_SRC }),
-	// SVG. Tag names match the tree builder's adjusted camelCase
-	// (`feImage`/`textPath`/`linearGradient`/`radialGradient`). `href`/
-	// `xlink:href` reference another element/resource; fragment-only `#id`
-	// values are left untouched, so only external `file.svg#id` is rewritten.
-	// `color-profile`'s `xlink:href` points at an external ICC profile file.
-	// `cursor`/`font-face-uri` point at an external image/font file; `altGlyph`/
-	// `glyphRef`/`tref` are legacy element references (removed in SVG 2).
+	// WHY: SVG. Tag names match the tree builder's adjusted camelCase
+	// (`feImage`/`textPath`/`linearGradient`/`radialGradient`). `href` and
+	// `xlink:href` reference another element or resource, and a fragment-only
+	// `#id` value is left untouched, so only an external `file.svg#id` is
+	// rewritten. `color-profile`'s `xlink:href` points at an external ICC profile
+	// file; `cursor` and `font-face-uri` at an external image or font file; and
+	// `altGlyph`, `glyphRef` and `tref` are legacy element references, removed in
+	// SVG 2.
 	altGlyph: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
 	"color-profile": dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
 	cursor: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
@@ -515,33 +602,30 @@ const DEFAULT_SOURCES_BY_TAG = dict({
 	// clip-path, …) are handled separately during the walk (`parseCssUrls`).
 });
 
-// SVG presentation attributes (`fill`, `stroke`, …) carry CSS `url(...)`
-// FuncIRIs; `parseCssUrls` extracts external refs as assets (internal
-// `url(#id)` is left untouched). They apply to every SVG-namespace element, so
-// the item is `namespace`-gated rather than placed in a tag bucket. The filter
-// is a cheap pre-check skipping the common plain values (`red`, `none`, `#fff`).
+// WHY: SVG presentation attributes (`fill`, `stroke`, …) carry CSS `url(...)`
+// FuncIRIs, whose external refs `parseCssUrls` extracts as assets, leaving an
+// internal `url(#id)` untouched. They apply to every SVG-namespace element, so
+// the item is `namespace`-gated rather than placed in a tag bucket, and the
+// filter is a cheap pre-check skipping the common plain values (`red`, `none`).
 /** @type {SourceItem} */
 const SVG_CSS_URL = {
 	type: "css-url",
 	filter: (attributes, value) => FUNC_IRI_URL_REGEXP.test(value),
-	namespace: NS_SVG
+	namespace: Flag.svg
 };
 
-// The global `style=""` attribute (a CSS declaration list), available on every
-// tag and even with `sources: false`. Like every `stylesheet-style*` source it
-// only emits when `experiments.css` is on (checked where the dependency is
-// created); the filter is a cheap pre-check skipping declarations without a
-// `url()`/`src()`/… .
+// The global `style=""` attribute, available on every tag and even under
+// `sources: false`. Like every `stylesheet-style*` source it only emits when
+// `experiments.css` is on, checked where the dependency is created.
 /** @type {SourceItem} */
 const STYLE_ATTRIBUTE = {
 	type: "stylesheet-style-attribute",
 	filter: (attributes, value) => STYLE_ATTR_URL_REGEXP.test(value)
 };
 
-// Any-tag sources — applied to every element as a fallback and folded into
-// each tag bucket, so the walk resolves one object per element and reads one
-// property per attribute. `DEFAULT` (svg presentation + style) is active
-// unless `sources: false`; only the always-on style attribute survives `false`.
+// Any-tag sources, folded into each tag bucket so the walk resolves one object
+// per element and one property per attribute. `sources: false` leaves only the
+// always-on style attribute.
 /** @type {Record<string, SourceItem>} */
 const DEFAULT_ANY_SOURCES = dict({ style: STYLE_ATTRIBUTE });
 for (const name of [
@@ -625,10 +709,9 @@ const styleContentFilter = (attrs) => {
 	return t === "" || t === "text/css";
 };
 
-// Element-body sources, independent of the `sources` option (even `sources:
-// false`): inline `<script>` bodies are always processed; the `<style>` body
-// only emits when `experiments.css` is on (checked where the dependency is
-// created, like every `stylesheet-style*` source).
+// Element-body sources, independent of the `sources` option: a `<script>` body
+// is always processed, while a `<style>` body only emits when `experiments.css`
+// is on, checked where the dependency is created.
 /** @type {Record<string, ContentSourceItem>} */
 const CONTENT_SOURCES = dict({
 	script: { type: scriptContentType, filter: scriptContentFilter },
@@ -649,11 +732,11 @@ class HtmlParser extends Parser {
 		this.template = options.template;
 		/** @type {import("../../declarations/WebpackOptions").UrlHintRule[] | undefined} */
 		this._urlHints = options.urlHints;
-		// `as` selects the parse mode — the HTML analog of the CSS parser's `as`.
-		// `"document"` (default) parses a full page; any other value is the
-		// context element whose inner HTML the source is parsed as (a fragment),
-		// so context-sensitive tags (`<tr>`, `<td>`, `<option>`, …) in a partial
-		// are kept, not dropped. `"template"` is the neutral generic fragment.
+		// `as` selects the parse mode: `"document"` parses a full page, any other
+		// value names the context element whose inner HTML this is, so that a
+		// partial's `<tr>`, `<td>` or `<option>` is kept rather than dropped.
+		/** @type {string | HtmlChunkNameFn | undefined} */
+		this._chunkName = options.chunkName;
 		/** @type {string | undefined} */
 		this.fragmentContext =
 			options.as === undefined || options.as === "document"
@@ -673,13 +756,9 @@ class HtmlParser extends Parser {
 			return;
 		}
 
-		// User array — `"..."` anywhere opts the per-tag defaults in as the
-		// base; the built-in any-tag sources (svg presentation + style) are
-		// always present. A user entry with no `tag` is an any-tag source (e.g.
-		// `{ attribute: "data-style", type: "stylesheet-style-attribute" }`).
-		// User entries override regardless of position. `dict()` keeps every
-		// table null-prototype (see its doc), and per-tag writes rebuild the
-		// bucket so the aliased default buckets stay intact.
+		// `"..."` anywhere opts the per-tag defaults in as the base, and a user
+		// entry with no `tag` is an any-tag source; user entries override wherever
+		// they sit. Per-tag writes rebuild the bucket, so the defaults stay intact.
 		/** @type {SourceTable} */
 		const byTag = sources.includes("...")
 			? dict(DEFAULT_SOURCES_BY_TAG)
@@ -804,27 +883,18 @@ class HtmlParser extends Parser {
 		const css = Boolean(compilation.options.experiments.css);
 		const urlHints = this._urlHints;
 
-		// Stable, per-HTML-module prefix used when generating entry names for
-		// script src / modulepreload references so they don't collide across
-		// HTML modules in the same compilation. We hash the module's resource
-		// path (a plain absolute path) — going through `contextify` against
-		// the compilation root keeps the hash machine-stable for the same
-		// project layout. Note: `module.identifier()` returns `html|<path>`
-		// for HTML modules, which doesn't start with `/`, so contextify would
-		// leave it absolute. `module.resource` is the bare path.
+		// An entry name starts with the page's own path, so two pages never claim
+		// one — from `resource`, since `identifier()` is `html|<path>`.
 		/** @type {string} */
-		const resource =
-			/** @type {EXPECTED_ANY} */ (module).resource || module.identifier();
-		const moduleHash = createHash(hashFunction || "md4")
-			.update(context ? contextify(context, resource) : resource)
-			.digest("hex")
-			.slice(0, 8);
+		const resource = module.resource || module.identifier();
+		const entryPrefix = entryNamePrefix(
+			context ? contextify(context, resource) : resource,
+			hashFunction
+		);
 
-		// `output.html` head injection: facts are collected during the walk and
-		// become presentational dependencies afterwards — no later asset pass has
-		// to re-parse the page. `data:` documents are skipped: synthetic entry
-		// wrappers already carry the tags and iframe srcdoc pages must stay
-		// untouched.
+		// `output.html` head injection collects facts during the walk and turns
+		// them into presentational dependencies after, so no later pass re-parses
+		// the page. `data:` documents are skipped — they already carry the tags.
 		const htmlOutputOptions =
 			compilation.options && compilation.options.output
 				? compilation.options.output.html
@@ -837,6 +907,72 @@ class HtmlParser extends Parser {
 			!resource.startsWith("data:")
 				? htmlOutputOptions
 				: undefined;
+		const chunkNameOption = this._chunkName;
+		/** @type {Set<string>} */
+		const claimedEntryNames = new Set();
+		/** @type {Set<string>} */
+		const requestedEntryNames = new Set();
+
+		/**
+		 * Claims `base`, counting up from the tag's own position while another tag
+		 * of this page holds it: one name would merge entries the document parts.
+		 * @param {string} base the name the tag asks for
+		 * @param {number} index the tag's position in the page
+		 * @returns {string} the name it claimed
+		 */
+		const claimEntryName = (base, index) => {
+			let claimed = base;
+			for (let suffix = index; claimedEntryNames.has(claimed); suffix++) {
+				claimed = `${base}-${suffix}`;
+			}
+			claimedEntryNames.add(claimed);
+			return claimed;
+		};
+
+		/**
+		 * The name a tag's extracted entry claims: what its own
+		 * `webpackChunkName` comment asked for, else what
+		 * `module.parser.html.chunkName` makes of it, else the page and the position.
+		 * @param {string | undefined} requested name from the tag's magic comment
+		 * @param {string} request the tag's request
+		 * @param {number} index the tag's position in the page
+		 * @param {HtmlChunkNameData["type"]} type what the tag is extracted as
+		 * @returns {string} an entry name no other tag of this page claims
+		 */
+		const entryNameFor = (requested, request, index, type) => {
+			let name = requested;
+			if (name === undefined && chunkNameOption !== undefined) {
+				const tagName = getRequestBaseName(request) || "";
+				name =
+					typeof chunkNameOption === "function"
+						? chunkNameOption({ page: entryPrefix, name: tagName, index, type })
+						: chunkNameOption.replace(
+								CHUNK_NAME_PLACEHOLDER_REGEXP,
+								(_, placeholder) => {
+									if (placeholder === "page") return entryPrefix;
+									if (placeholder === "name") return tagName;
+									if (placeholder === "index") return `${index}`;
+									return type;
+								}
+							);
+			}
+			if (typeof name !== "string" || name === "") {
+				return claimEntryName(`${entryPrefix}-${index}`, index);
+			}
+			const claimed = claimEntryName(name, index);
+			requestedEntryNames.add(claimed);
+			return claimed;
+		};
+
+		/**
+		 * The name a tag's file is emitted under when the page asked for one, so
+		 * a named chunk is not left to be called after the tag's url.
+		 * @param {string} entryName the entry name the tag claimed
+		 * @returns {string | undefined} the asked-for name, else undefined
+		 */
+		const requestedFileName = (entryName) =>
+			requestedEntryNames.has(entryName) ? entryName : undefined;
+
 		let doctypeEnd = -1;
 		let htmlTagEnd = -1;
 		// insertion offsets just inside the (possibly implicit) head
@@ -846,10 +982,9 @@ class HtmlParser extends Parser {
 		let inHead = false;
 		// `<template>` contents are inert
 		let headTemplateDepth = 0;
-		// Depth of open `<template>` elements anywhere in the tree. Template
-		// content is an inert, separate fragment per spec, so a `<base>` inside
-		// it must NOT set the document base (`headTemplateDepth` only covers
-		// templates seen while in `<head>`, so it can't guard body templates).
+		// Depth of open `<template>` elements anywhere in the tree: their content
+		// is an inert fragment, so a `<base>` inside one must not set the document
+		// base. `headTemplateDepth` covers only `<head>`, so it cannot guard this.
 		let templateDepth = 0;
 		let headHasTitle = false;
 		let headHasBase = false;
@@ -857,13 +992,9 @@ class HtmlParser extends Parser {
 		/** @type {Set<string> | undefined} */
 		let headMetaNames;
 
-		// Script src / modulepreload references are collected per-type
-		// during the walk; HtmlModulesPlugin later turns them into real
-		// entries. `script` and `script-module` entries are chained via a
-		// leader-only dependOn so they share a runtime.
-		// `<link rel="modulepreload">` entries are kept independent — they
-		// must preload without running, so they can never become a runtime
-		// leader that other entries would import.
+		// Collected per type during the walk; HtmlModulesPlugin turns them into
+		// entries. `script` and `script-module` chain through a leader-only
+		// dependOn; modulepreload stays independent, as it must not run.
 		/**
 		 * @typedef {object} HtmlEntryInfo
 		 * @property {string} request
@@ -871,6 +1002,7 @@ class HtmlParser extends Parser {
 		 * @property {number} index position in the document, across all groups — the order the emitted files are named in
 		 * @property {"script" | "script-module" | "modulepreload" | "stylesheet" | "html" | "preload" | "prefetch"} type
 		 * @property {boolean=} css entry emits a CSS chunk (`<link rel="preload" as="style">`), so it needs the CSS filename template
+		 * @property {string=} chunkName name the page asked this tag's chunk to claim, which names its file too
 		 */
 		/** @type {HtmlEntryInfo[]} */
 		const scriptEntries = [];
@@ -892,28 +1024,40 @@ class HtmlParser extends Parser {
 		/** @type {HtmlEntryInfo[]} */
 		const prefetchEntries = [];
 
-		// Offset of the first classic blocking script tag; injected stylesheet
-		// `<link>`s stay ahead of it. `defer`/`async`/module scripts don't
-		// anchor — they execute after parsing (and after pending stylesheets),
-		// so CSS may follow their tags (the order Vite emits).
+		// Offset of the first classic blocking script tag, which injected stylesheet
+		// `<link>`s stay ahead of. `defer`/`async`/module scripts do not anchor: they
+		// run after parsing and after pending stylesheets.
 		let firstBlockingScriptStart = -1;
 
 		let nextEntryIndex = 0;
-
-		// `<base href>` resolves the relative URLs that follow it. A relative base
-		// (`./assets/`) rewrites them into a subdirectory — still bundled; a
-		// root-relative or absolute base (`/`, `https://cdn/`) points them outside
-		// the build, so those URLs are left untouched. Resolved in the walk below
-		// from the first `<base href>` seen (`documentBase` undefined until then).
+		// One chunk per run of inline `<script>`: under module output every
+		// extracted tag is deferred, so only what executes between them matters.
+		/** @type {string | undefined} */
+		let inlineRunEntryName;
+		// Element offset of the run's last member — any other `<script>` ends it.
+		let inlineRunTag = -1;
+		// End offset of that member, for the gap a classic run may not span.
+		let inlineRunEnd = -1;
+		// How the run's tags are scheduled, which a member has to share.
+		/** @type {string | undefined} */
+		let inlineRunScheduling;
+		// The run's first tag, which carries the chunk and so the inline request.
+		/** @type {HtmlInlineScriptDependency | undefined} */
+		let inlineRunLeaderDependency;
+
+		// WHY: `<base href>` resolves the relative URLs that follow it. A relative base
+		// (`./assets/`) rewrites them into a subdirectory and they stay bundled; a
+		// root-relative or absolute one (`/`, `https://cdn/`) points outside the
+		// build, so those URLs are left untouched. Resolved in the walk below from
+		// the first `<base href>` seen, `documentBase` being undefined until then.
 		/** @type {string | undefined} */
 		let documentBase;
 		/** @type {string | undefined} */
 		let baseDir;
 		let baseIsExternal = false;
-		// Prepended to the emitted URLs' auto-public-path undo path so the base
-		// doesn't misdirect them: the browser resolves rewritten (relative)
-		// output URLs against the base dir, so one `../` per base segment cancels
-		// it. Undefined for absolute publicPath (no undo path is emitted).
+		// Prepended to the emitted URLs' auto-public-path undo path: the browser
+		// resolves them against the base dir, so one `../` per base segment cancels
+		// it. Undefined for an absolute publicPath, which emits no undo path.
 		/** @type {string | undefined} */
 		let baseUrlPrefix;
 
@@ -926,6 +1070,12 @@ class HtmlParser extends Parser {
 		let pendingWebpackIgnore;
 		/** @type {boolean | undefined} */
 		let pendingWebpackInline;
+		/**
+		 * The name the most recent comment asked the next tag's chunk to claim,
+		 * cleared the same way as the flags above.
+		 * @type {string | undefined}
+		 */
+		let pendingWebpackChunkName;
 		/**
 		 * Tracks the resource-hint values from the most recent `<!-- webpackPrefetch: … -->`
 		 * (etc.) comment so the next asset URL attribute picks them up.
@@ -936,16 +1086,16 @@ class HtmlParser extends Parser {
 		const magicCommentContext = this.magicCommentContext;
 
 		/**
-		 * @param {import("./syntax").HtmlPath} path walk path (used only for attribute-ref reads)
-		 * @param {import("./syntax").HtmlAttributeRef} typeAttr type attribute ref (0 = none)
+		 * @param {import("./syntax-parser").HtmlPath} path walk path (used only for attribute-ref reads)
+		 * @param {import("./syntax-parser").HtmlAttributeRef} typeAttr type attribute ref (0 = none)
 		 * @param {number} nameEnd end offset of the tag name
 		 * @param {string} type type of the script
 		 * @param {string} input source string
 		 */
 		const reconcileScriptTypeAttr = (path, typeAttr, nameEnd, type, input) => {
 			const valueStart =
-				typeAttr !== 0 ? path.attributeValueStart(typeAttr) : -1;
-			const valueEnd = typeAttr !== 0 ? path.attributeValueEnd(typeAttr) : -1;
+				typeAttr !== 0 ? path.startOf(Part.value, typeAttr) : -1;
+			const valueEnd = typeAttr !== 0 ? path.endOf(Part.value, typeAttr) : -1;
 			if (outputModule && type === "script") {
 				// Chunk is an ES module; upgrade the tag.
 				if (typeAttr !== 0 && valueStart !== -1) {
@@ -962,13 +1112,13 @@ class HtmlParser extends Parser {
 				// browser doesn't load it under module semantics.
 				let attrEnd;
 				if (valueStart === -1) {
-					attrEnd = path.attributeNameEnd(typeAttr);
+					attrEnd = path.endOf(Part.name, typeAttr);
 				} else if (input[valueEnd] === '"' || input[valueEnd] === "'") {
 					attrEnd = valueEnd + 1;
 				} else {
 					attrEnd = valueEnd;
 				}
-				let attrStart = path.attributeNameStart(typeAttr);
+				let attrStart = path.startOf(Part.name, typeAttr);
 				if (
 					attrStart > 0 &&
 					isAsciiWhitespace(input.charCodeAt(attrStart - 1))
@@ -1004,11 +1154,11 @@ class HtmlParser extends Parser {
 		 * Classifies the first `<base href>` seen in the walk, setting
 		 * `documentBase`/`baseDir`/`baseIsExternal`/`baseUrlPrefix` for the URLs
 		 * that follow it.
-		 * @param {import("./syntax").HtmlPath} path walk path (for attribute reads)
-		 * @param {import("./syntax").HtmlAttributeRef} hrefAttr the base's href attribute
+		 * @param {import("./syntax-parser").HtmlPath} path walk path (for attribute reads)
+		 * @param {import("./syntax-parser").HtmlAttributeRef} hrefAttr the base's href attribute
 		 */
 		const resolveDocumentBase = (path, hrefAttr) => {
-			documentBase = decodeEntities(path.attributeValue(hrefAttr), true).trim();
+			documentBase = path.value(hrefAttr).trim();
 			if (!documentBase) return;
 			if (
 				ABSOLUTE_URL_SCHEME_REGEXP.test(documentBase) ||
@@ -1017,10 +1167,9 @@ class HtmlParser extends Parser {
 				baseIsExternal = true;
 				return;
 			}
-			// Normalize the base path into its descending directory segments,
-			// resolving `.`/`..` like the URL spec. The final segment is the
-			// referenced file (dropped) unless the href ends with `/` or a
-			// dot-segment; `up` counts `..`s that climb above the document dir.
+			// Normalize the base path into descending directory segments, resolving
+			// `.`/`..` as the URL spec does. The final segment names a file and is
+			// dropped; `up` counts the `..`s climbing above the document dir.
 			const parts = documentBase.split("/");
 			/** @type {string[]} */
 			const dirs = [];
@@ -1048,7 +1197,7 @@ class HtmlParser extends Parser {
 
 		// Lazy decoded-attribute map for the current element — parse-scoped
 		// to avoid a closure and memo slot per element.
-		/** @type {import("./syntax").HtmlPath | undefined} */
+		/** @type {import("./syntax-parser").HtmlPath | undefined} */
 		let attrMapPath;
 		let attrMapCount = 0;
 		/** @type {Map<string, string> | undefined} */
@@ -1056,28 +1205,26 @@ class HtmlParser extends Parser {
 		const getAttributesMap = () => {
 			if (currentAttributesMap) return currentAttributesMap;
 			currentAttributesMap = new Map();
-			const path = /** @type {import("./syntax").HtmlPath} */ (attrMapPath);
+			const path = /** @type {import("./syntax-parser").HtmlPath} */ (
+				attrMapPath
+			);
 			for (let i = 0; i < attrMapCount; i++) {
-				const attr = path.attributeAt(i);
+				const attr = path.field(i, Field.attributes);
 				// Decoded values — filters and type resolvers compare what
 				// the browser sees (e.g. `rel="&#105;con"` means `icon`)
-				currentAttributesMap.set(
-					path.attributeName(attr),
-					decodeEntities(path.attributeValue(attr), true)
-				);
+				currentAttributesMap.set(path.name(attr), path.value(attr));
 			}
 			return currentAttributesMap;
 		};
 
 		// TODO implement full HTML parser (WASM)
-		// The walker descends into children (and `<template>` content) itself;
-		// the Element `exit` clears a pending `webpackIgnore` once an element's
-		// children are done (the old `walkChildren` behaviour).
+		// The walker descends into children and `<template>` content itself, and the
+		// Element `exit` clears a pending `webpackIgnore` once they are done.
 		new SourceProcessor()
 			.use({
 				[NodeType.Comment]: (path) => {
-					const start = path.start();
-					const end = path.end();
+					const start = path.start(path.node);
+					const end = path.end(path.node);
 					// comments count toward the head-end insertion anchor
 					if (inHead && headTemplateDepth === 0 && end > headLastEnd) {
 						headLastEnd = end;
@@ -1095,17 +1242,19 @@ class HtmlParser extends Parser {
 					) {
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
-					const value = path.data();
+					const value = path.value();
 					if (!webpackCommentRegExp.test(value)) {
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
-					/** @type {Record<string, EXPECTED_ANY>} */
+					/** @type {MagicCommentOptions} */
 					let options;
 					try {
 						options = parseMagicComment(value, magicCommentContext);
@@ -1125,18 +1274,21 @@ class HtmlParser extends Parser {
 						);
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
 					if (
 						options.webpackIgnore === undefined &&
 						options.webpackInline === undefined &&
+						options.webpackChunkName === undefined &&
 						options.webpackPrefetch === undefined &&
 						options.webpackPreload === undefined &&
 						options.webpackFetchPriority === undefined
 					) {
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
@@ -1157,6 +1309,7 @@ class HtmlParser extends Parser {
 						);
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
@@ -1177,11 +1330,35 @@ class HtmlParser extends Parser {
 						);
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
+						pendingHints = undefined;
+						return;
+					}
+					if (
+						options.webpackChunkName !== undefined &&
+						(typeof options.webpackChunkName !== "string" ||
+							options.webpackChunkName === "")
+					) {
+						const { line: sl, column: sc } = locConverter.get(start);
+						const { line: el, column: ec } = locConverter.get(end);
+						module.addWarning(
+							new (getUnsupportedFeatureWarning())(
+								`\`webpackChunkName\` expected a non-empty string, but received: ${options.webpackChunkName}.`,
+								{
+									start: { line: sl, column: sc },
+									end: { line: el, column: ec }
+								}
+							)
+						);
+						pendingWebpackIgnore = undefined;
+						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
 					pendingWebpackIgnore = options.webpackIgnore;
 					pendingWebpackInline = options.webpackInline;
+					pendingWebpackChunkName = options.webpackChunkName;
 					if (
 						options.webpackPrefetch !== undefined ||
 						options.webpackPreload !== undefined ||
@@ -1205,9 +1382,10 @@ class HtmlParser extends Parser {
 				},
 				[NodeType.Doctype]: (path) => {
 					// only visited when head injection is active (see `skip` below)
-					if (doctypeEnd === -1) doctypeEnd = path.end();
+					if (doctypeEnd === -1) doctypeEnd = path.end(path.node);
 					pendingWebpackIgnore = undefined;
 					pendingWebpackInline = undefined;
+					pendingWebpackChunkName = undefined;
 					pendingHints = undefined;
 				},
 				[NodeType.Element]: {
@@ -1217,24 +1395,25 @@ class HtmlParser extends Parser {
 					enter: (path) => {
 						const ignore = pendingWebpackIgnore === true;
 						const forceInline = pendingWebpackInline === true;
+						const chunkName = pendingWebpackChunkName;
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 
-						// `<head>` anchors are collected for every page — they place
-						// `inject: "head"` siblings and resource hints; the
-						// title/meta/base facts only when configured. Structural, so it
+						// `<head>` anchors are collected for every page, since they place
+						// `inject: "head"` siblings and resource hints. Structural, so this
 						// runs even for `webpackIgnore`d elements.
 						{
-							const name = path.tagName();
-							if (name === "template" && path.namespace() === NS_HTML) {
+							const name = path.name();
+							if (name === "template" && isHtmlElement(path)) {
 								templateDepth++;
 							}
 							if (headTemplateDepth > 0) {
-								if (name === "template" && path.namespace() === NS_HTML) {
+								if (name === "template" && isHtmlElement(path)) {
 									headTemplateDepth++;
 								}
 							} else if (inHead) {
-								if (headOptions !== undefined && path.namespace() === NS_HTML) {
+								if (headOptions !== undefined && isHtmlElement(path)) {
 									switch (name) {
 										case "title":
 											headHasTitle = true;
@@ -1243,50 +1422,48 @@ class HtmlParser extends Parser {
 											headHasBase = true;
 											break;
 										case "meta": {
-											if (path.findAttribute("charset") !== 0) {
-												headCharsetEnd = path.tagEnd();
+											if (path.fieldNamed(Field.attributes, "charset") !== 0) {
+												headCharsetEnd = path.startOf(Part.content, path.node);
 											} else {
-												const httpEquiv = path.findAttribute("http-equiv");
+												const httpEquiv = path.fieldNamed(
+													Field.attributes,
+													"http-equiv"
+												);
 												const contentAttr =
 													httpEquiv !== 0 &&
-													decodeEntities(
-														path.attributeValue(httpEquiv),
-														true
-													).toLowerCase() === "content-type"
-														? path.findAttribute("content")
+													path.value(httpEquiv).toLowerCase() === "content-type"
+														? path.fieldNamed(Field.attributes, "content")
 														: 0;
 												if (
 													contentAttr !== 0 &&
 													CHARSET_DECLARATION_REGEXP.test(
-														decodeEntities(
-															path.attributeValue(contentAttr),
-															true
-														)
+														path.value(contentAttr)
 													)
 												) {
-													headCharsetEnd = path.tagEnd();
+													headCharsetEnd = path.startOf(
+														Part.content,
+														path.node
+													);
 												}
 											}
-											const nameAttr = path.findAttribute("name");
-											const propertyAttr = path.findAttribute("property");
+											const nameAttr = path.fieldNamed(
+												Field.attributes,
+												"name"
+											);
+											const propertyAttr = path.fieldNamed(
+												Field.attributes,
+												"property"
+											);
 											if (nameAttr !== 0 || propertyAttr !== 0) {
 												if (headMetaNames === undefined) {
 													headMetaNames = new Set();
 												}
 												if (nameAttr !== 0) {
-													headMetaNames.add(
-														decodeEntities(
-															path.attributeValue(nameAttr),
-															true
-														).toLowerCase()
-													);
+													headMetaNames.add(path.value(nameAttr).toLowerCase());
 												}
 												if (propertyAttr !== 0) {
 													headMetaNames.add(
-														decodeEntities(
-															path.attributeValue(propertyAttr),
-															true
-														).toLowerCase()
+														path.value(propertyAttr).toLowerCase()
 													);
 												}
 											}
@@ -1296,23 +1473,22 @@ class HtmlParser extends Parser {
 											headTemplateDepth++;
 											break;
 									}
-								} else if (
-									name === "template" &&
-									path.namespace() === NS_HTML
-								) {
+								} else if (name === "template" && isHtmlElement(path)) {
 									headTemplateDepth++;
 								}
-								if (path.end() > headLastEnd) headLastEnd = path.end();
-							} else if (!headSeen && path.namespace() === NS_HTML) {
+								if (path.end(path.node) > headLastEnd) {
+									headLastEnd = path.end(path.node);
+								}
+							} else if (!headSeen && isHtmlElement(path)) {
 								if (name === "html") {
-									htmlTagEnd = path.tagEnd();
+									htmlTagEnd = path.startOf(Part.content, path.node);
 								} else if (name === "head") {
 									headSeen = true;
 									inHead = true;
 									// explicit head has real offsets; an implicit one (head
 									// tags are optional in HTML5) anchors after `<html>`,
 									// the doctype, or the document start
-									const tagEnd = path.tagEnd();
+									const tagEnd = path.startOf(Part.content, path.node);
 									headStart =
 										tagEnd > 0
 											? tagEnd
@@ -1327,14 +1503,21 @@ class HtmlParser extends Parser {
 						}
 
 						if (ignore) {
+							// It stays in the document and runs where it stands, so a run
+							// may not span it either.
+							if (path.name() === "script") {
+								inlineRunEntryName = undefined;
+								inlineRunLeaderDependency = undefined;
+								inlineRunScheduling = undefined;
+							}
 							return;
 						}
 
-						const elementName = path.tagName();
-						const attributeCount = path.attributeCount();
-						const elementStart = path.start();
-						const tagEnd = path.tagEnd();
-						const nameEnd = path.nameEnd();
+						const elementName = path.name();
+						const attributeCount = path.fieldCount(Field.attributes);
+						const elementStart = path.start(path.node);
+						const tagEnd = path.startOf(Part.content, path.node);
+						const nameEnd = path.endOf(Part.name, path.node);
 
 						// The first `<base href>` freezes the base for later URLs — but
 						// only one in the real document tree, not inside an inert
@@ -1343,9 +1526,9 @@ class HtmlParser extends Parser {
 							documentBase === undefined &&
 							templateDepth === 0 &&
 							elementName === "base" &&
-							path.namespace() === NS_HTML
+							isHtmlElement(path)
 						) {
-							const hrefAttr = path.findAttribute("href");
+							const hrefAttr = path.fieldNamed(Field.attributes, "href");
 							if (hrefAttr !== 0) resolveDocumentBase(path, hrefAttr);
 						}
 
@@ -1373,7 +1556,7 @@ class HtmlParser extends Parser {
 							let start;
 							/** @type {number} */
 							let end;
-							/** @type {import("./syntax").HtmlAttributeRef} */
+							/** @type {import("./syntax-parser").HtmlAttributeRef} */
 							let attr = 0;
 							if (content) {
 								if (!bodyItem) continue;
@@ -1383,7 +1566,7 @@ class HtmlParser extends Parser {
 								// `skip.text` drops the body `Text` node; the raw content
 								// span is [`tagEnd`, `contentEnd`] on the element.
 								const bodyStart = tagEnd;
-								const bodyEnd = path.contentEnd();
+								const bodyEnd = path.endOf(Part.content, path.node);
 								if (bodyEnd <= bodyStart) continue;
 								value = source.slice(bodyStart, bodyEnd);
 								if (value.trim() === "") continue;
@@ -1394,20 +1577,19 @@ class HtmlParser extends Parser {
 										? bodyItem.type(getAttributesMap(), css)
 										: bodyItem.type;
 							} else {
-								attr = path.attributeAt(i);
-								const item = sources[path.attributeName(attr)];
+								attr = path.field(i, Field.attributes);
+								const item = sources[path.name(attr)];
 								if (!item) continue;
 								if (
 									item.namespace !== undefined &&
-									path.namespace() !== item.namespace
+									!path.flag(item.namespace)
 								) {
 									continue;
 								}
 								// Adoption-agency clones carry no offsets; skip blank values.
-								if (path.attributeValueStart(attr) === -1) {
-									continue;
-								}
-								value = path.attributeValue(attr);
+								const valueStart = path.startOf(Part.value, attr);
+								if (valueStart === -1) continue;
+								value = path.source(valueStart, path.endOf(Part.value, attr));
 								if (!value || !/\S/.test(value)) continue;
 								const filter = item.filter;
 								if (filter) {
@@ -1418,8 +1600,8 @@ class HtmlParser extends Parser {
 										: value;
 									if (!filter(getAttributesMap(), decoded)) continue;
 								}
-								start = path.attributeValueStart(attr);
-								end = path.attributeValueEnd(attr);
+								start = valueStart;
+								end = path.endOf(Part.value, attr);
 								type =
 									typeof item.type === "function"
 										? item.type(getAttributesMap(), css)
@@ -1428,30 +1610,44 @@ class HtmlParser extends Parser {
 							// A resolved `type` selects the parse algorithm and the dependency
 							// kind — the only dispatch in the parser.
 							switch (type) {
-								// Inline CSS — a `<style>` body (raw, a full stylesheet) or an
+								// Inline CSS — a `<style>` body (a full stylesheet) or an
 								// attribute value (decoded, re-escaped on write-back; `*-attribute`
 								// is a declaration list). Needs `experiments.css`.
 								case "stylesheet-style":
 								case "stylesheet-style-attribute": {
 									if (!css) break;
-									const cssText = content ? value : decodeEntities(value, true);
+									// WHY: an HTML `<style>` body is raw text, so its source is its
+									// text. The same element in a foreign subtree holds character
+									// data, where `&#x2e;a` is the selector `.a` — so the sheet has
+									// to be decoded going in and escaped coming back out, which is
+									// what `characterData` tells the write-back.
+									const characterData = content && !isHtmlElement(path);
+									// A page webpack emitted is one it can be pointed at again,
+									// where a sheet arrives headed by the module the last build
+									// read it as. That header was that build's; this writes its own.
+									const cssText = ModuleInfoHeaderPlugin.stripHeaders(
+										content
+											? characterData
+												? decodeEntities(value, false)
+												: value
+											: decodeEntities(value, true)
+									);
 									if (cssText.trim() === "") break;
 									const dep = new HtmlInlineStyleDependency(
 										dataUri("text/css", cssText),
 										[start, end],
 										content ? false : type === "stylesheet-style-attribute",
-										!content
+										!content,
+										characterData
 									);
 									setLoc(dep, start, end);
 									module.addDependency(dep);
 									module.addCodeGenerationDependency(dep);
 									break;
 								}
-								// `<iframe srcdoc>`: an entity-encoded HTML document. Feed the
-								// decoded markup back through the HTML pipeline as a nested
-								// `data:text/html` module. Per spec the value is a full document
-								// whose URL is `about:srcdoc`, so its base URL is inherited from
-								// this document — asset URLs resolve against this file's context.
+								// `<iframe srcdoc>` is an entity-encoded document, fed back through
+								// the pipeline as a nested `data:text/html` module. Its URL is
+								// `about:srcdoc`, so asset URLs resolve against this file.
 								case "srcdoc": {
 									const htmlText = decodeEntities(value, true);
 									// Only spin up a nested module when there is markup that can
@@ -1478,25 +1674,101 @@ class HtmlParser extends Parser {
 									if (content) {
 										const scriptType =
 											/** @type {"script" | "script-module"} */ (type);
-										const request = dataUri("text/javascript", value);
+										// WHY: an HTML `<script>` body is raw text, so its source
+										// is its text. The same element in a foreign subtree holds
+										// character data, where a character reference stands for
+										// what it names — `1 &lt; 2` is `1 < 2` there, but reads
+										// as `1 & lt < 2` when taken as written. Character data
+										// also decodes `&copy=1`, which an attribute keeps whole.
+										const scriptText = isHtmlElement(path)
+											? value
+											: decodeEntities(value, false);
+										const request = dataUri("text/javascript", scriptText);
 										const index = nextEntryIndex++;
-										const entryName = `__html_${moduleHash}_${index}`;
+										// Module output upgrades a classic tag, so every extracted
+										// tag defers; without it the authored kind parts the run.
+										const scheduling = outputModule ? "deferred" : scriptType;
+										// `async` fires whenever it loads and a `<template>` body never
+										// does, so neither joins — and only a deferred run spans markup.
+										const joinsRun =
+											templateDepth === 0 &&
+											path.fieldNamed(Field.attributes, "async") === 0 &&
+											(outputModule ||
+												inlineRunEntryName === undefined ||
+												isEmptyRunGap(source, inlineRunEnd, elementStart));
+										/** @type {Range | undefined} */
+										let removeRange;
+										/** @type {string} */
+										let entryName;
+										if (joinsRun) {
+											// A tag the page named leads a run of its own rather than
+											// joining one, so the name covers what follows it.
+											if (
+												chunkName !== undefined ||
+												inlineRunEntryName === undefined ||
+												inlineRunScheduling !== scheduling
+											) {
+												entryName = entryNameFor(
+													chunkName,
+													request,
+													index,
+													scriptType
+												);
+												inlineRunEntryName = entryName;
+												inlineRunScheduling = scheduling;
+											} else {
+												entryName = inlineRunEntryName;
+												// The body rides in the run's chunk already, so the
+												// element goes rather than gaining a `src`.
+												removeRange = [
+													elementStart,
+													rawTextElementEnd(source, end)
+												];
+											}
+											inlineRunTag = elementStart;
+											inlineRunEnd = rawTextElementEnd(source, end);
+										} else {
+											entryName = entryNameFor(
+												chunkName,
+												request,
+												index,
+												scriptType
+											);
+										}
 										const dep = new HtmlInlineScriptDependency(
 											request,
 											nameEnd,
 											[start, end],
 											entryName,
-											scriptType === "script-module" ? "esm" : "commonjs"
+											scriptType === "script-module" ? "esm" : "commonjs",
+											removeRange,
+											forceInline
 										);
+										if (joinsRun) {
+											if (removeRange === undefined) {
+												inlineRunLeaderDependency = dep;
+											} else if (
+												forceInline &&
+												inlineRunLeaderDependency !== undefined
+											) {
+												// A run is one chunk, so a tag asking to be written
+												// into the page asks it of the whole run.
+												inlineRunLeaderDependency.forceInline = true;
+											}
+										}
 										setLoc(dep, start, end);
 										module.addPresentationalDependency(dep);
-										reconcileScriptTypeAttr(
-											path,
-											path.findAttribute("type"),
-											nameEnd,
-											scriptType,
-											source
-										);
+										// A dropped tag is not rewritten: an edit inside the
+										// removed range would survive it as loose text.
+										if (removeRange === undefined) {
+											reconcileScriptTypeAttr(
+												path,
+												path.fieldNamed(Field.attributes, "type"),
+												nameEnd,
+												scriptType,
+												source
+											);
+										}
 										(scriptType === "script"
 											? scriptEntries
 											: scriptModuleEntries
@@ -1504,7 +1776,8 @@ class HtmlParser extends Parser {
 											request,
 											entryName,
 											index,
-											type: scriptType
+											type: scriptType,
+											chunkName: requestedFileName(entryName)
 										});
 										break;
 									}
@@ -1547,7 +1820,7 @@ class HtmlParser extends Parser {
 											new (getModuleDependencyError())(
 												module,
 												new WebpackError(
-													`Bad value for attribute "${path.attributeName(
+													`Bad value for attribute "${path.name(
 														attr
 													)}" on element "${elementName}": ${
 														/** @type {Error} */ (err).message
@@ -1579,13 +1852,17 @@ class HtmlParser extends Parser {
 										}
 										const s = start + (map ? map[us] : us);
 										const e = start + (map ? map[ue] : ue);
-										// `html` links the URL as its own emitted page: the same
-										// `HtmlEntryDependency` as `<script src>` / `<link>`, but the `html`
-										// kind rewrites to the page's filename and emits no sibling tags.
-										// Recorded as an independent entry (no `dependOn`), like an entry point.
+										// `html` links the URL as its own emitted page: the same dependency
+										// as `<script src>`, but rewriting to the page's filename and
+										// emitting no siblings. Independent, like an entry point.
 										if (type === "html") {
 											const index = nextEntryIndex++;
-											const entryName = `__html_${moduleHash}_${index}`;
+											const entryName = entryNameFor(
+												chunkName,
+												request,
+												index,
+												"html"
+											);
 											const dep = new HtmlEntryDependency(
 												request,
 												[s, e],
@@ -1595,24 +1872,33 @@ class HtmlParser extends Parser {
 											);
 											setLoc(dep, s, e);
 											module.addPresentationalDependency(dep);
-											htmlLinkEntries.push({ request, entryName, index, type });
+											htmlLinkEntries.push({
+												request,
+												entryName,
+												index,
+												type,
+												chunkName: requestedFileName(entryName)
+											});
 											continue;
 										}
-										// `rel="preload"/"prefetch"` of a bundled resource: an
-										// independent, non-executing entry whose `href` is rewritten to
-										// the built chunk's URL (CSS for `as="style"`, JS otherwise). No
-										// sibling tags — a resource hint references exactly one URL.
+										// `rel="preload"/"prefetch"` of a bundled resource: an independent,
+										// non-executing entry rewritten to the built chunk's URL. No
+										// siblings — a resource hint references exactly one URL.
 										if (type === "preload" || type === "prefetch") {
 											const as = getAttributeValue(getAttributesMap(), "as");
 											const asStyle = as
 												? as.trim().toLowerCase() === "style"
 												: false;
 											const index = nextEntryIndex++;
-											const entryName = `__html_${moduleHash}_${index}`;
-											// Tag metadata so the template can mirror `crossorigin`/
-											// `integrity` onto a native `preload` `<link>` (integrity-
-											// eligible per the SRI spec). `prefetch` gets none — the spec
-											// doesn't list it — so its `integrity` is left uncaptured.
+											const entryName = entryNameFor(
+												chunkName,
+												request,
+												index,
+												type
+											);
+											// Tag metadata letting the template mirror `crossorigin` and
+											// `integrity` onto a native `preload` `<link>`. `prefetch` is not
+											// integrity-eligible per the SRI spec, so its is left uncaptured.
 											const isNativeLink = elementName === "link";
 											const dep = new HtmlEntryDependency(
 												request,
@@ -1625,7 +1911,9 @@ class HtmlParser extends Parser {
 												isNativeLink,
 												"",
 												nameEnd,
-												isNativeLink && path.findAttribute("crossorigin") !== 0,
+												isNativeLink &&
+													path.fieldNamed(Field.attributes, "crossorigin") !==
+														0,
 												-1,
 												type === "preload" && isNativeLink
 													? captureIntegrityRange(path, source, elementStart)
@@ -1642,7 +1930,8 @@ class HtmlParser extends Parser {
 												entryName,
 												index,
 												type,
-												css: asStyle
+												css: asStyle,
+												chunkName: requestedFileName(entryName)
 											});
 											continue;
 										}
@@ -1656,7 +1945,12 @@ class HtmlParser extends Parser {
 											type === "stylesheet"
 										) {
 											const index = nextEntryIndex++;
-											const entryName = `__html_${moduleHash}_${index}`;
+											const entryName = entryNameFor(
+												chunkName,
+												request,
+												index,
+												type
+											);
 											const willBeModuleScript =
 												type === "script-module" ||
 												(outputModule && type === "script");
@@ -1687,7 +1981,10 @@ class HtmlParser extends Parser {
 											let hasOwnCrossOrigin = false;
 											if (elementStart >= 0) {
 												for (const copyableName of COPYABLE_SIBLING_ATTRS) {
-													const copyableAttr = path.findAttribute(copyableName);
+													const copyableAttr = path.fieldNamed(
+														Field.attributes,
+														copyableName
+													);
 													if (copyableAttr !== 0) {
 														copyableAttrsText += attrSourceSpan(
 															path,
@@ -1700,28 +1997,22 @@ class HtmlParser extends Parser {
 													}
 												}
 											}
-											// Blocking-ness of the tag as *emitted*:
-											// `reconcileScriptTypeAttr` upgrades every script entry
-											// to `type="module"` under `output.module` and strips an
-											// authored `type="module"` otherwise — so only non-module
-											// output without `defer`/`async` blocks. Non-native
-											// elements anchor conservatively (their synthesized
-											// siblings may be plain blocking `<script>`s).
+											// Blocking-ness of the tag as emitted, not as authored:
+											// `reconcileScriptTypeAttr` decides the final `type`, so only
+											// non-module output without `defer`/`async` blocks.
 											if (
 												firstBlockingScriptStart === -1 &&
 												(type === "script" || type === "script-module") &&
 												!outputModule &&
 												(elementName !== nativeTag ||
-													(path.findAttribute("defer") === 0 &&
-														path.findAttribute("async") === 0))
+													(path.fieldNamed(Field.attributes, "defer") === 0 &&
+														path.fieldNamed(Field.attributes, "async") === 0))
 											) {
 												firstBlockingScriptStart = elementStart;
 											}
-											// Sibling-clone attribute edits, captured from the parsed
-											// attributes (offsets relative to the tag) so the template
-											// needn't re-parse the tag text: `integrity` is dropped
-											// (content-specific) and `script-module` clones are forced
-											// to `type="module"` (its value range, else inserted).
+											// Sibling-clone attribute edits, captured as offsets relative to
+											// the tag so the template need not re-parse it: `integrity` is
+											// content-specific and dropped, `script-module` forces `type`.
 											const integrityRange =
 												elementStart >= 0 && elementName === nativeTag
 													? captureIntegrityRange(path, source, elementStart)
@@ -1733,14 +2024,17 @@ class HtmlParser extends Parser {
 												elementName === nativeTag &&
 												elementKind === "script-module"
 											) {
-												const typeAttr = path.findAttribute("type");
+												const typeAttr = path.fieldNamed(
+													Field.attributes,
+													"type"
+												);
 												if (
 													typeAttr !== 0 &&
-													path.attributeValueStart(typeAttr) >= 0
+													path.startOf(Part.value, typeAttr) >= 0
 												) {
 													typeValueRange = [
-														path.attributeValueStart(typeAttr) - elementStart,
-														path.attributeValueEnd(typeAttr) - elementStart
+														path.startOf(Part.value, typeAttr) - elementStart,
+														path.endOf(Part.value, typeAttr) - elementStart
 													];
 												}
 											}
@@ -1771,7 +2065,7 @@ class HtmlParser extends Parser {
 											) {
 												reconcileScriptTypeAttr(
 													path,
-													path.findAttribute("type"),
+													path.fieldNamed(Field.attributes, "type"),
 													nameEnd,
 													type,
 													source
@@ -1784,7 +2078,13 @@ class HtmlParser extends Parser {
 													: type === "stylesheet"
 														? stylesheetEntries
 														: modulePreloadEntries
-											).push({ request, entryName, index, type });
+											).push({
+												request,
+												entryName,
+												index,
+												type,
+												chunkName: requestedFileName(entryName)
+											});
 										} else {
 											const dep = new HtmlSourceDependency(request, [s, e]);
 											ResourceHintPlugin.applyDefaults(
@@ -1806,10 +2106,17 @@ class HtmlParser extends Parser {
 								}
 							}
 						}
+						// A `<script>` that joined no run ends the open one: the chunk runs
+						// where its first tag stands, so nothing may execute in between.
+						if (elementName === "script" && inlineRunTag !== elementStart) {
+							inlineRunEntryName = undefined;
+							inlineRunLeaderDependency = undefined;
+							inlineRunScheduling = undefined;
+						}
 					},
 					exit: (path) => {
-						if (path.namespace() === NS_HTML) {
-							const name = path.tagName();
+						if (isHtmlElement(path)) {
+							const name = path.name();
 							if (name === "template") {
 								if (templateDepth > 0) templateDepth--;
 								if (headTemplateDepth > 0) headTemplateDepth--;
@@ -1819,14 +2126,14 @@ class HtmlParser extends Parser {
 						}
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 					}
 				}
 			})
-			// Skip AST output this walk never reads: `text` (script/style bodies are
-			// read by offset via `contentEnd`) and `doctype` — unless head injection
-			// needs the doctype as an insertion anchor; keep `comments` for
-			// magic comments (`webpackIgnore`).
+			// Skip AST output this walk never reads: `text`, since script and style
+			// bodies are read by offset, and `doctype` unless head injection needs it
+			// as an anchor. `comments` stays, for `webpackIgnore`.
 			.process(source, {
 				fragmentContext: this.fragmentContext,
 				skip: { text: true, doctype: headOptions === undefined }
@@ -1881,13 +2188,12 @@ class HtmlParser extends Parser {
 		const buildInfo = /** @type {HtmlModuleBuildInfo} */ (module.buildInfo);
 		buildInfo.strict = true;
 		if (baseUrlPrefix !== undefined) buildInfo.baseUrlPrefix = baseUrlPrefix;
-		// Hand off the collected entries to HtmlModulesPlugin; it creates the
-		// real compilation entries during the finishMake hook. The `script`
-		// and `script-module` groups are chained via a leader-only dependOn
-		// so they share a runtime; `modulepreload` and `stylesheet` entries
-		// are emitted as independent entries since `<link rel=modulepreload>`
-		// must preload without running and stylesheets have no runtime. `html`
-		// links are independent page entries too.
+		// WHY: hand the collected entries to HtmlModulesPlugin, which creates the
+		// real compilation entries during the finishMake hook. The `script` and
+		// `script-module` groups chain through a leader-only `dependOn` so they share
+		// a runtime, while `modulepreload` and `stylesheet` entries are independent:
+		// `<link rel=modulepreload>` must preload without running, and a stylesheet
+		// has no runtime. `html` links are independent page entries too.
 		if (
 			scriptEntries.length > 0 ||
 			scriptModuleEntries.length > 0 ||