webpack 5.64.3 → 5.67.0

package/README.md

@@ -687,7 +687,7 @@ src="https://static.monei.net/monei-logo.svg" height="30" alt="MONEI"></a>
 
 - [@google](https://github.com/google) for [Google Web Toolkit (GWT)](http://www.gwtproject.org/), which aims to compile Java to JavaScript. It features a similar [Code Splitting](http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html) as webpack.
 - [@medikoo](https://github.com/medikoo) for [modules-webmake](https://github.com/medikoo/modules-webmake), which is a similar project. webpack was born because I wanted Code Splitting for modules-webmake. Interestingly the [Code Splitting issue is still open](https://github.com/medikoo/modules-webmake/issues/7) (thanks also to @Phoscur for the discussion).
-- [@substack](https://github.com/substack) for [browserify](http://browserify.org/), which is a similar project and source for many ideas.
+- [@substack](https://github.com/substack) for [browserify](https://browserify.org/), which is a similar project and source for many ideas.
 - [@jrburke](https://github.com/jrburke) for [require.js](https://requirejs.org/), which is a similar project and source for many ideas.
 - [@defunctzombie](https://github.com/defunctzombie) for the [browser-field spec](https://github.com/defunctzombie/package-browser-field-spec), which makes modules available for node.js, browserify and webpack.
 - Every early webpack user, which contributed to webpack by writing issues or PRs. You influenced the direction...

package/lib/Cache.js

@@ -21,7 +21,7 @@ const {
 /**
  * @template T
  * @callback CallbackCache
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {T=} result
  * @returns {void}
  */

package/lib/CacheFacade.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { forEachBail } = require("enhanced-resolve");
 const asyncLib = require("neo-async");
 const getLazyHashedEtag = require("./cache/getLazyHashedEtag");
 const mergeEtags = require("./cache/mergeEtags");
@@ -18,7 +19,7 @@ const mergeEtags = require("./cache/mergeEtags");
 /**
  * @template T
  * @callback CallbackCache
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {T=} result
  * @returns {void}
  */
@@ -26,7 +27,7 @@ const mergeEtags = require("./cache/mergeEtags");
 /**
  * @template T
  * @callback CallbackNormalErrorCache
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  * @returns {void}
  */
@@ -46,15 +47,7 @@ class MultiItemCache {
 	 * @returns {void}
 	 */
 	get(callback) {
-		const next = i => {
-			this._items[i].get((err, result) => {
-				if (err) return callback(err);
-				if (result !== undefined) return callback(null, result);
-				if (++i >= this._items.length) return callback();
-				next(i);
-			});
-		};
-		next(0);
+		forEachBail(this._items, (item, callback) => item.get(callback), callback);
 	}
 
 	/**

package/lib/Chunk.js

@@ -80,6 +80,8 @@ class Chunk {
 		this.preventIntegration = false;
 		/** @type {(string | function(PathData, AssetInfo=): string)?} */
 		this.filenameTemplate = undefined;
+		/** @type {(string | function(PathData, AssetInfo=): string)?} */
+		this.cssFilenameTemplate = undefined;
 		/** @private @type {SortableSet<ChunkGroup>} */
 		this._groups = new SortableSet(undefined, compareChunkGroupsByIndex);
 		/** @type {RuntimeSpec} */

package/lib/CleanPlugin.js

@@ -45,7 +45,7 @@ const validate = createSchemaValidation(
  * @param {OutputFileSystem} fs filesystem
  * @param {string} outputPath output path
  * @param {Set<string>} currentAssets filename of the current assets (must not start with .. or ., must only use / as path separator)
- * @param {function(Error=, Set<string>=): void} callback returns the filenames of the assets that shouldn't be there
+ * @param {function((Error | null)=, Set<string>=): void} callback returns the filenames of the assets that shouldn't be there
  * @returns {void}
  */
 const getDiffToFs = (fs, outputPath, currentAssets, callback) => {

package/lib/Compilation.js

@@ -116,34 +116,34 @@ const { isSourceEqual } = require("./util/source");
 
 /**
  * @callback Callback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @returns {void}
  */
 
 /**
  * @callback ModuleCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {Module=} result
  * @returns {void}
  */
 
 /**
  * @callback ModuleFactoryResultCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {ModuleFactoryResult=} result
  * @returns {void}
  */
 
 /**
  * @callback ModuleOrFactoryResultCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {Module | ModuleFactoryResult=} result
  * @returns {void}
  */
 
 /**
  * @callback ExecuteModuleCallback
- * @param {WebpackError=} err
+ * @param {(WebpackError | null)=} err
  * @param {ExecuteModuleResult=} result
  * @returns {void}
  */
@@ -1020,7 +1020,9 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		/** @type {Map<DepConstructor, ModuleFactory>} */
 		this.dependencyFactories = new Map();
 		/** @type {DependencyTemplates} */
-		this.dependencyTemplates = new DependencyTemplates();
+		this.dependencyTemplates = new DependencyTemplates(
+			this.outputOptions.hashFunction
+		);
 		this.childrenCounters = {};
 		/** @type {Set<number|string>} */
 		this.usedChunkIds = null;
@@ -3193,47 +3195,87 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 			this;
 		const results = this.codeGenerationResults;
 		const errors = [];
-		asyncLib.eachLimit(
-			jobs,
-			this.options.parallelism,
-			({ module, hash, runtime, runtimes }, callback) => {
-				this._codeGenerationModule(
-					module,
-					runtime,
-					runtimes,
-					hash,
-					dependencyTemplates,
-					chunkGraph,
-					moduleGraph,
-					runtimeTemplate,
-					errors,
-					results,
-					(err, codeGenerated) => {
-						if (codeGenerated) statModulesGenerated++;
-						else statModulesFromCache++;
-						callback(err);
+		/** @type {Set<Module> | undefined} */
+		let notCodeGeneratedModules = undefined;
+		const runIteration = () => {
+			let delayedJobs = [];
+			let delayedModules = new Set();
+			asyncLib.eachLimit(
+				jobs,
+				this.options.parallelism,
+				(job, callback) => {
+					const { module } = job;
+					const { codeGenerationDependencies } = module;
+					if (codeGenerationDependencies !== undefined) {
+						if (
+							notCodeGeneratedModules === undefined ||
+							codeGenerationDependencies.some(dep => {
+								const referencedModule = moduleGraph.getModule(dep);
+								return notCodeGeneratedModules.has(referencedModule);
+							})
+						) {
+							delayedJobs.push(job);
+							delayedModules.add(module);
+							return callback();
+						}
 					}
-				);
-			},
-			err => {
-				if (err) return callback(err);
-				if (errors.length > 0) {
-					errors.sort(
-						compareSelect(err => err.module, compareModulesByIdentifier)
+					const { hash, runtime, runtimes } = job;
+					this._codeGenerationModule(
+						module,
+						runtime,
+						runtimes,
+						hash,
+						dependencyTemplates,
+						chunkGraph,
+						moduleGraph,
+						runtimeTemplate,
+						errors,
+						results,
+						(err, codeGenerated) => {
+							if (codeGenerated) statModulesGenerated++;
+							else statModulesFromCache++;
+							callback(err);
+						}
 					);
-					for (const error of errors) {
-						this.errors.push(error);
+				},
+				err => {
+					if (err) return callback(err);
+					if (delayedJobs.length > 0) {
+						if (delayedJobs.length === jobs.length) {
+							return callback(
+								new Error(
+									`Unable to make progress during code generation because of circular code generation dependency: ${Array.from(
+										delayedModules,
+										m => m.identifier()
+									).join(", ")}`
+								)
+							);
+						}
+						jobs = delayedJobs;
+						delayedJobs = [];
+						notCodeGeneratedModules = delayedModules;
+						delayedModules = new Set();
+						return runIteration();
+					}
+					if (errors.length > 0) {
+						errors.sort(
+							compareSelect(err => err.module, compareModulesByIdentifier)
+						);
+						for (const error of errors) {
+							this.errors.push(error);
+						}
 					}
+					this.logger.log(
+						`${Math.round(
+							(100 * statModulesGenerated) /
+								(statModulesGenerated + statModulesFromCache)
+						)}% code generated (${statModulesGenerated} generated, ${statModulesFromCache} from cache)`
+					);
+					callback();
 				}
-				this.logger.log(
-					`${Math.round(
-						(100 * statModulesGenerated) /
-							(statModulesGenerated + statModulesFromCache)
-					)}% code generated (${statModulesGenerated} generated, ${statModulesFromCache} from cache)`
-				);
-				callback();
-			}
-		);
+			);
+		};
+		runIteration();
 	}
 
 	/**
@@ -3283,7 +3325,8 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 						moduleGraph,
 						dependencyTemplates,
 						runtimeTemplate,
-						runtime
+						runtime,
+						codeGenerationResults: results
 					});
 				} catch (err) {
 					errors.push(new CodeGenerationError(module, err));
@@ -3512,10 +3555,11 @@ Or do you want to use the entrypoints '${name}' and '${runtime}' independently o
 	}
 
 	/**
+	 * If `module` is passed, `loc` and `request` must also be passed.
 	 * @param {string | ChunkGroupOptions} groupOptions options for the chunk group
-	 * @param {Module} module the module the references the chunk group
-	 * @param {DependencyLocation} loc the location from with the chunk group is referenced (inside of module)
-	 * @param {string} request the request from which the the chunk group is referenced
+	 * @param {Module=} module the module the references the chunk group
+	 * @param {DependencyLocation=} loc the location from with the chunk group is referenced (inside of module)
+	 * @param {string=} request the request from which the the chunk group is referenced
 	 * @returns {ChunkGroup} the new or existing chunk group
 	 */
 	addChunkInGroup(groupOptions, module, loc, request) {

package/lib/Compiler.js

@@ -58,13 +58,13 @@ const { isSourceEqual } = require("./util/source");
 /**
  * @template T
  * @callback Callback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  */
 
 /**
  * @callback RunAsChildCallback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {Chunk[]=} entries
  * @param {Compilation=} compilation
  */
@@ -165,6 +165,11 @@ class Compiler {
 			/** @type {AsyncSeriesHook<[Compilation]>} */
 			afterCompile: new AsyncSeriesHook(["compilation"]),
 
+			/** @type {AsyncSeriesHook<[]>} */
+			readRecords: new AsyncSeriesHook([]),
+			/** @type {AsyncSeriesHook<[]>} */
+			emitRecords: new AsyncSeriesHook([]),
+
 			/** @type {AsyncSeriesHook<[Compiler]>} */
 			watchRun: new AsyncSeriesHook(["compiler"]),
 			/** @type {SyncHook<[Error]>} */
@@ -882,8 +887,32 @@ ${other}`);
 	 * @returns {void}
 	 */
 	emitRecords(callback) {
-		if (!this.recordsOutputPath) return callback();
+		if (this.hooks.emitRecords.isUsed()) {
+			if (this.recordsOutputPath) {
+				asyncLib.parallel(
+					[
+						cb => this.hooks.emitRecords.callAsync(cb),
+						this._emitRecords.bind(this)
+					],
+					err => callback(err)
+				);
+			} else {
+				this.hooks.emitRecords.callAsync(callback);
+			}
+		} else {
+			if (this.recordsOutputPath) {
+				this._emitRecords(callback);
+			} else {
+				callback();
+			}
+		}
+	}
 
+	/**
+	 * @param {Callback<void>} callback signals when the call finishes
+	 * @returns {void}
+	 */
+	_emitRecords(callback) {
 		const writeFile = () => {
 			this.outputFileSystem.writeFile(
 				this.recordsOutputPath,
@@ -926,6 +955,31 @@ ${other}`);
 	 * @returns {void}
 	 */
 	readRecords(callback) {
+		if (this.hooks.readRecords.isUsed()) {
+			if (this.recordsInputPath) {
+				asyncLib.parallel([
+					cb => this.hooks.readRecords.callAsync(cb),
+					this._readRecords.bind(this)
+				]);
+			} else {
+				this.records = {};
+				this.hooks.readRecords.callAsync(callback);
+			}
+		} else {
+			if (this.recordsInputPath) {
+				this._readRecords(callback);
+			} else {
+				this.records = {};
+				callback();
+			}
+		}
+	}
+
+	/**
+	 * @param {Callback<void>} callback signals when the call finishes
+	 * @returns {void}
+	 */
+	_readRecords(callback) {
 		if (!this.recordsInputPath) {
 			this.records = {};
 			return callback();

package/lib/ContextModule.js

@@ -71,7 +71,7 @@ const makeSerializable = require("./util/makeSerializable");
 
 /**
  * @callback ResolveDependenciesCallback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {ContextElementDependency[]=} dependencies
  */
 
@@ -149,12 +149,9 @@ class ContextModule extends Module {
 		this.resolveDependencies = undefined;
 	}
 
-	prettyRegExp(regexString) {
-		// remove the "/" at the front and the beginning
-		// "/foo/" -> "foo"
-		return regexString
-			.substring(1, regexString.length - 1)
-			.replace(/!/g, "%21");
+	_prettyRegExp(regexString, stripSlash = true) {
+		const str = (regexString + "").replace(/!/g, "%21").replace(/\|/g, "%7C");
+		return stripSlash ? str.substring(1, str.length - 1) : str;
 	}
 
 	_createIdentifier() {
@@ -175,13 +172,19 @@ class ContextModule extends Module {
 			identifier += `|${this.options.addon}`;
 		}
 		if (this.options.regExp) {
-			identifier += `|${this.options.regExp}`;
+			identifier += `|${this._prettyRegExp(this.options.regExp, false)}`;
 		}
 		if (this.options.include) {
-			identifier += `|include: ${this.options.include}`;
+			identifier += `|include: ${this._prettyRegExp(
+				this.options.include,
+				false
+			)}`;
 		}
 		if (this.options.exclude) {
-			identifier += `|exclude: ${this.options.exclude}`;
+			identifier += `|exclude: ${this._prettyRegExp(
+				this.options.exclude,
+				false
+			)}`;
 		}
 		if (this.options.referencedExports) {
 			identifier += `|referencedExports: ${JSON.stringify(
@@ -231,13 +234,13 @@ class ContextModule extends Module {
 			identifier += ` ${requestShortener.shorten(this.options.addon)}`;
 		}
 		if (this.options.regExp) {
-			identifier += ` ${this.prettyRegExp(this.options.regExp + "")}`;
+			identifier += ` ${this._prettyRegExp(this.options.regExp)}`;
 		}
 		if (this.options.include) {
-			identifier += ` include: ${this.prettyRegExp(this.options.include + "")}`;
+			identifier += ` include: ${this._prettyRegExp(this.options.include)}`;
 		}
 		if (this.options.exclude) {
-			identifier += ` exclude: ${this.prettyRegExp(this.options.exclude + "")}`;
+			identifier += ` exclude: ${this._prettyRegExp(this.options.exclude)}`;
 		}
 		if (this.options.referencedExports) {
 			identifier += ` referencedExports: ${this.options.referencedExports
@@ -272,6 +275,7 @@ class ContextModule extends Module {
 			this.context,
 			options.associatedObjectForCache
 		);
+		if (this.layer) identifier = `(${this.layer})/${identifier}`;
 		if (this.options.mode) {
 			identifier += ` ${this.options.mode}`;
 		}
@@ -286,13 +290,13 @@ class ContextModule extends Module {
 			)}`;
 		}
 		if (this.options.regExp) {
-			identifier += ` ${this.prettyRegExp(this.options.regExp + "")}`;
+			identifier += ` ${this._prettyRegExp(this.options.regExp)}`;
 		}
 		if (this.options.include) {
-			identifier += ` include: ${this.prettyRegExp(this.options.include + "")}`;
+			identifier += ` include: ${this._prettyRegExp(this.options.include)}`;
 		}
 		if (this.options.exclude) {
-			identifier += ` exclude: ${this.prettyRegExp(this.options.exclude + "")}`;
+			identifier += ` exclude: ${this._prettyRegExp(this.options.exclude)}`;
 		}
 		if (this.options.referencedExports) {
 			identifier += ` referencedExports: ${this.options.referencedExports
@@ -312,7 +316,7 @@ class ContextModule 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({ fileSystemInfo }, callback) {

package/lib/DelegatedModule.js

@@ -91,7 +91,7 @@ class DelegatedModule 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) {

package/lib/Dependency.js

@@ -172,6 +172,16 @@ class Dependency {
 		this._loc = loc;
 	}
 
+	setLoc(startLine, startColumn, endLine, endColumn) {
+		this._locSL = startLine;
+		this._locSC = startColumn;
+		this._locEL = endLine;
+		this._locEC = endColumn;
+		this._locI = undefined;
+		this._locN = undefined;
+		this._loc = undefined;
+	}
+
 	/**
 	 * @returns {string | null} an identifier to merge equal requests
 	 */

package/lib/DependencyTemplate.js

@@ -7,6 +7,7 @@
 
 /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("./ConcatenationScope")} ConcatenationScope */
 /** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Dependency").RuntimeSpec} RuntimeSpec */
@@ -28,8 +29,16 @@
  * @property {RuntimeSpec} runtime current runtimes, for which code is generated
  * @property {InitFragment<GenerateContext>[]} initFragments mutable array of init fragments for the current module
  * @property {ConcatenationScope=} concatenationScope when in a concatenated module, information about other concatenated modules
+ * @property {CodeGenerationResults} codeGenerationResults the code generation results
  */
 
+/**
+ * @typedef {Object} CssDependencyTemplateContextExtras
+ * @property {Map<string, string>} cssExports the css exports
+ */
+
+/** @typedef {DependencyTemplateContext & CssDependencyTemplateContextExtras} CssDependencyTemplateContext */
+
 class DependencyTemplate {
 	/* istanbul ignore next */
 	/**

package/lib/DependencyTemplates.js

@@ -57,7 +57,7 @@ class DependencyTemplates {
 	}
 
 	clone() {
-		const newInstance = new DependencyTemplates();
+		const newInstance = new DependencyTemplates(this._hashFunction);
 		newInstance._map = new Map(this._map);
 		newInstance._hash = this._hash;
 		return newInstance;

package/lib/DllModule.js

@@ -96,7 +96,7 @@ class DllModule 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) {

package/lib/EvalDevToolModulePlugin.js

@@ -8,6 +8,7 @@
 const { ConcatSource, RawSource } = require("webpack-sources");
 const ExternalModule = require("./ExternalModule");
 const ModuleFilenameHelpers = require("./ModuleFilenameHelpers");
+const RuntimeGlobals = require("./RuntimeGlobals");
 const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -77,7 +78,13 @@ class EvalDevToolModulePlugin {
 								.replace(/^\//, "")
 						);
 					const result = new RawSource(
-						`eval(${JSON.stringify(content + footer)});`
+						`eval(${
+							compilation.outputOptions.trustedTypes
+								? `${RuntimeGlobals.createScript}(${JSON.stringify(
+										content + footer
+								  )})`
+								: JSON.stringify(content + footer)
+						});`
 					);
 					cache.set(source, result);
 					return result;
@@ -95,6 +102,14 @@ class EvalDevToolModulePlugin {
 				hash.update("EvalDevToolModulePlugin");
 				hash.update("2");
 			});
+			if (compilation.outputOptions.trustedTypes) {
+				compilation.hooks.additionalModuleRuntimeRequirements.tap(
+					"EvalDevToolModulePlugin",
+					(module, set, context) => {
+						set.add(RuntimeGlobals.createScript);
+					}
+				);
+			}
 		});
 	}
 }

package/lib/EvalSourceMapDevToolPlugin.js

@@ -8,6 +8,7 @@
 const { ConcatSource, RawSource } = require("webpack-sources");
 const ModuleFilenameHelpers = require("./ModuleFilenameHelpers");
 const NormalModule = require("./NormalModule");
+const RuntimeGlobals = require("./RuntimeGlobals");
 const SourceMapDevToolModuleOptionsPlugin = require("./SourceMapDevToolModuleOptionsPlugin");
 const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 const ConcatenatedModule = require("./optimize/ConcatenatedModule");
@@ -165,7 +166,15 @@ class EvalSourceMapDevToolPlugin {
 							) + `\n//# sourceURL=webpack-internal:///${moduleId}\n`; // workaround for chrome bug
 
 						return result(
-							new RawSource(`eval(${JSON.stringify(content + footer)});`)
+							new RawSource(
+								`eval(${
+									compilation.outputOptions.trustedTypes
+										? `${RuntimeGlobals.createScript}(${JSON.stringify(
+												content + footer
+										  )})`
+										: JSON.stringify(content + footer)
+								});`
+							)
 						);
 					}
 				);
@@ -181,6 +190,14 @@ class EvalSourceMapDevToolPlugin {
 					hash.update("EvalSourceMapDevToolPlugin");
 					hash.update("2");
 				});
+				if (compilation.outputOptions.trustedTypes) {
+					compilation.hooks.additionalModuleRuntimeRequirements.tap(
+						"EvalSourceMapDevToolPlugin",
+						(module, set, context) => {
+							set.add(RuntimeGlobals.createScript);
+						}
+					);
+				}
 			}
 		);
 	}