@depup/webpack 5.111.1-depup.1 → 5.112.0-depup.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()` /
@@ -105,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);
@@ -115,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
@@ -348,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 */
@@ -364,8 +454,9 @@ 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);
 
@@ -520,7 +611,7 @@ const DEFAULT_SOURCES_BY_TAG = dict({
 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, available on every tag and even under
@@ -644,6 +735,8 @@ class HtmlParser extends Parser {
 		// `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"
@@ -790,16 +883,14 @@ class HtmlParser extends Parser {
 		const css = Boolean(compilation.options.experiments.css);
 		const urlHints = this._urlHints;
 
-		// Per-module prefix keeping generated entry names from colliding across the
-		// HTML modules of one compilation. It hashes `module.resource` rather than
-		// `identifier()`, whose `html|` prefix `contextify` would leave absolute.
+		// 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 collects facts during the walk and turns
 		// them into presentational dependencies after, so no later pass re-parses
@@ -816,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
@@ -845,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 = [];
@@ -872,6 +1030,20 @@ class HtmlParser extends Parser {
 		let firstBlockingScriptStart = -1;
 
 		let nextEntryIndex = 0;
+		// 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
@@ -898,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.
@@ -908,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) {
@@ -934,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))
@@ -976,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) ||
@@ -1019,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} */
@@ -1027,15 +1205,14 @@ 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;
 		};
@@ -1046,8 +1223,8 @@ class HtmlParser extends Parser {
 		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;
@@ -1065,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);
@@ -1095,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;
 					}
@@ -1127,6 +1309,7 @@ class HtmlParser extends Parser {
 						);
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 						return;
 					}
@@ -1147,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 ||
@@ -1175,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]: {
@@ -1187,23 +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, 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;
@@ -1212,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()
 													);
 												}
 											}
@@ -1265,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
@@ -1296,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
@@ -1312,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);
 						}
 
@@ -1342,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;
@@ -1352,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;
@@ -1363,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) {
@@ -1387,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)
@@ -1397,19 +1610,35 @@ 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);
@@ -1445,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
@@ -1471,7 +1776,8 @@ class HtmlParser extends Parser {
 											request,
 											entryName,
 											index,
-											type: scriptType
+											type: scriptType,
+											chunkName: requestedFileName(entryName)
 										});
 										break;
 									}
@@ -1514,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
@@ -1551,7 +1857,12 @@ class HtmlParser extends Parser {
 										// 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],
@@ -1561,7 +1872,13 @@ 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,
@@ -1573,7 +1890,12 @@ class HtmlParser extends Parser {
 												? as.trim().toLowerCase() === "style"
 												: false;
 											const index = nextEntryIndex++;
-											const entryName = `__html_${moduleHash}_${index}`;
+											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.
@@ -1589,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)
@@ -1606,7 +1930,8 @@ class HtmlParser extends Parser {
 												entryName,
 												index,
 												type,
-												css: asStyle
+												css: asStyle,
+												chunkName: requestedFileName(entryName)
 											});
 											continue;
 										}
@@ -1620,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");
@@ -1651,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,
@@ -1672,8 +2005,8 @@ class HtmlParser extends Parser {
 												(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;
 											}
@@ -1691,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
 													];
 												}
 											}
@@ -1729,7 +2065,7 @@ class HtmlParser extends Parser {
 											) {
 												reconcileScriptTypeAttr(
 													path,
-													path.findAttribute("type"),
+													path.fieldNamed(Field.attributes, "type"),
 													nameEnd,
 													type,
 													source
@@ -1742,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(
@@ -1764,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--;
@@ -1777,6 +2126,7 @@ class HtmlParser extends Parser {
 						}
 						pendingWebpackIgnore = undefined;
 						pendingWebpackInline = undefined;
+						pendingWebpackChunkName = undefined;
 						pendingHints = undefined;
 					}
 				}