webpack 5.85.1 → 5.87.0

package/lib/ModuleInfoHeaderPlugin.js

@@ -15,10 +15,16 @@ const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 /** @typedef {import("./ExportsInfo")} ExportsInfo */
 /** @typedef {import("./ExportsInfo").ExportInfo} ExportInfo */
 /** @typedef {import("./Module")} Module */
+/** @typedef {import("./Module").BuildMeta} BuildMeta */
 /** @typedef {import("./ModuleGraph")} ModuleGraph */
 /** @typedef {import("./ModuleTemplate")} ModuleTemplate */
 /** @typedef {import("./RequestShortener")} RequestShortener */
 
+/**
+ * @template T
+ * @param {Iterable<T>} iterable iterable
+ * @returns {string} joined with comma
+ */
 const joinIterableWithComma = iterable => {
 	// This is more performant than Array.from().join(", ")
 	// as it doesn't create an array
@@ -139,7 +145,7 @@ const printExportsInfoToSource = (
 	}
 };
 
-/** @type {WeakMap<RequestShortener, WeakMap<Module, { header: RawSource, full: WeakMap<Source, CachedSource> }>>} */
+/** @type {WeakMap<RequestShortener, WeakMap<Module, { header: RawSource | undefined, full: WeakMap<Source, CachedSource> }>>} */
 const caches = new WeakMap();
 
 class ModuleInfoHeaderPlugin {
@@ -197,7 +203,8 @@ class ModuleInfoHeaderPlugin {
 					}
 					source.add(header);
 					if (verbose) {
-						const exportsType = module.buildMeta.exportsType;
+						const exportsType = /** @type {BuildMeta} */ (module.buildMeta)
+							.exportsType;
 						source.add(
 							Template.toComment(
 								exportsType

package/lib/ModuleNotFoundError.js

@@ -43,7 +43,7 @@ const previouslyPolyfilledBuiltinModules = {
 
 class ModuleNotFoundError extends WebpackError {
 	/**
-	 * @param {Module} module module tied to dependency
+	 * @param {Module | null} module module tied to dependency
 	 * @param {Error&any} err error thrown
 	 * @param {DependencyLocation} loc location of dependency
 	 */
@@ -54,7 +54,10 @@ class ModuleNotFoundError extends WebpackError {
 		const match = err.message.match(/Can't resolve '([^']+)'/);
 		if (match) {
 			const request = match[1];
-			const alias = previouslyPolyfilledBuiltinModules[request];
+			const alias =
+				previouslyPolyfilledBuiltinModules[
+					/** @type {keyof previouslyPolyfilledBuiltinModules} */ (request)
+				];
 			if (alias) {
 				const pathIndex = alias.indexOf("/");
 				const dependency = pathIndex > 0 ? alias.slice(0, pathIndex) : alias;

package/lib/ModuleStoreError.js

@@ -16,6 +16,7 @@ class ModuleStoreError extends WebpackError {
 	 */
 	constructor(module, err) {
 		let message = "Module storing failed: ";
+		/** @type {string | undefined} */
 		let details = undefined;
 		if (err !== null && typeof err === "object") {
 			if (typeof err.stack === "string" && err.stack) {
@@ -33,7 +34,7 @@ class ModuleStoreError extends WebpackError {
 		super(message);
 
 		this.name = "ModuleStoreError";
-		this.details = details;
+		this.details = /** @type {string | undefined} */ (details);
 		this.module = module;
 		this.error = err;
 	}

package/lib/ModuleTypeConstants.js

@@ -60,6 +60,12 @@ const CSS_MODULE_TYPE_GLOBAL = "css/global";
  */
 const CSS_MODULE_TYPE_MODULE = "css/module";
 
+/**
+ * @type {Readonly<"css/auto">}
+ * This is the module type used for CSS files, the module will be parsed as CSS modules if it's filename contains `.module.` or `.modules.`.
+ */
+const CSS_MODULE_TYPE_AUTO = "css/auto";
+
 /**
  * @type {Readonly<"asset">}
  * This is the module type used for automatically choosing between `asset/inline`, `asset/resource` based on asset size limit (8096).
@@ -152,6 +158,7 @@ exports.WEBASSEMBLY_MODULE_TYPE_SYNC = WEBASSEMBLY_MODULE_TYPE_SYNC;
 exports.CSS_MODULE_TYPE = CSS_MODULE_TYPE;
 exports.CSS_MODULE_TYPE_GLOBAL = CSS_MODULE_TYPE_GLOBAL;
 exports.CSS_MODULE_TYPE_MODULE = CSS_MODULE_TYPE_MODULE;
+exports.CSS_MODULE_TYPE_AUTO = CSS_MODULE_TYPE_AUTO;
 exports.WEBPACK_MODULE_TYPE_RUNTIME = WEBPACK_MODULE_TYPE_RUNTIME;
 exports.WEBPACK_MODULE_TYPE_FALLBACK = WEBPACK_MODULE_TYPE_FALLBACK;
 exports.WEBPACK_MODULE_TYPE_REMOTE = WEBPACK_MODULE_TYPE_REMOTE;

package/lib/MultiWatching.js

@@ -27,6 +27,10 @@ class MultiWatching {
 		this.compiler = compiler;
 	}
 
+	/**
+	 * @param {Callback<void>=} callback signals when the build has completed again
+	 * @returns {void}
+	 */
 	invalidate(callback) {
 		if (callback) {
 			asyncLib.each(

package/lib/ProgressPlugin.js

@@ -11,9 +11,20 @@ const NormalModule = require("./NormalModule");
 const createSchemaValidation = require("./util/create-schema-validation");
 const { contextify } = require("./util/identifier");
 
+/** @typedef {import("tapable").Tap} Tap */
 /** @typedef {import("../declarations/plugins/ProgressPlugin").HandlerFunction} HandlerFunction */
 /** @typedef {import("../declarations/plugins/ProgressPlugin").ProgressPluginArgument} ProgressPluginArgument */
 /** @typedef {import("../declarations/plugins/ProgressPlugin").ProgressPluginOptions} ProgressPluginOptions */
+/** @typedef {import("./Dependency")} Dependency */
+/** @typedef {import("./Entrypoint").EntryOptions} EntryOptions */
+/** @typedef {import("./Module")} Module */
+/** @typedef {import("./logging/Logger").Logger} Logger */
+
+/**
+ * @typedef {Object} CountsData
+ * @property {number} modulesCount modules count
+ * @property {number} dependenciesCount dependencies count
+ */
 
 const validate = createSchemaValidation(
 	require("../schemas/plugins/ProgressPlugin.check.js"),
@@ -23,14 +34,31 @@ const validate = createSchemaValidation(
 		baseDataPath: "options"
 	}
 );
+
+/**
+ * @param {number} a a
+ * @param {number} b b
+ * @param {number} c c
+ * @returns {number} median
+ */
 const median3 = (a, b, c) => {
 	return a + b + c - Math.max(a, b, c) - Math.min(a, b, c);
 };
 
+/**
+ * @param {boolean | null | undefined} profile need profile
+ * @param {Logger} logger logger
+ * @returns {defaultHandler} default handler
+ */
 const createDefaultHandler = (profile, logger) => {
-	/** @type {{ value: string, time: number }[]} */
+	/** @type {{ value: string | undefined, time: number }[]} */
 	const lastStateInfo = [];
 
+	/**
+	 * @param {number} percentage percentage
+	 * @param {string} msg message
+	 * @param {...string} args additional arguments
+	 */
 	const defaultHandler = (percentage, msg, ...args) => {
 		if (profile) {
 			if (percentage === 0) {
@@ -95,18 +123,18 @@ const createDefaultHandler = (profile, logger) => {
 
 /**
  * @callback ReportProgress
- * @param {number} p
- * @param {...string} [args]
+ * @param {number} p percentage
+ * @param {...string} args additional arguments
  * @returns {void}
  */
 
-/** @type {WeakMap<Compiler,ReportProgress>} */
+/** @type {WeakMap<Compiler, ReportProgress | undefined>} */
 const progressReporters = new WeakMap();
 
 class ProgressPlugin {
 	/**
 	 * @param {Compiler} compiler the current compiler
-	 * @returns {ReportProgress} a progress reporter, if any
+	 * @returns {ReportProgress | undefined} a progress reporter, if any
 	 */
 	static getReporter(compiler) {
 		return progressReporters.get(compiler);
@@ -288,6 +316,9 @@ class ProgressPlugin {
 		};
 
 		// only used when showActiveModules is set
+		/**
+		 * @param {Module} module the module
+		 */
 		const moduleBuild = module => {
 			const ident = module.identifier();
 			if (ident) {
@@ -297,11 +328,18 @@ class ProgressPlugin {
 			}
 		};
 
+		/**
+		 * @param {Dependency} entry entry dependency
+		 * @param {EntryOptions} options options object
+		 */
 		const entryAdd = (entry, options) => {
 			entriesCount++;
 			if (entriesCount < 5 || entriesCount % 10 === 0) updateThrottled();
 		};
 
+		/**
+		 * @param {Module} module the module
+		 */
 		const moduleDone = module => {
 			doneModules++;
 			if (showActiveModules) {
@@ -321,6 +359,10 @@ class ProgressPlugin {
 			if (doneModules < 50 || doneModules % 100 === 0) updateThrottled();
 		};
 
+		/**
+		 * @param {Dependency} entry entry dependency
+		 * @param {EntryOptions} options options object
+		 */
 		const entryDone = (entry, options) => {
 			doneEntries++;
 			update();
@@ -330,6 +372,7 @@ class ProgressPlugin {
 			.getCache("ProgressPlugin")
 			.getItemCache("counts", null);
 
+		/** @type {Promise<CountsData> | undefined} */
 		let cacheGetPromise;
 
 		compiler.hooks.beforeCompile.tap("ProgressPlugin", () => {
@@ -352,15 +395,17 @@ class ProgressPlugin {
 
 		compiler.hooks.afterCompile.tapPromise("ProgressPlugin", compilation => {
 			if (compilation.compiler.isChild()) return Promise.resolve();
-			return cacheGetPromise.then(async oldData => {
-				if (
-					!oldData ||
-					oldData.modulesCount !== modulesCount ||
-					oldData.dependenciesCount !== dependenciesCount
-				) {
-					await cache.storePromise({ modulesCount, dependenciesCount });
+			return /** @type {Promise<CountsData>} */ (cacheGetPromise).then(
+				async oldData => {
+					if (
+						!oldData ||
+						oldData.modulesCount !== modulesCount ||
+						oldData.dependenciesCount !== dependenciesCount
+					) {
+						await cache.storePromise({ modulesCount, dependenciesCount });
+					}
 				}
-			});
+			);
 		});
 
 		compiler.hooks.compilation.tap("ProgressPlugin", compilation => {
@@ -463,9 +508,9 @@ class ProgressPlugin {
 			};
 			const numberOfHooks = Object.keys(hooks).length;
 			Object.keys(hooks).forEach((name, idx) => {
-				const title = hooks[name];
+				const title = hooks[/** @type {keyof typeof hooks} */ (name)];
 				const percentage = (idx / numberOfHooks) * 0.25 + 0.7;
-				compilation.hooks[name].intercept({
+				compilation.hooks[/** @type {keyof typeof hooks} */ (name)].intercept({
 					name: "ProgressPlugin",
 					call() {
 						handler(percentage, "sealing", title);
@@ -500,6 +545,12 @@ class ProgressPlugin {
 				handler(0.65, "building");
 			}
 		});
+		/**
+		 * @param {TODO} hook hook
+		 * @param {number} progress progress from 0 to 1
+		 * @param {string} category category
+		 * @param {string} name name
+		 */
 		const interceptHook = (hook, progress, category, name) => {
 			hook.intercept({
 				name: "ProgressPlugin",
@@ -516,6 +567,9 @@ class ProgressPlugin {
 				error() {
 					handler(progress, category, name);
 				},
+				/**
+				 * @param {Tap} tap tap
+				 */
 				tap(tap) {
 					progressReporters.set(compiler, (p, ...args) => {
 						handler(progress, category, name, tap.name, ...args);
@@ -610,4 +664,6 @@ ProgressPlugin.defaultOptions = {
 	entries: true
 };
 
+ProgressPlugin.createDefaultHandler = createDefaultHandler;
+
 module.exports = ProgressPlugin;

package/lib/RuntimeGlobals.js

@@ -188,6 +188,11 @@ exports.createScriptUrl = "__webpack_require__.tu";
  */
 exports.getTrustedTypesPolicy = "__webpack_require__.tt";
 
+/**
+ * a flag when a chunk has a fetch priority
+ */
+exports.hasFetchPriority = "has fetch priority";
+
 /**
  * the chunk name of the chunk with the runtime
  */

package/lib/RuntimePlugin.js

@@ -377,9 +377,10 @@ class RuntimePlugin {
 					if (withCreateScriptUrl) {
 						set.add(RuntimeGlobals.createScriptUrl);
 					}
+					const withFetchPriority = set.has(RuntimeGlobals.hasFetchPriority);
 					compilation.addRuntimeModule(
 						chunk,
-						new LoadScriptRuntimeModule(withCreateScriptUrl)
+						new LoadScriptRuntimeModule(withCreateScriptUrl, withFetchPriority)
 					);
 					return true;
 				});

package/lib/RuntimeTemplate.js

@@ -939,11 +939,29 @@ class RuntimeTemplate {
 		if (chunks.length === 1) {
 			const chunkId = JSON.stringify(chunks[0].id);
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
-			return `${RuntimeGlobals.ensureChunk}(${comment}${chunkId})`;
+
+			const fetchPriority = chunkGroup.options.fetchPriority;
+
+			if (fetchPriority) {
+				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
+			}
+
+			return `${RuntimeGlobals.ensureChunk}(${comment}${chunkId}${
+				fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
+			})`;
 		} else if (chunks.length > 0) {
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
+
+			const fetchPriority = chunkGroup.options.fetchPriority;
+
+			if (fetchPriority) {
+				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
+			}
+
 			const requireChunkId = chunk =>
-				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)})`;
+				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)}${
+					fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
+				})`;
 			return `Promise.all(${comment.trim()}[${chunks
 				.map(requireChunkId)
 				.join(", ")}])`;

package/lib/WebpackError.js

@@ -22,16 +22,17 @@ class WebpackError extends Error {
 	constructor(message) {
 		super(message);
 
+		/** @type {string | undefined} */
 		this.details = undefined;
-		/** @type {Module} */
+		/** @type {Module | undefined | null} */
 		this.module = undefined;
-		/** @type {DependencyLocation} */
+		/** @type {DependencyLocation | undefined} */
 		this.loc = undefined;
-		/** @type {boolean} */
+		/** @type {boolean | undefined} */
 		this.hideStack = undefined;
-		/** @type {Chunk} */
+		/** @type {Chunk | undefined} */
 		this.chunk = undefined;
-		/** @type {string} */
+		/** @type {string | undefined} */
 		this.file = undefined;
 	}
 

package/lib/WebpackOptionsApply.js

@@ -368,7 +368,9 @@ class WebpackOptionsApply extends OptionsApply {
 			const NodeStuffPlugin = require("./NodeStuffPlugin");
 			new NodeStuffPlugin(options.node).apply(compiler);
 		}
-		new APIPlugin().apply(compiler);
+		new APIPlugin({
+			module: options.output.module
+		}).apply(compiler);
 		new ExportsInfoApiPlugin().apply(compiler);
 		new WebpackIsIncludedPlugin().apply(compiler);
 		new ConstPlugin().apply(compiler);
@@ -564,7 +566,7 @@ class WebpackOptionsApply extends OptionsApply {
 			for (const minimizer of options.optimization.minimizer) {
 				if (typeof minimizer === "function") {
 					minimizer.call(compiler, compiler);
-				} else if (minimizer !== "...") {
+				} else if (minimizer !== "..." && minimizer) {
 					minimizer.apply(compiler);
 				}
 			}

package/lib/WebpackOptionsDefaulter.js

@@ -8,11 +8,18 @@
 const { applyWebpackOptionsDefaults } = require("./config/defaults");
 const { getNormalizedWebpackOptions } = require("./config/normalization");
 
+/** @typedef {import("./config/normalization").WebpackOptions} WebpackOptions */
+/** @typedef {import("./config/normalization").WebpackOptionsNormalized} WebpackOptionsNormalized */
+
 class WebpackOptionsDefaulter {
+	/**
+	 * @param {WebpackOptions} options webpack options
+	 * @returns {WebpackOptionsNormalized} normalized webpack options
+	 */
 	process(options) {
-		options = getNormalizedWebpackOptions(options);
-		applyWebpackOptionsDefaults(options);
-		return options;
+		const normalizedOptions = getNormalizedWebpackOptions(options);
+		applyWebpackOptionsDefaults(normalizedOptions);
+		return normalizedOptions;
 	}
 }
 

package/lib/config/defaults.js

@@ -298,7 +298,10 @@ const applyWebpackOptionsDefaults = options => {
 			cache,
 			context: /** @type {Context} */ (options.context),
 			targetProperties,
-			mode: /** @type {Mode} */ (options.mode)
+			mode: /** @type {Mode} */ (options.mode),
+			css:
+				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+				(options.experiments.css)
 		}),
 		options.resolve
 	);
@@ -533,6 +536,7 @@ const applyJavascriptParserOptionsDefaults = (
 	D(parserOptions, "dynamicImportMode", "lazy");
 	D(parserOptions, "dynamicImportPrefetch", false);
 	D(parserOptions, "dynamicImportPreload", false);
+	D(parserOptions, "dynamicImportFetchPriority", false);
 	D(parserOptions, "createRequire", isNode);
 	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
 };
@@ -1398,9 +1402,16 @@ const applyOptimizationDefaults = (
  * @param {string} options.context build context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
+ * @param {CssExperimentOptions|false} options.css is css enabled
  * @returns {ResolveOptions} resolve options
  */
-const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
+const getResolveDefaults = ({
+	cache,
+	context,
+	targetProperties,
+	mode,
+	css
+}) => {
 	/** @type {string[]} */
 	const conditions = ["webpack"];
 
@@ -1468,6 +1479,24 @@ const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
 		}
 	};
 
+	if (css) {
+		const styleConditions = [];
+
+		styleConditions.push("webpack");
+		styleConditions.push(mode === "development" ? "development" : "production");
+		styleConditions.push("style");
+
+		resolveOptions.byDependency["css-import"] = {
+			// We avoid using any main files because we have to be consistent with CSS `@import`
+			// and CSS `@import` does not handle `main` files in directories,
+			// you should always specify the full URL for styles
+			mainFiles: [],
+			mainFields: ["style", "..."],
+			conditionNames: styleConditions,
+			extensions: [".css"]
+		};
+	}
+
 	return resolveOptions;
 };
 

package/lib/css/CssExportsGenerator.js

@@ -19,6 +19,11 @@ const Template = require("../Template");
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
 
+/**
+ * @template T
+ * @typedef {import("../InitFragment")<T>} InitFragment
+ */
+
 const TYPES = new Set(["javascript"]);
 
 class CssExportsGenerator extends Generator {
@@ -36,6 +41,7 @@ class CssExportsGenerator extends Generator {
 	 */
 	generate(module, generateContext) {
 		const source = new ReplaceSource(new RawSource(""));
+		/** @type {InitFragment<TODO>[]} */
 		const initFragments = [];
 		const cssExports = new Map();
 
@@ -57,6 +63,9 @@ class CssExportsGenerator extends Generator {
 			cssExports
 		};
 
+		/**
+		 * @param {Dependency} dependency the dependency
+		 */
 		const handleDependency = dependency => {
 			const constructor = /** @type {new (...args: any[]) => Dependency} */ (
 				dependency.constructor

package/lib/css/CssGenerator.js

@@ -30,7 +30,7 @@ class CssGenerator extends Generator {
 	 * @returns {Source} generated code
 	 */
 	generate(module, generateContext) {
-		const originalSource = module.originalSource();
+		const originalSource = /** @type {Source} */ (module.originalSource());
 		const source = new ReplaceSource(originalSource);
 		/** @type {InitFragment[]} */
 		const initFragments = [];

package/lib/css/CssLoadingRuntimeModule.js

@@ -14,6 +14,7 @@ const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../Compilation").RuntimeRequirementsContext} RuntimeRequirementsContext */
 
 /**
@@ -67,10 +68,15 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				uniqueName,
 				chunkLoadTimeout: loadTimeout
 			}
-		} = compilation;
+		} = /** @type {Compilation} */ (compilation);
 		const fn = RuntimeGlobals.ensureChunkHandlers;
 		const conditionMap = chunkGraph.getChunkConditionMap(
-			chunk,
+			/** @type {Chunk} */ (chunk),
+			/**
+			 * @param {Chunk} chunk the chunk
+			 * @param {ChunkGraph} chunkGraph the chunk graph
+			 * @returns {boolean} true, if the chunk has css
+			 */
 			(chunk, chunkGraph) =>
 				!!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")
 		);
@@ -87,7 +93,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const initialChunkIdsWithCss = new Set();
 		/** @type {Set<number | string | null>} */
 		const initialChunkIdsWithoutCss = new Set();
-		for (const c of chunk.getAllInitialChunks()) {
+		for (const c of /** @type {Chunk} */ (chunk).getAllInitialChunks()) {
 			(chunkHasCss(c, chunkGraph)
 				? initialChunkIdsWithCss
 				: initialChunkIdsWithoutCss
@@ -98,8 +104,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			return null;
 		}
 
-		const { createStylesheet } =
-			CssLoadingRuntimeModule.getCompilationHooks(compilation);
+		const { createStylesheet } = CssLoadingRuntimeModule.getCompilationHooks(
+			/** @type {Compilation} */ (compilation)
+		);
 
 		const stateExpression = withHmr
 			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
@@ -239,7 +246,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 					"if(!link) {",
 					Template.indent([
 						"needAttach = true;",
-						createStylesheet.call(code, this.chunk)
+						createStylesheet.call(code, /** @type {Chunk} */ (this.chunk))
 					]),
 					"}",
 					`var onLinkComplete = ${runtimeTemplate.basicFunction(