webpack 5.39.0 → 5.41.1

package/lib/cache/IdleFileCachePlugin.js

@@ -17,11 +17,18 @@ class IdleFileCachePlugin {
 	 * @param {TODO} strategy cache strategy
 	 * @param {number} idleTimeout timeout
 	 * @param {number} idleTimeoutForInitialStore initial timeout
+	 * @param {number} idleTimeoutAfterLargeChanges timeout after changes
 	 */
-	constructor(strategy, idleTimeout, idleTimeoutForInitialStore) {
+	constructor(
+		strategy,
+		idleTimeout,
+		idleTimeoutForInitialStore,
+		idleTimeoutAfterLargeChanges
+	) {
 		this.strategy = strategy;
 		this.idleTimeout = idleTimeout;
 		this.idleTimeoutForInitialStore = idleTimeoutForInitialStore;
+		this.idleTimeoutAfterLargeChanges = idleTimeoutAfterLargeChanges;
 	}
 
 	/**
@@ -36,9 +43,13 @@ class IdleFileCachePlugin {
 			idleTimeout,
 			this.idleTimeoutForInitialStore
 		);
-
+		const idleTimeoutAfterLargeChanges = this.idleTimeoutAfterLargeChanges;
 		const resolvedPromise = Promise.resolve();
 
+		let timeSpendInBuild = 0;
+		let timeSpendInStore = 0;
+		let avgTimeSpendInStore = 0;
+
 		/** @type {Map<string | typeof BUILD_DEPENDENCIES_KEY, () => Promise>} */
 		const pendingIdleTasks = new Map();
 
@@ -121,9 +132,10 @@ class IdleFileCachePlugin {
 		let isInitialStore = true;
 		const processIdleTasks = () => {
 			if (isIdle) {
+				const startTime = Date.now();
 				if (pendingIdleTasks.size > 0) {
 					const promises = [currentIdlePromise];
-					const maxTime = Date.now() + 100;
+					const maxTime = startTime + 100;
 					let maxCount = 100;
 					for (const [filename, factory] of pendingIdleTasks) {
 						pendingIdleTasks.delete(filename);
@@ -132,13 +144,23 @@ class IdleFileCachePlugin {
 					}
 					currentIdlePromise = Promise.all(promises);
 					currentIdlePromise.then(() => {
+						timeSpendInStore += Date.now() - startTime;
 						// Allow to exit the process between
-						setTimeout(processIdleTasks, 0).unref();
+						idleTimer = setTimeout(processIdleTasks, 0);
+						idleTimer.unref();
 					});
 					return;
 				}
 				currentIdlePromise = currentIdlePromise
-					.then(() => strategy.afterAllStored())
+					.then(async () => {
+						await strategy.afterAllStored();
+						timeSpendInStore += Date.now() - startTime;
+						avgTimeSpendInStore =
+							Math.max(avgTimeSpendInStore, timeSpendInStore) * 0.9 +
+							timeSpendInStore * 0.1;
+						timeSpendInStore = 0;
+						timeSpendInBuild = 0;
+					})
 					.catch(err => {
 						const logger = compiler.getInfrastructureLogger(
 							"IdleFileCachePlugin"
@@ -153,14 +175,34 @@ class IdleFileCachePlugin {
 		compiler.cache.hooks.beginIdle.tap(
 			{ name: "IdleFileCachePlugin", stage: Cache.STAGE_DISK },
 			() => {
-				idleTimer = setTimeout(
-					() => {
-						idleTimer = undefined;
-						isIdle = true;
-						resolvedPromise.then(processIdleTasks);
-					},
-					isInitialStore ? idleTimeoutForInitialStore : idleTimeout
-				);
+				const isLargeChange = timeSpendInBuild > avgTimeSpendInStore * 2;
+				if (isInitialStore && idleTimeoutForInitialStore < idleTimeout) {
+					compiler
+						.getInfrastructureLogger("IdleFileCachePlugin")
+						.log(
+							`Initial cache was generated and cache will be persisted in ${
+								idleTimeoutForInitialStore / 1000
+							}s.`
+						);
+				} else if (
+					isLargeChange &&
+					idleTimeoutAfterLargeChanges < idleTimeout
+				) {
+					compiler
+						.getInfrastructureLogger("IdleFileCachePlugin")
+						.log(
+							`Spend ${Math.round(timeSpendInBuild) / 1000}s in build and ${
+								Math.round(avgTimeSpendInStore) / 1000
+							}s in average in cache store. This is considered as large change and cache will be persisted in ${
+								idleTimeoutAfterLargeChanges / 1000
+							}s.`
+						);
+				}
+				idleTimer = setTimeout(() => {
+					idleTimer = undefined;
+					isIdle = true;
+					resolvedPromise.then(processIdleTasks);
+				}, Math.min(isInitialStore ? idleTimeoutForInitialStore : Infinity, isLargeChange ? idleTimeoutAfterLargeChanges : Infinity, idleTimeout));
 				idleTimer.unref();
 			}
 		);
@@ -174,6 +216,11 @@ class IdleFileCachePlugin {
 				isIdle = false;
 			}
 		);
+		compiler.hooks.done.tap("IdleFileCachePlugin", stats => {
+			// 10% build overhead is ignored, as it's not cacheable
+			timeSpendInBuild *= 0.9;
+			timeSpendInBuild += stats.endTime - stats.startTime;
+		});
 	}
 }
 

package/lib/cache/PackFileCacheStrategy.js

@@ -8,6 +8,7 @@
 const FileSystemInfo = require("../FileSystemInfo");
 const ProgressPlugin = require("../ProgressPlugin");
 const { formatSize } = require("../SizeFormatHelpers");
+const SerializerMiddleware = require("../serialization/SerializerMiddleware");
 const LazySet = require("../util/LazySet");
 const makeSerializable = require("../util/makeSerializable");
 const memoize = require("../util/memoize");
@@ -677,7 +678,7 @@ class PackContent {
 	 */
 	constructor(items, usedItems, dataOrFn, logger, lazyName) {
 		this.items = items;
-		/** @type {function(): PackContentItems | Promise<PackContentItems>} */
+		/** @type {function(): Promise<PackContentItems> | PackContentItems } */
 		this.lazy = typeof dataOrFn === "function" ? dataOrFn : undefined;
 		/** @type {Map<string, any>} */
 		this.content = typeof dataOrFn === "function" ? undefined : dataOrFn.map;
@@ -715,6 +716,7 @@ class PackContent {
 					this.logger.timeEnd(timeMessage);
 				}
 				this.content = map;
+				this.lazy = SerializerMiddleware.unMemoizeLazy(this.lazy);
 				return map.get(identifier);
 			});
 		} else {
@@ -723,6 +725,7 @@ class PackContent {
 				this.logger.timeEnd(timeMessage);
 			}
 			this.content = map;
+			this.lazy = SerializerMiddleware.unMemoizeLazy(this.lazy);
 			return map.get(identifier);
 		}
 	}

package/lib/cli.js

@@ -148,7 +148,7 @@ const getArguments = (schema = webpackSchema) => {
 				{
 					type: "reset",
 					multiple: false,
-					description: `Clear all items provided in configuration. ${description}`,
+					description: `Clear all items provided in '${schemaPath}' configuration. ${description}`,
 					path: schemaPath
 				}
 			],

package/lib/config/defaults.js

@@ -182,6 +182,11 @@ const applyWebpackOptionsDefaults = options => {
 	applyOutputDefaults(options.output, {
 		context: options.context,
 		targetProperties,
+		isAffectedByBrowserslist:
+			target === undefined ||
+			(typeof target === "string" && target.startsWith("browserslist")) ||
+			(Array.isArray(target) &&
+				target.some(target => target.startsWith("browserslist"))),
 		outputModule: options.experiments.outputModule,
 		development,
 		entry: options.entry,
@@ -295,7 +300,8 @@ const applyCacheDefaults = (cache, { name, mode, development }) => {
 			D(cache, "store", "pack");
 			D(cache, "profile", false);
 			D(cache, "idleTimeout", 60000);
-			D(cache, "idleTimeoutForInitialStore", 0);
+			D(cache, "idleTimeoutForInitialStore", 5000);
+			D(cache, "idleTimeoutAfterLargeChanges", 1000);
 			D(cache, "maxMemoryGenerations", development ? 5 : Infinity);
 			D(cache, "maxAge", 1000 * 60 * 60 * 24 * 60); // 1 month
 			D(cache, "allowCollectingMemory", development);
@@ -543,6 +549,7 @@ const applyModuleDefaults = (
  * @param {Object} options options
  * @param {string} options.context context
  * @param {TargetProperties | false} options.targetProperties target properties
+ * @param {boolean} options.isAffectedByBrowserslist is affected by browserslist
  * @param {boolean} options.outputModule is outputModule experiment enabled
  * @param {boolean} options.development is development mode
  * @param {Entry} options.entry entry option
@@ -551,7 +558,15 @@ const applyModuleDefaults = (
  */
 const applyOutputDefaults = (
 	output,
-	{ context, targetProperties: tp, outputModule, development, entry, module }
+	{
+		context,
+		targetProperties: tp,
+		isAffectedByBrowserslist,
+		outputModule,
+		development,
+		entry,
+		module
+	}
 ) => {
 	/**
 	 * @param {Library=} library the library option
@@ -591,8 +606,8 @@ const applyOutputDefaults = (
 		}
 	});
 
-	D(output, "filename", "[name].js");
 	F(output, "module", () => !!outputModule);
+	D(output, "filename", output.module ? "[name].mjs" : "[name].js");
 	F(output, "iife", () => !output.module);
 	D(output, "importFunctionName", "import");
 	D(output, "importMetaName", "import.meta");
@@ -608,7 +623,7 @@ const applyOutputDefaults = (
 			// Otherwise prefix "[id]." in front of the basename to make it changing
 			return filename.replace(/(^|\/)([^/]*(?:\?|$))/, "$1[id].$2");
 		}
-		return "[id].js";
+		return output.module ? "[id].mjs" : "[id].js";
 	});
 	D(output, "assetModuleFilename", "[hash][ext][query]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
@@ -633,13 +648,34 @@ const applyOutputDefaults = (
 	});
 	F(output, "chunkFormat", () => {
 		if (tp) {
-			if (tp.document) return "array-push";
-			if (tp.require) return "commonjs";
-			if (tp.nodeBuiltins) return "commonjs";
-			if (tp.importScripts) return "array-push";
-			if (tp.dynamicImport && output.module) return "module";
+			const helpMessage = isAffectedByBrowserslist
+				? "Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly."
+				: "Select an appropriate 'target' to allow selecting one by default, or specify the 'output.chunkFormat' directly.";
+			if (output.module) {
+				if (tp.dynamicImport) return "module";
+				if (tp.document) return "array-push";
+				throw new Error(
+					"For the selected environment is no default ESM chunk format available:\n" +
+						"ESM exports can be chosen when 'import()' is available.\n" +
+						"JSONP Array push can be chosen when 'document' is available.\n" +
+						helpMessage
+				);
+			} else {
+				if (tp.document) return "array-push";
+				if (tp.require) return "commonjs";
+				if (tp.nodeBuiltins) return "commonjs";
+				if (tp.importScripts) return "array-push";
+				throw new Error(
+					"For the selected environment is no default script chunk format available:\n" +
+						"JSONP Array push can be chosen when 'document' or 'importScripts' is available.\n" +
+						"CommonJs exports can be chosen when 'require' or node builtins are available.\n" +
+						helpMessage
+				);
+			}
 		}
-		return false;
+		throw new Error(
+			"Chunk format can't be selected by default when no target is specified"
+		);
 	});
 	F(output, "chunkLoading", () => {
 		if (tp) {
@@ -694,7 +730,8 @@ const applyOutputDefaults = (
 	F(output, "wasmLoading", () => {
 		if (tp) {
 			if (tp.fetchWasm) return "fetch";
-			if (tp.nodeBuiltins) return "async-node";
+			if (tp.nodeBuiltins)
+				return output.module ? "async-node-module" : "async-node";
 			if (tp.nodeBuiltins === null || tp.fetchWasm === null) {
 				return "universal";
 			}
@@ -709,7 +746,11 @@ const applyOutputDefaults = (
 	F(output, "path", () => path.join(process.cwd(), "dist"));
 	F(output, "pathinfo", () => development);
 	D(output, "sourceMapFilename", "[file].map[query]");
-	D(output, "hotUpdateChunkFilename", "[id].[fullhash].hot-update.js");
+	D(
+		output,
+		"hotUpdateChunkFilename",
+		`[id].[fullhash].hot-update.${output.module ? "mjs" : "js"}`
+	);
 	D(output, "hotUpdateMainFilename", "[runtime].[fullhash].hot-update.json");
 	D(output, "crossOriginLoading", false);
 	F(output, "scriptType", () => (output.module ? "module" : false));

package/lib/config/normalization.js

@@ -139,6 +139,7 @@ const getNormalizedWebpackOptions = config => {
 						hashAlgorithm: cache.hashAlgorithm,
 						idleTimeout: cache.idleTimeout,
 						idleTimeoutForInitialStore: cache.idleTimeoutForInitialStore,
+						idleTimeoutAfterLargeChanges: cache.idleTimeoutAfterLargeChanges,
 						name: cache.name,
 						store: cache.store,
 						version: cache.version

package/lib/dependencies/HarmonyExportInitFragment.js

@@ -31,6 +31,9 @@ const joinIterableWithComma = iterable => {
 const EMPTY_MAP = new Map();
 const EMPTY_SET = new Set();
 
+/**
+ * @typedef {GenerateContext} Context
+ */
 class HarmonyExportInitFragment extends InitFragment {
 	/**
 	 * @param {string} exportsArgument the exports identifier
@@ -126,7 +129,7 @@ class HarmonyExportInitFragment extends InitFragment {
 	}
 
 	/**
-	 * @param {GenerateContext} generateContext context for generate
+	 * @param {Context} context context
 	 * @returns {string|Source} the source code that will be included as initialization code
 	 */
 	getContent({ runtimeTemplate, runtimeRequirements }) {

package/lib/dependencies/WorkerPlugin.js

@@ -48,9 +48,10 @@ const DEFAULT_SYNTAX = [
 const workerIndexMap = new WeakMap();
 
 class WorkerPlugin {
-	constructor(chunkLoading, wasmLoading) {
+	constructor(chunkLoading, wasmLoading, module) {
 		this._chunkLoading = chunkLoading;
 		this._wasmLoading = wasmLoading;
+		this._module = module;
 	}
 	/**
 	 * Apply the plugin
@@ -311,31 +312,45 @@ class WorkerPlugin {
 						if (expressions.type) {
 							const expr = expressions.type;
 							if (options.type !== false) {
-								const dep = new ConstDependency("undefined", expr.range);
+								const dep = new ConstDependency(
+									this._module ? '"module"' : "undefined",
+									expr.range
+								);
 								dep.loc = expr.loc;
 								parser.state.module.addPresentationalDependency(dep);
 								expressions.type = undefined;
 							}
-						} else if (hasSpreadInOptions && insertType === "comma") {
-							const dep = new ConstDependency(
-								", type: undefined",
-								insertLocation
-							);
-							dep.loc = expr.loc;
-							parser.state.module.addPresentationalDependency(dep);
+						} else if (insertType === "comma") {
+							if (this._module || hasSpreadInOptions) {
+								const dep = new ConstDependency(
+									`, type: ${this._module ? '"module"' : "undefined"}`,
+									insertLocation
+								);
+								dep.loc = expr.loc;
+								parser.state.module.addPresentationalDependency(dep);
+							}
 						} else if (insertType === "spread") {
 							const dep1 = new ConstDependency(
 								"Object.assign({}, ",
 								insertLocation[0]
 							);
 							const dep2 = new ConstDependency(
-								", { type: undefined })",
+								`, { type: ${this._module ? '"module"' : "undefined"} })`,
 								insertLocation[1]
 							);
 							dep1.loc = expr.loc;
 							dep2.loc = expr.loc;
 							parser.state.module.addPresentationalDependency(dep1);
 							parser.state.module.addPresentationalDependency(dep2);
+						} else if (insertType === "argument") {
+							if (this._module) {
+								const dep = new ConstDependency(
+									', { type: "module" }',
+									insertLocation
+								);
+								dep.loc = expr.loc;
+								parser.state.module.addPresentationalDependency(dep);
+							}
 						}
 
 						parser.walkExpression(expr.callee);

package/lib/electron/ElectronTargetPlugin.js

@@ -22,7 +22,7 @@ class ElectronTargetPlugin {
 	 * @returns {void}
 	 */
 	apply(compiler) {
-		new ExternalsPlugin("commonjs", [
+		new ExternalsPlugin("node-commonjs", [
 			"clipboard",
 			"crash-reporter",
 			"electron",
@@ -34,7 +34,7 @@ class ElectronTargetPlugin {
 		]).apply(compiler);
 		switch (this._context) {
 			case "main":
-				new ExternalsPlugin("commonjs", [
+				new ExternalsPlugin("node-commonjs", [
 					"app",
 					"auto-updater",
 					"browser-window",
@@ -54,7 +54,7 @@ class ElectronTargetPlugin {
 				break;
 			case "preload":
 			case "renderer":
-				new ExternalsPlugin("commonjs", [
+				new ExternalsPlugin("node-commonjs", [
 					"desktop-capturer",
 					"ipc-renderer",
 					"remote",

package/lib/esm/ModuleChunkFormatPlugin.js

@@ -0,0 +1,97 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+
+"use strict";
+
+const { ConcatSource } = require("webpack-sources");
+const { RuntimeGlobals } = require("..");
+const HotUpdateChunk = require("../HotUpdateChunk");
+const Template = require("../Template");
+const {
+	getCompilationHooks
+} = require("../javascript/JavascriptModulesPlugin");
+
+/** @typedef {import("../Compiler")} Compiler */
+
+class ModuleChunkFormatPlugin {
+	/**
+	 * Apply the plugin
+	 * @param {Compiler} compiler the compiler instance
+	 * @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.onChunksLoaded);
+							set.add(RuntimeGlobals.require);
+						}
+					}
+				);
+				const hooks = getCompilationHooks(compilation);
+				hooks.renderChunk.tap(
+					"ModuleChunkFormatPlugin",
+					(modules, renderContext) => {
+						const { chunk, chunkGraph } = 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 id = ${JSON.stringify(chunk.id)};\n`);
+							source.add(`export const ids = ${JSON.stringify(chunk.ids)};\n`);
+							source.add(`export const modules = `);
+							source.add(modules);
+							source.add(`;\n`);
+							const runtimeModules =
+								chunkGraph.getChunkRuntimeModulesInOrder(chunk);
+							if (runtimeModules.length > 0) {
+								source.add("export const runtime =\n");
+								source.add(
+									Template.renderChunkRuntimeModules(
+										runtimeModules,
+										renderContext
+									)
+								);
+							}
+							const entries = Array.from(
+								chunkGraph.getChunkEntryModulesWithChunkGroupIterable(chunk)
+							);
+							if (entries.length > 0) {
+								throw new Error(
+									"Entry modules in chunk is not implemented for module chunk format yet"
+								);
+							}
+						}
+						return source;
+					}
+				);
+				hooks.chunkHash.tap(
+					"ModuleChunkFormatPlugin",
+					(chunk, hash, { chunkGraph, runtimeTemplate }) => {
+						if (chunk.hasRuntime()) return;
+						hash.update("ModuleChunkFormatPlugin");
+						hash.update("1");
+						// TODO
+						// const entries = Array.from(
+						// 	chunkGraph.getChunkEntryModulesWithChunkGroupIterable(chunk)
+						// );
+						// updateHashForEntryStartup(hash, chunkGraph, entries, chunk);
+					}
+				);
+			}
+		);
+	}
+}
+
+module.exports = ModuleChunkFormatPlugin;

package/lib/esm/ModuleChunkLoadingPlugin.js

@@ -0,0 +1,63 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+
+"use strict";
+
+const RuntimeGlobals = require("../RuntimeGlobals");
+const ModuleChunkLoadingRuntimeModule = require("./ModuleChunkLoadingRuntimeModule");
+
+/** @typedef {import("../Compiler")} Compiler */
+
+class ModuleChunkLoadingPlugin {
+	/**
+	 * Apply the plugin
+	 * @param {Compiler} compiler the compiler instance
+	 * @returns {void}
+	 */
+	apply(compiler) {
+		compiler.hooks.thisCompilation.tap(
+			"ModuleChunkLoadingPlugin",
+			compilation => {
+				const globalChunkLoading = compilation.outputOptions.chunkLoading;
+				const isEnabledForChunk = chunk => {
+					const options = chunk.getEntryOptions();
+					const chunkLoading =
+						(options && options.chunkLoading) || globalChunkLoading;
+					return chunkLoading === "import";
+				};
+				const onceForChunkSet = new WeakSet();
+				const handler = (chunk, set) => {
+					if (onceForChunkSet.has(chunk)) return;
+					onceForChunkSet.add(chunk);
+					if (!isEnabledForChunk(chunk)) return;
+					set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+					set.add(RuntimeGlobals.hasOwnProperty);
+					compilation.addRuntimeModule(
+						chunk,
+						new ModuleChunkLoadingRuntimeModule(set)
+					);
+				};
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.ensureChunkHandlers)
+					.tap("ModuleChunkLoadingPlugin", handler);
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.baseURI)
+					.tap("ModuleChunkLoadingPlugin", handler);
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.onChunksLoaded)
+					.tap("ModuleChunkLoadingPlugin", handler);
+
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.ensureChunkHandlers)
+					.tap("ModuleChunkLoadingPlugin", (chunk, set) => {
+						if (!isEnabledForChunk(chunk)) return;
+						set.add(RuntimeGlobals.getChunkScriptFilename);
+					});
+			}
+		);
+	}
+}
+
+module.exports = ModuleChunkLoadingPlugin;