webpack 5.107.2 → 5.108.0

package/lib/html/HtmlModulesPlugin.js

@@ -5,27 +5,73 @@
 "use strict";
 
 const { RawSource } = require("webpack-sources");
+const EntryOptionPlugin = require("../EntryOptionPlugin");
 const EntryPlugin = require("../EntryPlugin");
 const HotUpdateChunk = require("../HotUpdateChunk");
 const { HTML_TYPE } = require("../ModuleSourceTypeConstants");
 const { HTML_MODULE_TYPE } = require("../ModuleTypeConstants");
 const NormalModule = require("../NormalModule");
 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 HtmlScriptSrcDependency = require("../dependencies/HtmlScriptSrcDependency");
 const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
+const WebpackError = require("../errors/WebpackError");
 const { compareModulesByFullName } = require("../util/comparators");
+const createHash = require("../util/createHash");
+const { digestNonNumericOnly } = require("../util/nonNumericOnlyHash");
 const removeBOM = require("../util/removeBOM");
 const HtmlGenerator = require("./HtmlGenerator");
+const HtmlModule = require("./HtmlModule");
 const HtmlParser = require("./HtmlParser");
 
+/** @typedef {import("../../declarations/WebpackOptions").EntryDescriptionNormalized} EntryDescriptionNormalized */
 /** @typedef {import("../Compiler")} Compiler */
-/** @typedef {{ request: string, entryName: string, kind: "classic" | "esm-script" | "modulepreload" | "stylesheet" }} EntryScriptInfo */
+/** @typedef {import("./HtmlModule").HtmlModuleBuildInfo} HtmlModuleBuildInfo */
+/** @typedef {{ request: string, entryName: string, type: "script" | "script-module" | "modulepreload" | "stylesheet" }} EntryScriptInfo */
 
 const PLUGIN_NAME = "HtmlModulesPlugin";
 
+// `\.html`/`\.css` request matchers for the synthetic `output.html` wrapper.
+const HTML_REQUEST_RE = /\.html(\?|$)/i;
+const CSS_REQUEST_RE = /\.css(\?|$)/i;
+
+/**
+ * Requests an `output.html` page must load for an entry: its `dependOn`
+ * ancestors first (transitive, deduped — so a diamond loads each once), then
+ * the entry's own imports. `.html` imports are dropped (own HTML entries).
+ * @param {string} name entry name
+ * @param {Record<string, EntryDescriptionNormalized>} entries normalized static entries
+ * @returns {string[]} deduped requests in load order
+ */
+const collectHtmlEntryRequests = (name, entries) => {
+	/** @type {string[]} */
+	const requests = [];
+	/** @type {Set<string>} */
+	const seenRequests = new Set();
+	/** @type {Set<string>} */
+	const visited = new Set();
+	const walk = (/** @type {string} */ entryName) => {
+		if (visited.has(entryName)) return;
+		visited.add(entryName);
+		const desc = entries[entryName];
+		if (!desc) return;
+		if (desc.dependOn) {
+			for (const dep of desc.dependOn) walk(dep);
+		}
+		if (!desc.import) return;
+		for (const request of desc.import) {
+			if (HTML_REQUEST_RE.test(request) || seenRequests.has(request)) continue;
+			seenRequests.add(request);
+			requests.push(request);
+		}
+	};
+	walk(name);
+	return requests;
+};
+
 /**
  * @param {string} name definition name in `schemas/WebpackOptions.json`
  * @returns {EXPECTED_OBJECT} a schema referencing `#/definitions/<name>`
@@ -44,6 +90,11 @@ const generatorValidationOptions = {
 	baseDataPath: "generator"
 };
 
+const parserValidationOptions = {
+	name: "Html Modules Plugin",
+	baseDataPath: "parser"
+};
+
 class HtmlModulesPlugin {
 	/**
 	 * `output.hashFunction`/`hashSalt`/`hashDigest`/`hashDigestLength`
@@ -54,19 +105,15 @@ class HtmlModulesPlugin {
 	 * @returns {string} content hash
 	 */
 	static computeContentHash(content, outputOptions) {
-		const createHash = require("../util/createHash");
-		const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
-
 		const hash = createHash(
 			/** @type {import("../../declarations/WebpackOptions").HashFunction} */
 			(outputOptions.hashFunction)
 		);
 		if (outputOptions.hashSalt) hash.update(outputOptions.hashSalt);
 		hash.update(content);
-		return nonNumericOnlyHash(
-			/** @type {string} */ (
-				hash.digest(/** @type {string} */ (outputOptions.hashDigest))
-			),
+		return digestNonNumericOnly(
+			hash,
+			/** @type {string} */ (outputOptions.hashDigest),
 			/** @type {number} */ (outputOptions.hashDigestLength)
 		);
 	}
@@ -77,14 +124,75 @@ class HtmlModulesPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
+		const { output } = compiler.options;
+		const htmlOption = output.html;
+		const scriptLoading =
+			(typeof htmlOption === "object" && htmlOption.scriptLoading) || "auto";
+		// ESM output emits `type="module"` (already deferred), so scriptLoading
+		// is ignored under output.module — warn on an explicit defer/blocking.
+		let scriptAttr = " defer";
+		if (output.module) {
+			scriptAttr = "";
+			if (scriptLoading === "defer" || scriptLoading === "blocking") {
+				compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+					compilation.warnings.push(
+						new WebpackError(
+							`output.html.scriptLoading: "${scriptLoading}" is ignored with output.module — ES module scripts are always deferred.`
+						)
+					);
+				});
+			}
+		} else if (scriptLoading === "blocking") {
+			scriptAttr = "";
+		}
+
+		// `output.html` (or an entry's `html`) wraps a non-HTML entry in a
+		// synthetic HTML module so the existing pipeline injects its JS/CSS
+		// chunks and applies the `template` option. `dependOn` ancestors are
+		// injected first so the page loads the shared/runtime chunks before
+		// the entry's own (see `collectHtmlEntryRequests`). `crossOriginLoading`
+		// and SRI are applied to the injected tags centrally in
+		// HtmlEntryDependency.
+		EntryOptionPlugin.getHooks(compiler).entry.tap(
+			PLUGIN_NAME,
+			(context, name, desc) => {
+				const html = desc.html !== undefined ? desc.html : htmlOption;
+				const imports = desc.import;
+				if (
+					!html ||
+					!imports ||
+					imports.every((r) => HTML_REQUEST_RE.test(r))
+				) {
+					return;
+				}
+				const entries = compiler.options.entry;
+				const requests =
+					typeof entries === "object" && entries[name]
+						? collectHtmlEntryRequests(name, entries)
+						: imports.filter((r) => !HTML_REQUEST_RE.test(r));
+				const links = [];
+				const scripts = [];
+				for (const r of requests) {
+					if (CSS_REQUEST_RE.test(r)) {
+						links.push(`<link rel="stylesheet" href="${r}">`);
+					} else {
+						scripts.push(`<script${scriptAttr} src="${r}"></script>`);
+					}
+				}
+				return `data:text/html,<!doctype html><html><head>${links.join(
+					""
+				)}</head><body>${scripts.join("")}</body></html>`;
+			}
+		);
+
 		// Per-chunk `RawSource` reused across builds when bytes are unchanged:
 		// keeping identity stable avoids invalidating `RealContentHashPlugin|analyse`.
 		/** @type {Map<string, { content: string, source: import("webpack-sources").RawSource }>} */
 		const sentinelResolvedSourceCache = new Map();
 
 		// `<script src>` and `<link rel="modulepreload">` references collected
-		// by HtmlParser become real compilation entries here. The classic
-		// and esm-script groups are chained via a leader-only dependOn so
+		// by HtmlParser become real compilation entries here. The `script`
+		// and `script-module` groups are chained via a leader-only dependOn so
 		// they share a runtime — the first entry of the group owns it and
 		// every subsequent entry sets `dependOn: [leader]`. Modulepreload
 		// entries are emitted as independent entries (no dependOn) so they
@@ -102,17 +210,16 @@ class HtmlModulesPlugin {
 
 			for (const module of compilation.modules) {
 				if (module.type !== HTML_MODULE_TYPE) continue;
-				const buildInfo = module.buildInfo;
-				const htmlEntryScripts =
-					buildInfo &&
-					/** @type {Record<string, EntryScriptInfo[]> | undefined} */
-					(buildInfo.htmlEntryScripts);
+				const buildInfo = /** @type {HtmlModuleBuildInfo | undefined} */ (
+					module.buildInfo
+				);
+				const htmlEntryScripts = buildInfo && buildInfo.htmlEntryScripts;
 				if (!htmlEntryScripts) continue;
 
 				const context = /** @type {string} */ (module.context);
 
 				for (const [groupKind, group] of Object.entries(htmlEntryScripts)) {
-					// Only the script chains (`classic`, `esm-script`) need a
+					// Only the script chains (`script`, `script-module`) need a
 					// shared runtime via leader-only `dependOn` — the others
 					// either preload without executing (`modulepreload`) or
 					// produce CSS chunks (`stylesheet`) which have no runtime
@@ -214,12 +321,12 @@ class HtmlModulesPlugin {
 					new HtmlSourceDependency.Template()
 				);
 				compilation.dependencyFactories.set(
-					HtmlScriptSrcDependency,
+					HtmlEntryDependency,
 					normalModuleFactory
 				);
 				compilation.dependencyTemplates.set(
-					HtmlScriptSrcDependency,
-					new HtmlScriptSrcDependency.Template()
+					HtmlEntryDependency,
+					new HtmlEntryDependency.Template()
 				);
 				// Inline `<script>` content is bundled as its own entry — the
 				// same pipeline that handles `<script src>` — via a
@@ -246,6 +353,17 @@ class HtmlModulesPlugin {
 					HtmlInlineStyleDependency,
 					new HtmlInlineStyleDependency.Template()
 				);
+				// `<iframe srcdoc>` content is routed back through the HTML
+				// pipeline as a `data:text/html` module; the template reads the
+				// processed HTML from the nested module's `html` channel.
+				compilation.dependencyFactories.set(
+					HtmlInlineHtmlDependency,
+					normalModuleFactory
+				);
+				compilation.dependencyTemplates.set(
+					HtmlInlineHtmlDependency,
+					new HtmlInlineHtmlDependency.Template()
+				);
 				compilation.dependencyTemplates.set(
 					StaticExportsDependency,
 					new StaticExportsDependency.Template()
@@ -258,21 +376,26 @@ class HtmlModulesPlugin {
 					ConstDependency,
 					new ConstDependency.Template()
 				);
-				const cssEnabled = Boolean(
-					compiler.options.experiments && compiler.options.experiments.css
-				);
-				normalModuleFactory.hooks.createParser
+				normalModuleFactory.hooks.createModuleClass
 					.for(HTML_MODULE_TYPE)
 					.tap(
 						PLUGIN_NAME,
-						() =>
-							new HtmlParser(
-								compilation.outputOptions.hashFunction,
-								compiler.context,
-								compilation.outputOptions.module,
-								cssEnabled
-							)
+						(createData, _resolveData) => new HtmlModule(createData)
 					);
+				normalModuleFactory.hooks.createParser
+					.for(HTML_MODULE_TYPE)
+					.tap(PLUGIN_NAME, (parserOptions) => {
+						compiler.validate(
+							() => getSchema("HtmlParserOptions"),
+							parserOptions,
+							parserValidationOptions,
+							(options) =>
+								require("../../schemas/plugins/HtmlParserOptions.check")(
+									options
+								)
+						);
+						return new HtmlParser(parserOptions);
+					});
 
 				normalModuleFactory.hooks.createGenerator
 					.for(HTML_MODULE_TYPE)
@@ -294,8 +417,13 @@ class HtmlModulesPlugin {
 					(result, module) => {
 						if (module.type === HTML_MODULE_TYPE) {
 							const [source, ...rest] = result;
+							// `applyTemplate` is a no-op unless `module.parser.html.template`
+							// is set. Running it here (where the returned source becomes the
+							// module's stored source) keeps the parser's dependency offsets
+							// and the generator's render base in sync.
+							const parser = /** @type {HtmlParser} */ (module.parser);
 
-							return [removeBOM(source), ...rest];
+							return [parser.applyTemplate(removeBOM(source), module), ...rest];
 						}
 
 						return result;
@@ -327,9 +455,19 @@ class HtmlModulesPlugin {
 					getUndoPath,
 					makePathsRelative
 				} = require("../util/identifier");
-				const CssUrlDependency = require("../dependencies/CssUrlDependency");
-
-				const autoPlaceholder = CssUrlDependency.PUBLIC_PATH_AUTO;
+				const {
+					PUBLIC_PATH_AUTO: autoPlaceholder
+				} = require("../util/publicPathPlaceholder");
+
+				// Sentinel-resolved content and its content hash depend only on
+				// the HTML-type module source — not on the chunk or output
+				// filename — yet `renderManifest` runs per `(chunk, module)`.
+				// Memoize so a module landing in multiple chunks resolves and
+				// hashes its sentinels once. Scoped to this compilation because
+				// sentinel resolution embeds chunk filenames, which change
+				// across rebuilds; weakly keyed by source so entries release.
+				/** @type {WeakMap<import("webpack-sources").Source, { resolvedContent: string, contentHash: string }>} */
+				const resolvedSentinelHashCache = new WeakMap();
 
 				compilation.hooks.renderManifest.tap(
 					PLUGIN_NAME,
@@ -357,30 +495,56 @@ class HtmlModulesPlugin {
 							const placeholderSource = codeGenResult.sources.get(HTML_TYPE);
 							if (!placeholderSource) continue;
 
+							// `<iframe srcdoc>` modules expose `html` only so
+							// HtmlInlineHtmlDependency can write the processed markup back
+							// into the host attribute — they are never standalone pages.
+							// `generator.extract: "inline"` marks them so no `.html` file is
+							// emitted; without this they'd collide on the `data:text/html`
+							// → chunk-name path below (every srcdoc module in a chunk would
+							// emit `<chunk>.html`). An O(1) flag check, not a scan.
+							const generatorOptions = normalModule.generatorOptions;
+							if (generatorOptions && generatorOptions.extract === "inline") {
+								continue;
+							}
+
 							const filenameTemplate = chunk.canBeInitial()
 								? outputOptions.htmlFilename
 								: outputOptions.htmlChunkFilename;
 
-							const sourceFilename = makePathsRelative(
-								compiler.context,
-								/** @type {string} */
-								(normalModule.getResource() || normalModule.resource),
-								compiler.root
-							).replace(/^\.\//, "");
-
-							const placeholderContent = /** @type {string} */ (
-								placeholderSource.source()
-							);
-							// Resolve sentinels *before* hashing so the HTML's `[contenthash]`
-							// invalidates with the referenced chunks' filenames.
-							const resolvedContent = HtmlGenerator.resolveChunkUrlSentinels(
-								placeholderContent,
-								compilation
-							);
-							const contentHash = HtmlModulesPlugin.computeContentHash(
-								resolvedContent,
-								outputOptions
-							);
+							const resource =
+								normalModule.getResource() || normalModule.resource;
+							// Synthetic `output.html` entries are `data:text/html` modules
+							// with no real basename — name the file after the entry instead.
+							const sourceFilename =
+								resource.startsWith("data:text/html") && chunk.name
+									? chunk.name
+									: makePathsRelative(
+											compiler.context,
+											/** @type {string} */ (resource),
+											compiler.root
+										).replace(/^\.\//, "");
+
+							let cached = resolvedSentinelHashCache.get(placeholderSource);
+							if (cached === undefined) {
+								const placeholderContent = /** @type {string} */ (
+									placeholderSource.source()
+								);
+								// Resolve sentinels *before* hashing so the HTML's `[contenthash]`
+								// invalidates with the referenced chunks' filenames.
+								const resolvedContent = HtmlGenerator.resolveChunkUrlSentinels(
+									placeholderContent,
+									compilation
+								);
+								cached = {
+									resolvedContent,
+									contentHash: HtmlModulesPlugin.computeContentHash(
+										resolvedContent,
+										outputOptions
+									)
+								};
+								resolvedSentinelHashCache.set(placeholderSource, cached);
+							}
+							const { resolvedContent, contentHash } = cached;
 
 							const { path: filename, info } = compilation.getPathWithInfo(
 								/** @type {import("../TemplatedPathPlugin").TemplatePath} */