webpack 5.107.1 → 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,16 +90,109 @@ const generatorValidationOptions = {
 	baseDataPath: "generator"
 };
 
+const parserValidationOptions = {
+	name: "Html Modules Plugin",
+	baseDataPath: "parser"
+};
+
 class HtmlModulesPlugin {
+	/**
+	 * `output.hashFunction`/`hashSalt`/`hashDigest`/`hashDigestLength`
+	 * digest of `content`, with `nonNumericOnlyHash` applied — webpack's
+	 * standard `[contenthash]` recipe.
+	 * @param {string | Buffer} content content to hash
+	 * @param {import("../../declarations/WebpackOptions").Output} outputOptions output options
+	 * @returns {string} content hash
+	 */
+	static computeContentHash(content, outputOptions) {
+		const hash = createHash(
+			/** @type {import("../../declarations/WebpackOptions").HashFunction} */
+			(outputOptions.hashFunction)
+		);
+		if (outputOptions.hashSalt) hash.update(outputOptions.hashSalt);
+		hash.update(content);
+		return digestNonNumericOnly(
+			hash,
+			/** @type {string} */ (outputOptions.hashDigest),
+			/** @type {number} */ (outputOptions.hashDigestLength)
+		);
+	}
+
 	/**
 	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the compiler instance
 	 * @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
@@ -71,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
@@ -183,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
@@ -215,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()
@@ -227,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)
@@ -263,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;
@@ -296,11 +455,19 @@ class HtmlModulesPlugin {
 					getUndoPath,
 					makePathsRelative
 				} = require("../util/identifier");
-				const createHash = require("../util/createHash");
-				const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
-				const CssUrlDependency = require("../dependencies/CssUrlDependency");
+				const {
+					PUBLIC_PATH_AUTO: autoPlaceholder
+				} = require("../util/publicPathPlaceholder");
 
-				const autoPlaceholder = CssUrlDependency.PUBLIC_PATH_AUTO;
+				// 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,
@@ -328,32 +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 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(/^\.\//, "");
 
-							const placeholderContent = /** @type {string} */ (
-								placeholderSource.source()
-							);
-							const hashInput = createHash(outputOptions.hashFunction);
-							if (outputOptions.hashSalt) {
-								hashInput.update(outputOptions.hashSalt);
+							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);
 							}
-							hashInput.update(placeholderContent);
-							const fullContentHash = /** @type {string} */ (
-								hashInput.digest(outputOptions.hashDigest)
-							);
-							const contentHash = nonNumericOnlyHash(
-								fullContentHash,
-								outputOptions.hashDigestLength
-							);
+							const { resolvedContent, contentHash } = cached;
 
 							const { path: filename, info } = compilation.getPathWithInfo(
 								/** @type {import("../TemplatedPathPlugin").TemplatePath} */
@@ -382,7 +573,7 @@ class HtmlModulesPlugin {
 								/** @type {string} */ (outputOptions.path),
 								false
 							);
-							const finalContent = placeholderContent
+							const finalContent = resolvedContent
 								.split(autoPlaceholder)
 								.join(undoPath);
 							const finalSource = new RawSource(finalContent);
@@ -395,16 +586,9 @@ class HtmlModulesPlugin {
 							// the post-undo-path content in the hash, so the
 							// asset cache can't reuse one variant's bytes at
 							// another variant's URL.
-							const finalHash = createHash(outputOptions.hashFunction);
-							if (outputOptions.hashSalt) {
-								finalHash.update(outputOptions.hashSalt);
-							}
-							finalHash.update(finalContent);
-							const finalContentHash = nonNumericOnlyHash(
-								/** @type {string} */ (
-									finalHash.digest(outputOptions.hashDigest)
-								),
-								outputOptions.hashDigestLength
+							const finalContentHash = HtmlModulesPlugin.computeContentHash(
+								finalContent,
+								outputOptions
 							);
 
 							result.push({
@@ -421,6 +605,49 @@ class HtmlModulesPlugin {
 						return result;
 					}
 				);
+
+				// Resolve sentinels at JS chunk render time so later passes
+				// (SourceMapDevToolPlugin, size optimizers, RealContentHash) see resolved bytes.
+				const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
+
+				const jsHooks =
+					JavascriptModulesPlugin.getCompilationHooks(compilation);
+				jsHooks.render.tap(PLUGIN_NAME, (source, renderContext) => {
+					const raw = source.source();
+					if (typeof raw !== "string") return source;
+					if (!raw.includes("__WEBPACK_HTML_CHUNK_URL__")) return source;
+					const resolved = HtmlGenerator.resolveChunkUrlSentinels(
+						raw,
+						compilation
+					)
+						.split(autoPlaceholder)
+						.join("");
+					if (resolved === raw) return source;
+					const chunkId = String(renderContext.chunk.id);
+					const prior = sentinelResolvedSourceCache.get(chunkId);
+					if (prior !== undefined && prior.content === resolved) {
+						return prior.source;
+					}
+					const newSource = new RawSource(resolved);
+					sentinelResolvedSourceCache.set(chunkId, {
+						content: resolved,
+						source: newSource
+					});
+					return newSource;
+				});
+
+				// Prune cache entries for chunks no longer in the graph so a
+				// long watch session can't accumulate stale entries.
+				compilation.hooks.afterSeal.tap(PLUGIN_NAME, () => {
+					if (sentinelResolvedSourceCache.size === 0) return;
+					const live = new Set();
+					for (const chunk of compilation.chunks) {
+						live.add(String(chunk.id));
+					}
+					for (const id of sentinelResolvedSourceCache.keys()) {
+						if (!live.has(id)) sentinelResolvedSourceCache.delete(id);
+					}
+				});
 			}
 		);
 	}