webpack 5.59.0 → 5.76.0

package/lib/esm/ModuleChunkFormatPlugin.js

@@ -5,18 +5,16 @@
 
 "use strict";
 
-const { ConcatSource, RawSource } = require("webpack-sources");
+const { ConcatSource } = require("webpack-sources");
 const { RuntimeGlobals } = require("..");
 const HotUpdateChunk = require("../HotUpdateChunk");
 const Template = require("../Template");
+const { getAllChunks } = require("../javascript/ChunkHelpers");
 const {
 	getCompilationHooks,
 	getChunkFilenameTemplate
 } = require("../javascript/JavascriptModulesPlugin");
-const {
-	generateEntryStartup,
-	updateHashForEntryStartup
-} = require("../javascript/StartupHelpers");
+const { updateHashForEntryStartup } = require("../javascript/StartupHelpers");
 
 /** @typedef {import("../Compiler")} Compiler */
 
@@ -84,63 +82,90 @@ class ModuleChunkFormatPlugin {
 										}
 									)
 									.split("/");
-								const runtimeOutputName = compilation
-									.getPath(
-										getChunkFilenameTemplate(
-											runtimeChunk,
-											compilation.outputOptions
-										),
-										{
-											chunk: runtimeChunk,
-											contentHashType: "javascript"
-										}
-									)
-									.split("/");
 
 								// remove filename, we only need the directory
-								const outputFilename = currentOutputName.pop();
+								currentOutputName.pop();
 
-								// remove common parts
-								while (
-									currentOutputName.length > 0 &&
-									runtimeOutputName.length > 0 &&
-									currentOutputName[0] === runtimeOutputName[0]
-								) {
-									currentOutputName.shift();
-									runtimeOutputName.shift();
-								}
+								const getRelativePath = chunk => {
+									const baseOutputName = currentOutputName.slice();
+									const chunkOutputName = compilation
+										.getPath(
+											getChunkFilenameTemplate(
+												chunk,
+												compilation.outputOptions
+											),
+											{
+												chunk: chunk,
+												contentHashType: "javascript"
+											}
+										)
+										.split("/");
 
-								// create final path
-								const runtimePath =
-									(currentOutputName.length > 0
-										? "../".repeat(currentOutputName.length)
-										: "./") + runtimeOutputName.join("/");
+									// remove common parts
+									while (
+										baseOutputName.length > 0 &&
+										chunkOutputName.length > 0 &&
+										baseOutputName[0] === chunkOutputName[0]
+									) {
+										baseOutputName.shift();
+										chunkOutputName.shift();
+									}
+									// create final path
+									return (
+										(baseOutputName.length > 0
+											? "../".repeat(baseOutputName.length)
+											: "./") + chunkOutputName.join("/")
+									);
+								};
 
 								const entrySource = new ConcatSource();
 								entrySource.add(source);
 								entrySource.add(";\n\n// load runtime\n");
 								entrySource.add(
 									`import __webpack_require__ from ${JSON.stringify(
-										runtimePath
-									)};\n`
-								);
-								entrySource.add(
-									`import * as __webpack_self_exports__ from ${JSON.stringify(
-										"./" + outputFilename
+										getRelativePath(runtimeChunk)
 									)};\n`
 								);
-								entrySource.add(
-									`${RuntimeGlobals.externalInstallChunk}(__webpack_self_exports__);\n`
-								);
-								const startupSource = new RawSource(
-									generateEntryStartup(
-										chunkGraph,
-										runtimeTemplate,
-										entries,
-										chunk,
-										false
-									)
+
+								const startupSource = new ConcatSource();
+								startupSource.add(
+									`var __webpack_exec__ = ${runtimeTemplate.returningFunction(
+										`__webpack_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];
+									const final = i + 1 === entries.length;
+									const moduleId = chunkGraph.getModuleId(module);
+									const chunks = getAllChunks(
+										entrypoint,
+										runtimeChunk,
+										undefined
+									);
+									for (const chunk of chunks) {
+										if (loadedChunks.has(chunk)) 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 __webpack_exports__ = " : ""
+										}__webpack_exec__(${JSON.stringify(moduleId)});\n`
+									);
+								}
+
 								entrySource.add(
 									hooks.renderStartup.call(
 										startupSource,

package/lib/esm/ModuleChunkLoadingPlugin.js

@@ -25,7 +25,9 @@ class ModuleChunkLoadingPlugin {
 				const isEnabledForChunk = chunk => {
 					const options = chunk.getEntryOptions();
 					const chunkLoading =
-						(options && options.chunkLoading) || globalChunkLoading;
+						options && options.chunkLoading !== undefined
+							? options.chunkLoading
+							: globalChunkLoading;
 					return chunkLoading === "import";
 				};
 				const onceForChunkSet = new WeakSet();

package/lib/esm/ModuleChunkLoadingRuntimeModule.js

@@ -55,15 +55,35 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		this._runtimeRequirements = runtimeRequirements;
 	}
 
+	/**
+	 * @private
+	 * @param {Chunk} chunk chunk
+	 * @param {string} rootOutputDir root output directory
+	 * @returns {string} generated code
+	 */
+	_generateBaseUri(chunk, rootOutputDir) {
+		const options = chunk.getEntryOptions();
+		if (options && options.baseUri) {
+			return `${RuntimeGlobals.baseURI} = ${JSON.stringify(options.baseUri)};`;
+		}
+		const {
+			compilation: {
+				outputOptions: { importMetaName }
+			}
+		} = this;
+		return `${RuntimeGlobals.baseURI} = new URL(${JSON.stringify(
+			rootOutputDir
+		)}, ${importMetaName}.url);`;
+	}
+
 	/**
 	 * @returns {string} runtime code
 	 */
 	generate() {
-		const { compilation, chunk } = this;
+		const { compilation, chunk, chunkGraph } = this;
 		const {
 			runtimeTemplate,
-			chunkGraph,
-			outputOptions: { importFunctionName, importMetaName }
+			outputOptions: { importFunctionName }
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
 		const withBaseURI = this._runtimeRequirements.has(RuntimeGlobals.baseURI);
@@ -81,7 +101,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 		);
 		const conditionMap = chunkGraph.getChunkConditionMap(chunk, chunkHasJs);
 		const hasJsMatcher = compileBooleanMatcher(conditionMap);
-		const initialChunkIds = getInitialChunkIds(chunk, chunkGraph);
+		const initialChunkIds = getInitialChunkIds(chunk, chunkGraph, chunkHasJs);
 
 		const outputName = this.compilation.getPath(
 			getChunkFilenameTemplate(chunk, this.compilation.outputOptions),
@@ -102,11 +122,7 @@ class ModuleChunkLoadingRuntimeModule extends RuntimeModule {
 
 		return Template.asString([
 			withBaseURI
-				? Template.asString([
-						`${RuntimeGlobals.baseURI} = new URL(${JSON.stringify(
-							rootOutputDir
-						)}, ${importMetaName}.url);`
-				  ])
+				? this._generateBaseUri(chunk, rootOutputDir)
 				: "// no baseURI",
 			"",
 			"// object to store loaded and loading chunks",

package/lib/hmr/HotModuleReplacement.runtime.js

@@ -28,7 +28,8 @@ module.exports = function () {
 	var currentStatus = "idle";
 
 	// while downloading
-	var blockingPromises;
+	var blockingPromises = 0;
+	var blockingPromisesWaiting = [];
 
 	// The update info
 	var currentUpdateApplyHandlers;
@@ -218,17 +219,28 @@ module.exports = function () {
 		return Promise.all(results);
 	}
 
+	function unblock() {
+		if (--blockingPromises === 0) {
+			setStatus("ready").then(function () {
+				if (blockingPromises === 0) {
+					var list = blockingPromisesWaiting;
+					blockingPromisesWaiting = [];
+					for (var i = 0; i < list.length; i++) {
+						list[i]();
+					}
+				}
+			});
+		}
+	}
+
 	function trackBlockingPromise(promise) {
 		switch (currentStatus) {
 			case "ready":
 				setStatus("prepare");
-				blockingPromises.push(promise);
-				waitForBlockingPromises(function () {
-					return setStatus("ready");
-				});
-				return promise;
+			/* fallthrough */
 			case "prepare":
-				blockingPromises.push(promise);
+				blockingPromises++;
+				promise.then(unblock, unblock);
 				return promise;
 			default:
 				return promise;
@@ -236,11 +248,11 @@ module.exports = function () {
 	}
 
 	function waitForBlockingPromises(fn) {
-		if (blockingPromises.length === 0) return fn();
-		var blocker = blockingPromises;
-		blockingPromises = [];
-		return Promise.all(blocker).then(function () {
-			return waitForBlockingPromises(fn);
+		if (blockingPromises === 0) return fn();
+		return new Promise(function (resolve) {
+			blockingPromisesWaiting.push(function () {
+				resolve(fn());
+			});
 		});
 	}
 
@@ -261,7 +273,6 @@ module.exports = function () {
 
 				return setStatus("prepare").then(function () {
 					var updatedModules = [];
-					blockingPromises = [];
 					currentUpdateApplyHandlers = [];
 
 					return Promise.all(
@@ -298,7 +309,11 @@ module.exports = function () {
 	function hotApply(options) {
 		if (currentStatus !== "ready") {
 			return Promise.resolve().then(function () {
-				throw new Error("apply() is only allowed in ready status");
+				throw new Error(
+					"apply() is only allowed in ready status (state: " +
+						currentStatus +
+						")"
+				);
 			});
 		}
 		return internalApply(options);

package/lib/hmr/JavascriptHotModuleReplacement.runtime.js

@@ -443,15 +443,16 @@ module.exports = function () {
 			) {
 				promises.push($loadUpdateChunk$(chunkId, updatedModulesList));
 				currentUpdateChunks[chunkId] = true;
+			} else {
+				currentUpdateChunks[chunkId] = false;
 			}
 		});
 		if ($ensureChunkHandlers$) {
 			$ensureChunkHandlers$.$key$Hmr = function (chunkId, promises) {
 				if (
 					currentUpdateChunks &&
-					!$hasOwnProperty$(currentUpdateChunks, chunkId) &&
-					$hasOwnProperty$($installedChunks$, chunkId) &&
-					$installedChunks$[chunkId] !== undefined
+					$hasOwnProperty$(currentUpdateChunks, chunkId) &&
+					!currentUpdateChunks[chunkId]
 				) {
 					promises.push($loadUpdateChunk$(chunkId));
 					currentUpdateChunks[chunkId] = true;

package/lib/hmr/LazyCompilationPlugin.js

@@ -29,10 +29,17 @@ const { registerNotSerializable } = require("../util/serialization");
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
 /** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../dependencies/HarmonyImportDependency")} HarmonyImportDependency */
 /** @typedef {import("../util/Hash")} Hash */
 /** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
 
-const IGNORED_DEPENDENCY_TYPES = new Set([
+/**
+ * @typedef {Object} BackendApi
+ * @property {function(Error=): void} dispose
+ * @property {function(Module): { client: string, data: string, active: boolean }} module
+ */
+
+const HMR_DEPENDENCY_TYPES = new Set([
 	"import.meta.webpackHot.accept",
 	"import.meta.webpackHot.decline",
 	"module.hot.accept",
@@ -140,7 +147,7 @@ class LazyCompilationProxyModule extends Module {
 
 	/**
 	 * @param {NeedBuildContext} context context info
-	 * @param {function(WebpackError=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
+	 * @param {function((WebpackError | null)=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
 	 * @returns {void}
 	 */
 	needBuild(context, callback) {
@@ -303,15 +310,13 @@ class LazyCompilationDependencyFactory extends ModuleFactory {
 class LazyCompilationPlugin {
 	/**
 	 * @param {Object} options options
-	 * @param {(function(Compiler, string, function(Error?, any?): void): void) | function(Compiler, string): Promise<any>} options.backend the backend
-	 * @param {string} options.client the client reference
+	 * @param {(function(Compiler, function(Error?, BackendApi?): void): void) | function(Compiler): Promise<BackendApi>} options.backend the backend
 	 * @param {boolean} options.entries true, when entries are lazy compiled
 	 * @param {boolean} options.imports true, when import() modules are lazy compiled
 	 * @param {RegExp | string | (function(Module): boolean)} options.test additional filter for lazy compiled entrypoint modules
 	 */
-	constructor({ backend, client, entries, imports, test }) {
+	constructor({ backend, entries, imports, test }) {
 		this.backend = backend;
-		this.client = client;
 		this.entries = entries;
 		this.imports = imports;
 		this.test = test;
@@ -327,7 +332,7 @@ class LazyCompilationPlugin {
 			"LazyCompilationPlugin",
 			(params, callback) => {
 				if (backend !== undefined) return callback();
-				const promise = this.backend(compiler, this.client, (err, result) => {
+				const promise = this.backend(compiler, (err, result) => {
 					if (err) return callback(err);
 					backend = result;
 					callback();
@@ -347,32 +352,55 @@ class LazyCompilationPlugin {
 					"LazyCompilationPlugin",
 					(originalModule, createData, resolveData) => {
 						if (
-							resolveData.dependencies.every(
+							resolveData.dependencies.every(dep =>
+								HMR_DEPENDENCY_TYPES.has(dep.type)
+							)
+						) {
+							// for HMR only resolving, try to determine if the HMR accept/decline refers to
+							// an import() or not
+							const hmrDep = resolveData.dependencies[0];
+							const originModule =
+								compilation.moduleGraph.getParentModule(hmrDep);
+							const isReferringToDynamicImport = originModule.blocks.some(
+								block =>
+									block.dependencies.some(
+										dep =>
+											dep.type === "import()" &&
+											/** @type {HarmonyImportDependency} */ (dep).request ===
+												hmrDep.request
+									)
+							);
+							if (!isReferringToDynamicImport) return;
+						} else if (
+							!resolveData.dependencies.every(
 								dep =>
-									IGNORED_DEPENDENCY_TYPES.has(dep.type) ||
+									HMR_DEPENDENCY_TYPES.has(dep.type) ||
 									(this.imports &&
 										(dep.type === "import()" ||
 											dep.type === "import() context element")) ||
 									(this.entries && dep.type === "entry")
-							) &&
-							!/webpack[/\\]hot[/\\]|webpack-dev-server[/\\]client/.test(
+							)
+						)
+							return;
+						if (
+							/webpack[/\\]hot[/\\]|webpack-dev-server[/\\]client|webpack-hot-middleware[/\\]client/.test(
 								resolveData.request
-							) &&
-							checkTest(this.test, originalModule)
-						) {
-							const moduleInfo = backend.module(originalModule);
-							if (!moduleInfo) return;
-							const { client, data, active } = moduleInfo;
+							) ||
+							!checkTest(this.test, originalModule)
+						)
+							return;
+						const moduleInfo = backend.module(originalModule);
+						if (!moduleInfo) return;
+						const { client, data, active } = moduleInfo;
 
-							return new LazyCompilationProxyModule(
-								compiler.context,
-								originalModule,
-								resolveData.request,
-								client,
-								data,
-								active
-							);
-						}
+						return new LazyCompilationProxyModule(
+							compiler.context,
+							originalModule,
+							resolveData.request,
+							client,
+							data,
+							active
+						);
 					}
 				);
 				compilation.dependencyFactories.set(

package/lib/hmr/lazyCompilationBackend.js

@@ -5,21 +5,51 @@
 
 "use strict";
 
-const http = require("http");
-
+/** @typedef {import("http").ServerOptions} HttpServerOptions */
+/** @typedef {import("https").ServerOptions} HttpsServerOptions */
+/** @typedef {import("../../declarations/WebpackOptions").LazyCompilationDefaultBackendOptions} LazyCompilationDefaultBackendOptions */
 /** @typedef {import("../Compiler")} Compiler */
 
 /**
+ * @callback BackendHandler
  * @param {Compiler} compiler compiler
- * @param {string} client client reference
- * @param {function(Error?, any?): void} callback callback
+ * @param {function((Error | null)=, any=): void} callback callback
  * @returns {void}
  */
-module.exports = (compiler, client, callback) => {
+
+/**
+ * @param {Omit<LazyCompilationDefaultBackendOptions, "client"> & { client: NonNullable<LazyCompilationDefaultBackendOptions["client"]>}} options additional options for the backend
+ * @returns {BackendHandler} backend
+ */
+module.exports = options => (compiler, callback) => {
 	const logger = compiler.getInfrastructureLogger("LazyCompilationBackend");
 	const activeModules = new Map();
 	const prefix = "/lazy-compilation-using-";
 
+	const isHttps =
+		options.protocol === "https" ||
+		(typeof options.server === "object" &&
+			("key" in options.server || "pfx" in options.server));
+
+	const createServer =
+		typeof options.server === "function"
+			? options.server
+			: (() => {
+					const http = isHttps ? require("https") : require("http");
+					return http.createServer.bind(http, options.server);
+			  })();
+	const listen =
+		typeof options.listen === "function"
+			? options.listen
+			: server => {
+					let listen = options.listen;
+					if (typeof listen === "object" && !("port" in listen))
+						listen = { ...listen, port: undefined };
+					server.listen(listen);
+			  };
+
+	const protocol = options.protocol || (isHttps ? "https" : "http");
+
 	const requestListener = (req, res) => {
 		const keys = req.url.slice(prefix.length).split("@");
 		req.socket.on("close", () => {
@@ -38,7 +68,9 @@ module.exports = (compiler, client, callback) => {
 		req.socket.setNoDelay(true);
 		res.writeHead(200, {
 			"content-type": "text/event-stream",
-			"Access-Control-Allow-Origin": "*"
+			"Access-Control-Allow-Origin": "*",
+			"Access-Control-Allow-Methods": "*",
+			"Access-Control-Allow-Headers": "*"
 		});
 		res.write("\n");
 		let moduleActivated = false;
@@ -52,7 +84,10 @@ module.exports = (compiler, client, callback) => {
 		}
 		if (moduleActivated && compiler.watching) compiler.watching.invalidate();
 	};
-	const server = http.createServer(requestListener);
+
+	const server = /** @type {import("net").Server} */ (createServer());
+	server.on("request", requestListener);
+
 	let isClosing = false;
 	/** @type {Set<import("net").Socket>} */
 	const sockets = new Set();
@@ -63,16 +98,19 @@ module.exports = (compiler, client, callback) => {
 		});
 		if (isClosing) socket.destroy();
 	});
-	server.listen(err => {
+	server.on("clientError", e => {
+		if (e.message !== "Server is disposing") logger.warn(e);
+	});
+	server.on("listening", err => {
 		if (err) return callback(err);
 		const addr = server.address();
 		if (typeof addr === "string") throw new Error("addr must not be a string");
 		const urlBase =
 			addr.address === "::" || addr.address === "0.0.0.0"
-				? `http://localhost:${addr.port}`
+				? `${protocol}://localhost:${addr.port}`
 				: addr.family === "IPv6"
-				? `http://[${addr.address}]:${addr.port}`
-				: `http://${addr.address}:${addr.port}`;
+				? `${protocol}://[${addr.address}]:${addr.port}`
+				: `${protocol}://${addr.address}:${addr.port}`;
 		logger.log(
 			`Server-Sent-Events server for lazy compilation open at ${urlBase}.`
 		);
@@ -94,11 +132,12 @@ module.exports = (compiler, client, callback) => {
 				).replace(/%(2F|3A|24|26|2B|2C|3B|3D|3A)/g, decodeURIComponent)}`;
 				const active = activeModules.get(key) > 0;
 				return {
-					client: `${client}?${encodeURIComponent(urlBase + prefix)}`,
+					client: `${options.client}?${encodeURIComponent(urlBase + prefix)}`,
 					data: key,
 					active
 				};
 			}
 		});
 	});
+	listen(server);
 };