webpack 5.99.9 → 5.100.1

package/lib/esm/ModuleChunkFormatPlugin.js

@@ -6,21 +6,111 @@
 "use strict";
 
 const { ConcatSource } = require("webpack-sources");
-const { RuntimeGlobals } = require("..");
-const HotUpdateChunk = require("../HotUpdateChunk");
+const { HotUpdateChunk, RuntimeGlobals } = require("..");
 const Template = require("../Template");
 const { getAllChunks } = require("../javascript/ChunkHelpers");
 const {
 	chunkHasJs,
-	getCompilationHooks,
-	getChunkFilenameTemplate
+	getChunkFilenameTemplate,
+	getCompilationHooks
 } = require("../javascript/JavascriptModulesPlugin");
 const { updateHashForEntryStartup } = require("../javascript/StartupHelpers");
 const { getUndoPath } = require("../util/identifier");
 
+/** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
+/** @typedef {import("../ChunkGroup")} ChunkGroup */
+/** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Entrypoint")} Entrypoint */
+/** @typedef {import("../Module")} Module */
+/** @typedef {import("../javascript/JavascriptModulesPlugin").RenderContext} RenderContext */
+
+/**
+ * Gets information about a chunk including its entries and runtime chunk
+ * @param {Chunk} chunk The chunk to get information for
+ * @param {ChunkGraph} chunkGraph The chunk graph containing the chunk
+ * @returns {{entries: Array<[Module, Entrypoint | undefined]>, runtimeChunk: Chunk|null}} Object containing chunk entries and runtime chunk
+ */
+function getChunkInfo(chunk, chunkGraph) {
+	const entries = [
+		...chunkGraph.getChunkEntryModulesWithChunkGroupIterable(chunk)
+	];
+	const runtimeChunk =
+		entries.length > 0
+			? /** @type {Entrypoint[][]} */
+				(entries)[0][1].getRuntimeChunk()
+			: null;
+
+	return {
+		entries,
+		runtimeChunk
+	};
+}
+
+/**
+ * @param {Compilation} compilation the compilation instance
+ * @param {Chunk} chunk the chunk
+ * @param {Chunk} runtimeChunk the runtime chunk
+ * @returns {string} the relative path
+ */
+const getRelativePath = (compilation, chunk, runtimeChunk) => {
+	const currentOutputName = compilation
+		.getPath(
+			getChunkFilenameTemplate(runtimeChunk, compilation.outputOptions),
+			{
+				chunk: runtimeChunk,
+				contentHashType: "javascript"
+			}
+		)
+		.replace(/^\/+/g, "")
+		.split("/");
+	const baseOutputName = [...currentOutputName];
+	const chunkOutputName = compilation
+		.getPath(getChunkFilenameTemplate(chunk, compilation.outputOptions), {
+			chunk,
+			contentHashType: "javascript"
+		})
+		.replace(/^\/+/g, "")
+		.split("/");
+
+	// remove common parts except filename
+	while (
+		baseOutputName.length > 1 &&
+		chunkOutputName.length > 1 &&
+		baseOutputName[0] === chunkOutputName[0]
+	) {
+		baseOutputName.shift();
+		chunkOutputName.shift();
+	}
+	const last = chunkOutputName.join("/");
+	// create final path
+	return getUndoPath(baseOutputName.join("/"), last, true) + last;
+};
+
+/**
+ * @param {Compilation} compilation the compilation instance
+ * @param {Chunk} chunk the chunk to render the import for
+ * @param {string=} namedImport the named import to use for the import
+ * @param {Chunk=} runtimeChunk the runtime chunk
+ * @returns {string} the import source
+ */
+function renderChunkImport(compilation, chunk, namedImport, runtimeChunk) {
+	return `import ${namedImport ? `* as ${namedImport}` : RuntimeGlobals.require} from ${JSON.stringify(
+		getRelativePath(compilation, chunk, runtimeChunk || chunk)
+	)};\n`;
+}
+
+/**
+ * @param {number} index the index of the chunk
+ * @returns {string} the named import to use for the import
+ */
+function getChunkNamedImport(index) {
+	return `__webpack_chunk_${index}__`;
+}
+
+const PLUGIN_NAME = "ModuleChunkFormatPlugin";
 
 class ModuleChunkFormatPlugin {
 	/**
@@ -29,194 +119,188 @@ class ModuleChunkFormatPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
-		compiler.hooks.thisCompilation.tap(
-			"ModuleChunkFormatPlugin",
-			compilation => {
-				compilation.hooks.additionalChunkRuntimeRequirements.tap(
-					"ModuleChunkFormatPlugin",
-					(chunk, set) => {
-						if (chunk.hasRuntime()) return;
-						if (compilation.chunkGraph.getNumberOfEntryModules(chunk) > 0) {
-							set.add(RuntimeGlobals.require);
-							set.add(RuntimeGlobals.startupEntrypoint);
-							set.add(RuntimeGlobals.externalInstallChunk);
+		compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
+			compilation.hooks.additionalChunkRuntimeRequirements.tap(
+				PLUGIN_NAME,
+				(chunk, set) => {
+					if (chunk.hasRuntime()) return;
+					if (compilation.chunkGraph.getNumberOfEntryModules(chunk) > 0) {
+						set.add(RuntimeGlobals.require);
+						set.add(RuntimeGlobals.externalInstallChunk);
+					}
+				}
+			);
+			const hooks = getCompilationHooks(compilation);
+			/**
+			 * @param {Set<Chunk>} chunks the chunks to render
+			 * @param {ChunkGraph} chunkGraph the chunk graph
+			 * @param {Chunk=} runtimeChunk the runtime chunk
+			 * @returns {Source|undefined} the source
+			 */
+			const withDependentChunks = (chunks, chunkGraph, runtimeChunk) => {
+				if (/** @type {Set<Chunk>} */ (chunks).size > 0) {
+					const source = new ConcatSource();
+					let index = 0;
+
+					for (const chunk of chunks) {
+						index++;
+
+						if (!chunkHasJs(chunk, chunkGraph)) {
+							continue;
 						}
+						const namedImport = getChunkNamedImport(index);
+						source.add(
+							renderChunkImport(
+								compilation,
+								chunk,
+								namedImport,
+								runtimeChunk || chunk
+							)
+						);
+						source.add(
+							`${RuntimeGlobals.externalInstallChunk}(${namedImport});\n`
+						);
 					}
+					return source;
+				}
+			};
+			hooks.renderStartup.tap(
+				PLUGIN_NAME,
+				(modules, _lastModule, renderContext) => {
+					const { chunk, chunkGraph } = renderContext;
+					if (!chunk.hasRuntime()) {
+						return modules;
+					}
+					const entryDependentChunks =
+						chunkGraph.getChunkEntryDependentChunksIterable(chunk);
+					const sourceWithDependentChunks = withDependentChunks(
+						/** @type {Set<Chunk>} */ (entryDependentChunks),
+						chunkGraph,
+						chunk
+					);
+					if (!sourceWithDependentChunks) {
+						return modules;
+					}
+					if (modules.size() === 0) {
+						return sourceWithDependentChunks;
+					}
+					const source = new ConcatSource();
+					source.add(sourceWithDependentChunks);
+					source.add("\n");
+					source.add(modules);
+					return source;
+				}
+			);
+			hooks.renderChunk.tap(PLUGIN_NAME, (modules, renderContext) => {
+				const { chunk, chunkGraph, runtimeTemplate } = renderContext;
+				const hotUpdateChunk = chunk instanceof HotUpdateChunk ? chunk : null;
+				const source = new ConcatSource();
+				source.add(
+					`export const __webpack_id__ = ${JSON.stringify(chunk.id)};\n`
 				);
-				const hooks = getCompilationHooks(compilation);
-				hooks.renderChunk.tap(
-					"ModuleChunkFormatPlugin",
-					(modules, renderContext) => {
-						const { chunk, chunkGraph, runtimeTemplate } = renderContext;
-						const hotUpdateChunk =
-							chunk instanceof HotUpdateChunk ? chunk : null;
-						const source = new ConcatSource();
-						if (hotUpdateChunk) {
-							throw new Error(
-								"HMR is not implemented for module chunk format yet"
-							);
-						} else {
-							source.add(
-								`export const __webpack_id__ = ${JSON.stringify(chunk.id)};\n`
-							);
-							source.add(
-								`export const __webpack_ids__ = ${JSON.stringify(chunk.ids)};\n`
-							);
-							source.add("export const __webpack_modules__ = ");
-							source.add(modules);
-							source.add(";\n");
-							const runtimeModules =
-								chunkGraph.getChunkRuntimeModulesInOrder(chunk);
-							if (runtimeModules.length > 0) {
-								source.add("export const __webpack_runtime__ =\n");
-								source.add(
-									Template.renderChunkRuntimeModules(
-										runtimeModules,
-										renderContext
-									)
-								);
-							}
-							const entries = Array.from(
-								chunkGraph.getChunkEntryModulesWithChunkGroupIterable(chunk)
-							);
-							if (entries.length > 0) {
-								const runtimeChunk =
-									/** @type {Entrypoint[][]} */
-									(entries)[0][1].getRuntimeChunk();
-								const currentOutputName = compilation
-									.getPath(
-										getChunkFilenameTemplate(chunk, compilation.outputOptions),
-										{
-											chunk,
-											contentHashType: "javascript"
-										}
-									)
-									.replace(/^\/+/g, "")
-									.split("/");
-
-								/**
-								 * @param {Chunk} chunk the chunk
-								 * @returns {string} the relative path
-								 */
-								const getRelativePath = chunk => {
-									const baseOutputName = currentOutputName.slice();
-									const chunkOutputName = compilation
-										.getPath(
-											getChunkFilenameTemplate(
-												chunk,
-												compilation.outputOptions
-											),
-											{
-												chunk,
-												contentHashType: "javascript"
-											}
-										)
-										.replace(/^\/+/g, "")
-										.split("/");
-
-									// remove common parts except filename
-									while (
-										baseOutputName.length > 1 &&
-										chunkOutputName.length > 1 &&
-										baseOutputName[0] === chunkOutputName[0]
-									) {
-										baseOutputName.shift();
-										chunkOutputName.shift();
-									}
-									const last = chunkOutputName.join("/");
-									// create final path
-									return (
-										getUndoPath(baseOutputName.join("/"), last, true) + last
-									);
-								};
-
-								const entrySource = new ConcatSource();
-								entrySource.add(source);
-								entrySource.add(";\n\n// load runtime\n");
-								entrySource.add(
-									`import ${RuntimeGlobals.require} from ${JSON.stringify(
-										getRelativePath(/** @type {Chunk} */ (runtimeChunk))
-									)};\n`
-								);
-
-								const startupSource = new ConcatSource();
-								startupSource.add(
-									`var __webpack_exec__ = ${runtimeTemplate.returningFunction(
-										`${RuntimeGlobals.require}(${RuntimeGlobals.entryModuleId} = moduleId)`,
-										"moduleId"
-									)}\n`
-								);
-
-								const loadedChunks = new Set();
-								let index = 0;
-								for (let i = 0; i < entries.length; i++) {
-									const [module, entrypoint] = entries[i];
-									if (
-										!chunkGraph.getModuleSourceTypes(module).has("javascript")
-									) {
-										continue;
-									}
-									const final = i + 1 === entries.length;
-									const moduleId = chunkGraph.getModuleId(module);
-									const chunks = getAllChunks(
-										/** @type {Entrypoint} */ (entrypoint),
-										/** @type {Chunk} */ (runtimeChunk),
-										undefined
-									);
-									for (const chunk of chunks) {
-										if (
-											loadedChunks.has(chunk) ||
-											!chunkHasJs(chunk, chunkGraph)
-										)
-											continue;
-										loadedChunks.add(chunk);
-										startupSource.add(
-											`import * as __webpack_chunk_${index}__ from ${JSON.stringify(
-												getRelativePath(chunk)
-											)};\n`
-										);
-										startupSource.add(
-											`${RuntimeGlobals.externalInstallChunk}(__webpack_chunk_${index}__);\n`
-										);
-										index++;
-									}
-									startupSource.add(
-										`${
-											final ? `var ${RuntimeGlobals.exports} = ` : ""
-										}__webpack_exec__(${JSON.stringify(moduleId)});\n`
-									);
-								}
-
-								entrySource.add(
-									hooks.renderStartup.call(
-										startupSource,
-										entries[entries.length - 1][0],
-										{
-											...renderContext,
-											inlined: false
-										}
-									)
-								);
-								return entrySource;
+				source.add(
+					`export const __webpack_ids__ = ${JSON.stringify(chunk.ids)};\n`
+				);
+				source.add("export const __webpack_modules__ = ");
+				source.add(modules);
+				source.add(";\n");
+				const runtimeModules = chunkGraph.getChunkRuntimeModulesInOrder(chunk);
+				if (runtimeModules.length > 0) {
+					source.add("export const __webpack_runtime__ =\n");
+					source.add(
+						Template.renderChunkRuntimeModules(runtimeModules, renderContext)
+					);
+				}
+				if (hotUpdateChunk) {
+					return source;
+				}
+				const { entries, runtimeChunk } = getChunkInfo(chunk, chunkGraph);
+				if (runtimeChunk) {
+					const entrySource = new ConcatSource();
+					entrySource.add(source);
+					entrySource.add(";\n\n// load runtime\n");
+					entrySource.add(
+						renderChunkImport(compilation, runtimeChunk, "", chunk)
+					);
+					const startupSource = new ConcatSource();
+					startupSource.add(
+						`var __webpack_exec__ = ${runtimeTemplate.returningFunction(
+							`${RuntimeGlobals.require}(${RuntimeGlobals.entryModuleId} = moduleId)`,
+							"moduleId"
+						)}\n`
+					);
+
+					const loadedChunks = new Set();
+					for (let i = 0; i < entries.length; i++) {
+						const [module, entrypoint] = entries[i];
+						if (!chunkGraph.getModuleSourceTypes(module).has("javascript")) {
+							continue;
+						}
+						const final = i + 1 === entries.length;
+						const moduleId = chunkGraph.getModuleId(module);
+						const entryDependentChunks = /** @type {Set<Chunk>} */ (
+							chunkGraph.getChunkEntryDependentChunksIterable(chunk)
+						);
+						const chunks = getAllChunks(
+							/** @type {Entrypoint} */ (entrypoint),
+							/** @type {Chunk} */ (runtimeChunk),
+							undefined
+						);
+						const processChunks = new Set();
+						for (const _chunk of chunks) {
+							if (
+								loadedChunks.has(_chunk) ||
+								entryDependentChunks.has(_chunk)
+							) {
+								continue;
 							}
+							loadedChunks.add(_chunk);
+							processChunks.add(_chunk);
 						}
-						return source;
-					}
-				);
-				hooks.chunkHash.tap(
-					"ModuleChunkFormatPlugin",
-					(chunk, hash, { chunkGraph, runtimeTemplate }) => {
-						if (chunk.hasRuntime()) return;
-						hash.update("ModuleChunkFormatPlugin");
-						hash.update("1");
-						const entries = Array.from(
-							chunkGraph.getChunkEntryModulesWithChunkGroupIterable(chunk)
+						const sourceWithDependentChunks = withDependentChunks(
+							processChunks,
+							chunkGraph,
+							chunk
+						);
+						if (sourceWithDependentChunks) {
+							startupSource.add("\n");
+							startupSource.add(sourceWithDependentChunks);
+						}
+						startupSource.add(
+							`${
+								final ? `var ${RuntimeGlobals.exports} = ` : ""
+							}__webpack_exec__(${JSON.stringify(moduleId)});\n`
 						);
-						updateHashForEntryStartup(hash, chunkGraph, entries, chunk);
 					}
-				);
-			}
-		);
+
+					entrySource.add(
+						hooks.renderStartup.call(
+							startupSource,
+							entries[entries.length - 1][0],
+							{
+								...renderContext,
+								inlined: false
+							}
+						)
+					);
+					return entrySource;
+				}
+				return source;
+			});
+			hooks.chunkHash.tap(PLUGIN_NAME, (chunk, hash, { chunkGraph }) => {
+				if (chunk.hasRuntime()) return;
+				const { entries, runtimeChunk } = getChunkInfo(chunk, chunkGraph);
+				hash.update(PLUGIN_NAME);
+				hash.update("1");
+				if (runtimeChunk && runtimeChunk.hash) {
+					// Any change to runtimeChunk should trigger a hash update,
+					// we shouldn't depend on or inspect its internal implementation.
+					// import __webpack_require__ from "./runtime-main.e9400aee33633a3973bd.js";
+					hash.update(runtimeChunk.hash);
+				}
+				updateHashForEntryStartup(hash, chunkGraph, entries, chunk);
+			});
+		});
 	}
 }
 

package/lib/esm/ModuleChunkLoadingPlugin.js

@@ -63,10 +63,19 @@ class ModuleChunkLoadingPlugin {
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.onChunksLoaded)
 				.tap(PLUGIN_NAME, handler);
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+				.tap(PLUGIN_NAME, handler);
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.hmrDownloadManifest)
+				.tap(PLUGIN_NAME, handler);
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.externalInstallChunk)
-				.tap(PLUGIN_NAME, (chunk, set) => {
+				.tap(PLUGIN_NAME, (chunk, set, { chunkGraph }) => {
 					if (!isEnabledForChunk(chunk)) return;
+					// If a chunk contains an entryModule, all exports are determined by the entryModule.
+					// The ExportWebpackRequireRuntimeModule is for internal use only and not exposed to users.
+					if (chunkGraph.getNumberOfEntryModules(chunk) > 0) return;
 					compilation.addRuntimeModule(
 						chunk,
 						new ExportWebpackRequireRuntimeModule()
@@ -99,6 +108,35 @@ class ModuleChunkLoadingPlugin {
 
 					set.add(RuntimeGlobals.getChunkScriptFilename);
 				});
+
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+				.tap(PLUGIN_NAME, (chunk, set) => {
+					if (!isEnabledForChunk(chunk)) return;
+					set.add(RuntimeGlobals.publicPath);
+					set.add(RuntimeGlobals.loadScript);
+					set.add(RuntimeGlobals.getChunkUpdateScriptFilename);
+					set.add(RuntimeGlobals.moduleCache);
+					set.add(RuntimeGlobals.hmrModuleData);
+					set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+				});
+
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.hmrDownloadManifest)
+				.tap(PLUGIN_NAME, (chunk, set) => {
+					if (!isEnabledForChunk(chunk)) return;
+					set.add(RuntimeGlobals.publicPath);
+					set.add(RuntimeGlobals.getUpdateManifestFilename);
+				});
+
+			compilation.hooks.additionalTreeRuntimeRequirements.tap(
+				PLUGIN_NAME,
+				(chunk, set, { chunkGraph }) => {
+					if (chunkGraph.hasChunkEntryDependentChunks(chunk)) {
+						set.add(RuntimeGlobals.externalInstallChunk);
+					}
+				}
+			);
 		});
 	}
 }

package/lib/esm/ModuleChunkLoadingRuntimeModule.js

@@ -10,8 +10,11 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 const {
-	getChunkFilenameTemplate,
-	chunkHasJs
+	generateJavascriptHMR
+} = require("../hmr/JavascriptHotModuleReplacementHelper");
+const {
+	chunkHasJs,
+	getChunkFilenameTemplate
 } = require("../javascript/JavascriptModulesPlugin");
 const { getInitialChunkIds } = require("../javascript/StartupHelpers");
 const compileBooleanMatcher = require("../util/compileBooleanMatcher");
@@ -109,6 +112,9 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		const withHmr = this._runtimeRequirements.has(
 			RuntimeGlobals.hmrDownloadUpdateHandlers
 		);
+		const withHmrManifest = this._runtimeRequirements.has(
+			RuntimeGlobals.hmrDownloadManifest
+		);
 		const { linkPreload, linkPrefetch } =
 			ModuleChunkLoadingRuntimeModule.getCompilationHooks(compilation);
 		const isNeutralPlatform = runtimeTemplate.isNeutralPlatform();
@@ -346,7 +352,68 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 						"installedChunks[chunkId] === 0",
 						"chunkId"
 					)};`
-				: "// no on chunks loaded"
+				: "// no on chunks loaded",
+			withHmr
+				? Template.asString([
+						generateJavascriptHMR("module"),
+						"",
+						"function loadUpdateChunk(chunkId, updatedModulesList) {",
+						Template.indent([
+							`return new Promise(${runtimeTemplate.basicFunction(
+								"resolve, reject",
+								[
+									"// start update chunk loading",
+									`var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkUpdateScriptFilename}(chunkId);`,
+									`var onResolve = ${runtimeTemplate.basicFunction("obj", [
+										"var updatedModules = obj.__webpack_modules__;",
+										"var updatedRuntime = obj.__webpack_runtime__;",
+										"if(updatedRuntime) currentUpdateRuntime.push(updatedRuntime);",
+										"for(var moduleId in updatedModules) {",
+										Template.indent([
+											`if(${RuntimeGlobals.hasOwnProperty}(updatedModules, moduleId)) {`,
+											Template.indent([
+												"currentUpdate[moduleId] = updatedModules[moduleId];",
+												"if(updatedModulesList) updatedModulesList.push(moduleId);"
+											]),
+											"}"
+										]),
+										"}",
+										"resolve(obj);"
+									])};`,
+									`var onReject = ${runtimeTemplate.basicFunction("error", [
+										"var errorMsg = error.message || 'unknown reason';",
+										"error.message = 'Loading hot update chunk ' + chunkId + ' failed.\\n(' + errorMsg + ')';",
+										"error.name = 'ChunkLoadError';",
+										"reject(error);"
+									])}`,
+									`var loadScript = ${runtimeTemplate.basicFunction(
+										"url, onResolve, onReject",
+										[
+											`return ${importFunctionName}(/* webpackIgnore: true */ url).then(onResolve).catch(onReject)`
+										]
+									)}
+									loadScript(url, onResolve, onReject);`
+								]
+							)});`
+						]),
+						"}",
+						""
+					])
+				: "// no HMR",
+			"",
+			withHmrManifest
+				? Template.asString([
+						`${
+							RuntimeGlobals.hmrDownloadManifest
+						} = ${runtimeTemplate.basicFunction("", [
+							`return ${importFunctionName}(/* webpackIgnore: true */ ${RuntimeGlobals.publicPath} + ${
+								RuntimeGlobals.getUpdateManifestFilename
+							}()).then(${runtimeTemplate.basicFunction("obj", [
+								"return obj.default;"
+							])});`
+						])};`
+					])
+				: "// no HMR manifest"
 		]);
 	}
 }

package/lib/hmr/HotModuleReplacement.runtime.js

@@ -8,7 +8,6 @@
 
 var $interceptModuleExecution$ = undefined;
 var $moduleCache$ = undefined;
-// eslint-disable-next-line no-unused-vars
 var $hmrModuleData$ = undefined;
 /** @type {() => Promise}  */
 var $hmrDownloadManifest$ = undefined;

package/lib/hmr/HotModuleReplacementRuntimeModule.js

@@ -19,7 +19,7 @@ class HotModuleReplacementRuntimeModule extends RuntimeModule {
 	 */
 	generate() {
 		return Template.getFunctionContent(
-			require("./HotModuleReplacement.runtime.js")
+			require("./HotModuleReplacement.runtime")
 		)
 			.replace(
 				/\$interceptModuleExecution\$/g,