webpack 5.64.2 → 5.66.0

package/lib/RuntimeTemplate.js

@@ -16,6 +16,7 @@ const { forEachRuntime, subtractRuntime } = require("./util/runtime");
 /** @typedef {import("../declarations/WebpackOptions").OutputNormalized} OutputOptions */
 /** @typedef {import("./AsyncDependenciesBlock")} AsyncDependenciesBlock */
 /** @typedef {import("./ChunkGraph")} ChunkGraph */
+/** @typedef {import("./CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("./Compilation")} Compilation */
 /** @typedef {import("./Dependency")} Dependency */
 /** @typedef {import("./Module")} Module */
@@ -50,6 +51,27 @@ Module has these incoming connections: ${Array.from(
 	).join("")}`;
 };
 
+/**
+ * @param {string|undefined} definition global object definition
+ * @returns {string} save to use global object
+ */
+function getGlobalObject(definition) {
+	if (!definition) return definition;
+	const trimmed = definition.trim();
+
+	if (
+		// identifier, we do not need real identifier regarding ECMAScript/Unicode
+		trimmed.match(/^[_\p{L}][_0-9\p{L}]*$/iu) ||
+		// iife
+		// call expression
+		// expression in parentheses
+		trimmed.match(/^([_\p{L}][_0-9\p{L}]*)?\(.*\)$/iu)
+	)
+		return trimmed;
+
+	return `Object(${trimmed})`;
+}
+
 class RuntimeTemplate {
 	/**
 	 * @param {Compilation} compilation the compilation
@@ -60,6 +82,7 @@ class RuntimeTemplate {
 		this.compilation = compilation;
 		this.outputOptions = outputOptions || {};
 		this.requestShortener = requestShortener;
+		this.globalObject = getGlobalObject(outputOptions.globalObject);
 	}
 
 	isIIFE() {
@@ -78,6 +101,10 @@ class RuntimeTemplate {
 		return this.outputOptions.environment.arrowFunction;
 	}
 
+	supportsOptionalChaining() {
+		return this.outputOptions.environment.optionalChaining;
+	}
+
 	supportsForOf() {
 		return this.outputOptions.environment.forOf;
 	}
@@ -99,8 +126,7 @@ class RuntimeTemplate {
 	}
 
 	supportTemplateLiteral() {
-		// TODO
-		return false;
+		return this.outputOptions.environment.templateLiteral;
 	}
 
 	returningFunction(returnValue, args = "") {
@@ -115,6 +141,71 @@ class RuntimeTemplate {
 			: `function(${args}) {\n${Template.indent(body)}\n}`;
 	}
 
+	/**
+	 * @param {Array<string|{expr: string}>} args args
+	 * @returns {string} result expression
+	 */
+	concatenation(...args) {
+		const len = args.length;
+
+		if (len === 2) return this._es5Concatenation(args);
+		if (len === 0) return '""';
+		if (len === 1) {
+			return typeof args[0] === "string"
+				? JSON.stringify(args[0])
+				: `"" + ${args[0].expr}`;
+		}
+		if (!this.supportTemplateLiteral()) return this._es5Concatenation(args);
+
+		// cost comparison between template literal and concatenation:
+		// both need equal surroundings: `xxx` vs "xxx"
+		// template literal has constant cost of 3 chars for each expression
+		// es5 concatenation has cost of 3 + n chars for n expressions in row
+		// when a es5 concatenation ends with an expression it reduces cost by 3
+		// when a es5 concatenation starts with an single expression it reduces cost by 3
+		// e. g. `${a}${b}${c}` (3*3 = 9) is longer than ""+a+b+c ((3+3)-3 = 3)
+		// e. g. `x${a}x${b}x${c}x` (3*3 = 9) is shorter than "x"+a+"x"+b+"x"+c+"x" (4+4+4 = 12)
+
+		let templateCost = 0;
+		let concatenationCost = 0;
+
+		let lastWasExpr = false;
+		for (const arg of args) {
+			const isExpr = typeof arg !== "string";
+			if (isExpr) {
+				templateCost += 3;
+				concatenationCost += lastWasExpr ? 1 : 4;
+			}
+			lastWasExpr = isExpr;
+		}
+		if (lastWasExpr) concatenationCost -= 3;
+		if (typeof args[0] !== "string" && typeof args[1] === "string")
+			concatenationCost -= 3;
+
+		if (concatenationCost <= templateCost) return this._es5Concatenation(args);
+
+		return `\`${args
+			.map(arg => (typeof arg === "string" ? arg : `\${${arg.expr}}`))
+			.join("")}\``;
+	}
+
+	/**
+	 * @param {Array<string|{expr: string}>} args args (len >= 2)
+	 * @returns {string} result expression
+	 * @private
+	 */
+	_es5Concatenation(args) {
+		const str = args
+			.map(arg => (typeof arg === "string" ? JSON.stringify(arg) : arg.expr))
+			.join(" + ");
+
+		// when the first two args are expression, we need to prepend "" + to force string
+		// concatenation instead of number addition.
+		return typeof args[0] !== "string" && typeof args[1] !== "string"
+			? `"" + ${str}`
+			: str;
+	}
+
 	expressionFunction(expression, args = "") {
 		return this.supportsArrowFunction()
 			? `(${args}) => (${expression})`
@@ -924,6 +1015,26 @@ class RuntimeTemplate {
 		runtimeRequirements.add(RuntimeGlobals.exports);
 		return `${RuntimeGlobals.makeNamespaceObject}(${exportsArgument});\n`;
 	}
+
+	/**
+	 * @param {Object} options options object
+	 * @param {Module} options.module the module
+	 * @param {string} options.publicPath the public path
+	 * @param {RuntimeSpec=} options.runtime runtime
+	 * @param {CodeGenerationResults} options.codeGenerationResults the code generation results
+	 * @returns {string} the url of the asset
+	 */
+	assetUrl({ publicPath, runtime, module, codeGenerationResults }) {
+		if (!module) {
+			return "data:,";
+		}
+		const codeGen = codeGenerationResults.get(module, runtime);
+		const { data } = codeGen;
+		const url = data.get("url");
+		if (url) return url;
+		const filename = data.get("filename");
+		return publicPath + filename;
+	}
 }
 
 module.exports = RuntimeTemplate;

package/lib/Template.js

@@ -370,7 +370,8 @@ class Template {
 					dependencyTemplates: renderContext.dependencyTemplates,
 					moduleGraph: renderContext.moduleGraph,
 					runtimeTemplate: renderContext.runtimeTemplate,
-					runtime: renderContext.chunk.runtime
+					runtime: renderContext.chunk.runtime,
+					codeGenerationResults
 				});
 				if (!codeGenResult) continue;
 				runtimeSource = codeGenResult.sources.get("runtime");

package/lib/WatchIgnorePlugin.js

@@ -87,7 +87,20 @@ class IgnoringWatchFileSystem {
 					fileTimestamps.set(path, IGNORE_TIME_ENTRY);
 				}
 				return fileTimestamps;
-			}
+			},
+			getInfo:
+				watcher.getInfo &&
+				(() => {
+					const info = watcher.getInfo();
+					const { fileTimeInfoEntries, contextTimeInfoEntries } = info;
+					for (const path of ignoredFiles) {
+						fileTimeInfoEntries.set(path, IGNORE_TIME_ENTRY);
+					}
+					for (const path of ignoredDirs) {
+						contextTimeInfoEntries.set(path, IGNORE_TIME_ENTRY);
+					}
+					return info;
+				})
 		};
 	}
 }

package/lib/Watching.js

@@ -49,7 +49,7 @@ class Watching {
 			this.watchOptions = {};
 		}
 		if (typeof this.watchOptions.aggregateTimeout !== "number") {
-			this.watchOptions.aggregateTimeout = 200;
+			this.watchOptions.aggregateTimeout = 20;
 		}
 		this.compiler = compiler;
 		this.running = false;
@@ -109,30 +109,44 @@ class Watching {
 			this.lastWatcherStartTime = Date.now();
 		}
 		this.compiler.fsStartTime = Date.now();
-		this._mergeWithCollected(
-			changedFiles ||
-				(this.pausedWatcher &&
+		if (
+			changedFiles &&
+			removedFiles &&
+			fileTimeInfoEntries &&
+			contextTimeInfoEntries
+		) {
+			this._mergeWithCollected(changedFiles, removedFiles);
+			this.compiler.fileTimestamps = fileTimeInfoEntries;
+			this.compiler.contextTimestamps = contextTimeInfoEntries;
+		} else if (this.pausedWatcher) {
+			if (this.pausedWatcher.getInfo) {
+				const {
+					changes,
+					removals,
+					fileTimeInfoEntries,
+					contextTimeInfoEntries
+				} = this.pausedWatcher.getInfo();
+				this._mergeWithCollected(changes, removals);
+				this.compiler.fileTimestamps = fileTimeInfoEntries;
+				this.compiler.contextTimestamps = contextTimeInfoEntries;
+			} else {
+				this._mergeWithCollected(
 					this.pausedWatcher.getAggregatedChanges &&
-					this.pausedWatcher.getAggregatedChanges()),
-			(this.compiler.removedFiles =
-				removedFiles ||
-				(this.pausedWatcher &&
+						this.pausedWatcher.getAggregatedChanges(),
 					this.pausedWatcher.getAggregatedRemovals &&
-					this.pausedWatcher.getAggregatedRemovals()))
-		);
-
+						this.pausedWatcher.getAggregatedRemovals()
+				);
+				this.compiler.fileTimestamps =
+					this.pausedWatcher.getFileTimeInfoEntries();
+				this.compiler.contextTimestamps =
+					this.pausedWatcher.getContextTimeInfoEntries();
+			}
+		}
 		this.compiler.modifiedFiles = this._collectedChangedFiles;
 		this._collectedChangedFiles = undefined;
 		this.compiler.removedFiles = this._collectedRemovedFiles;
 		this._collectedRemovedFiles = undefined;
 
-		this.compiler.fileTimestamps =
-			fileTimeInfoEntries ||
-			(this.pausedWatcher && this.pausedWatcher.getFileTimeInfoEntries());
-		this.compiler.contextTimestamps =
-			contextTimeInfoEntries ||
-			(this.pausedWatcher && this.pausedWatcher.getContextTimeInfoEntries());
-
 		const run = () => {
 			if (this.compiler.idle) {
 				return this.compiler.cache.endIdle(err => {

package/lib/WebpackOptionsApply.js

@@ -118,11 +118,47 @@ class WebpackOptionsApply extends OptionsApply {
 		if (options.externalsPresets.webAsync) {
 			//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
 			const ExternalsPlugin = require("./ExternalsPlugin");
-			new ExternalsPlugin("import", /^(https?:\/\/|std:)/).apply(compiler);
+			new ExternalsPlugin(
+				"import",
+				options.experiments.css
+					? ({ request, dependencyType }, callback) => {
+							if (dependencyType === "url") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `asset ${request}`);
+							} else if (dependencyType === "css-import") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `css-import ${request}`);
+							} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
+								if (/^\.css(\?|$)/.test(request))
+									return callback(null, `css-import ${request}`);
+								return callback(null, `import ${request}`);
+							}
+							callback();
+					  }
+					: /^(\/\/|https?:\/\/|std:)/
+			).apply(compiler);
 		} else if (options.externalsPresets.web) {
 			//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
 			const ExternalsPlugin = require("./ExternalsPlugin");
-			new ExternalsPlugin("module", /^(https?:\/\/|std:)/).apply(compiler);
+			new ExternalsPlugin(
+				"module",
+				options.experiments.css
+					? ({ request, dependencyType }, callback) => {
+							if (dependencyType === "url") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `asset ${request}`);
+							} else if (dependencyType === "css-import") {
+								if (/^(\/\/|https?:\/\/)/.test(request))
+									return callback(null, `css-import ${request}`);
+							} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
+								if (/^\.css(\?|$)/.test(request))
+									return callback(null, `css-import ${request}`);
+								return callback(null, `module ${request}`);
+							}
+							callback();
+					  }
+					: /^(\/\/|https?:\/\/|std:)/
+			).apply(compiler);
 		}
 
 		new ChunkPrefetchPreloadPlugin().apply(compiler);
@@ -253,6 +289,11 @@ class WebpackOptionsApply extends OptionsApply {
 			}).apply(compiler);
 		}
 
+		if (options.experiments.css) {
+			const CssModulesPlugin = require("./css/CssModulesPlugin");
+			new CssModulesPlugin().apply(compiler);
+		}
+
 		if (options.experiments.lazyCompilation) {
 			const LazyCompilationPlugin = require("./hmr/LazyCompilationPlugin");
 			const lazyOptions =

package/lib/asset/AssetGenerator.js

@@ -49,7 +49,7 @@ const mergeAssetInfo = (a, b) => {
 				case "immutable":
 				case "development":
 				case "hotModuleReplacement":
-				case "javascriptModule	":
+				case "javascriptModule":
 					result[key] = a[key] || b[key];
 					break;
 				case "related":
@@ -191,6 +191,8 @@ class AssetGenerator extends Generator {
 							encoding ? `;${encoding}` : ""
 						},${encodedContent}`;
 					}
+					const data = getData();
+					data.set("url", encodedSource);
 					return new RawSource(
 						`${RuntimeGlobals.module}.exports = ${JSON.stringify(
 							encodedSource
@@ -228,7 +230,7 @@ class AssetGenerator extends Generator {
 								contentHash
 							}
 						);
-					let publicPath;
+					let assetPath;
 					if (this.publicPath !== undefined) {
 						const { path, info } =
 							runtimeTemplate.compilation.getAssetPathWithInfo(
@@ -241,11 +243,14 @@ class AssetGenerator extends Generator {
 									contentHash
 								}
 							);
-						publicPath = JSON.stringify(path);
 						assetInfo = mergeAssetInfo(assetInfo, info);
+						assetPath = JSON.stringify(path + filename);
 					} else {
-						publicPath = RuntimeGlobals.publicPath;
 						runtimeRequirements.add(RuntimeGlobals.publicPath); // add __webpack_require__.p
+						assetPath = runtimeTemplate.concatenation(
+							{ expr: RuntimeGlobals.publicPath },
+							filename
+						);
 					}
 					assetInfo = {
 						sourceFilename,
@@ -264,9 +269,7 @@ class AssetGenerator extends Generator {
 					}
 
 					return new RawSource(
-						`${
-							RuntimeGlobals.module
-						}.exports = ${publicPath} + ${JSON.stringify(filename)};`
+						`${RuntimeGlobals.module}.exports = ${assetPath};`
 					);
 				}
 			}

package/lib/asset/RawDataUrlModule.js

@@ -0,0 +1,145 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+
+"use strict";
+
+const { RawSource } = require("webpack-sources");
+const Module = require("../Module");
+const RuntimeGlobals = require("../RuntimeGlobals");
+const makeSerializable = require("../util/makeSerializable");
+
+/** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptions */
+/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../Module").CodeGenerationContext} CodeGenerationContext */
+/** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
+/** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
+/** @typedef {import("../RequestShortener")} RequestShortener */
+/** @typedef {import("../ResolverFactory").ResolverWithOptions} ResolverWithOptions */
+/** @typedef {import("../WebpackError")} WebpackError */
+/** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("../util/fs").InputFileSystem} InputFileSystem */
+
+const TYPES = new Set(["javascript"]);
+
+class RawDataUrlModule extends Module {
+	/**
+	 * @param {string} url raw url
+	 * @param {string} identifier unique identifier
+	 * @param {string=} readableIdentifier readable identifier
+	 */
+	constructor(url, identifier, readableIdentifier) {
+		super("asset/raw-data-url", null);
+		this.url = url;
+		this.identifierStr = identifier || this.url;
+		this.readableIdentifierStr = readableIdentifier || this.identifierStr;
+	}
+
+	/**
+	 * @returns {Set<string>} types available (do not mutate)
+	 */
+	getSourceTypes() {
+		return TYPES;
+	}
+
+	/**
+	 * @returns {string} a unique identifier of the module
+	 */
+	identifier() {
+		return this.identifierStr;
+	}
+
+	/**
+	 * @param {string=} type the source type for which the size should be estimated
+	 * @returns {number} the estimated size of the module (must be non-zero)
+	 */
+	size(type) {
+		return Math.max(1, this.url.length);
+	}
+
+	/**
+	 * @param {RequestShortener} requestShortener the request shortener
+	 * @returns {string} a user readable identifier of the module
+	 */
+	readableIdentifier(requestShortener) {
+		return requestShortener.shorten(this.readableIdentifierStr);
+	}
+
+	/**
+	 * @param {NeedBuildContext} context context info
+	 * @param {function(WebpackError=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
+	 * @returns {void}
+	 */
+	needBuild(context, callback) {
+		return callback(null, !this.buildMeta);
+	}
+
+	/**
+	 * @param {WebpackOptions} options webpack options
+	 * @param {Compilation} compilation the compilation
+	 * @param {ResolverWithOptions} resolver the resolver
+	 * @param {InputFileSystem} fs the file system
+	 * @param {function(WebpackError=): void} callback callback function
+	 * @returns {void}
+	 */
+	build(options, compilation, resolver, fs, callback) {
+		this.buildMeta = {};
+		this.buildInfo = {
+			cacheable: true
+		};
+		callback();
+	}
+
+	/**
+	 * @param {CodeGenerationContext} context context for code generation
+	 * @returns {CodeGenerationResult} result
+	 */
+	codeGeneration(context) {
+		const sources = new Map();
+		sources.set(
+			"javascript",
+			new RawSource(`module.exports = ${JSON.stringify(this.url)};`)
+		);
+		const data = new Map();
+		data.set("url", this.url);
+		const runtimeRequirements = new Set();
+		runtimeRequirements.add(RuntimeGlobals.module);
+		return { sources, runtimeRequirements, data };
+	}
+
+	/**
+	 * @param {Hash} hash the hash used to track dependencies
+	 * @param {UpdateHashContext} context context
+	 * @returns {void}
+	 */
+	updateHash(hash, context) {
+		hash.update(this.url);
+		super.updateHash(hash, context);
+	}
+
+	serialize(context) {
+		const { write } = context;
+
+		write(this.url);
+		write(this.identifierStr);
+		write(this.readableIdentifierStr);
+
+		super.serialize(context);
+	}
+
+	deserialize(context) {
+		const { read } = context;
+
+		this.url = read();
+		this.identifierStr = read();
+		this.readableIdentifierStr = read();
+
+		super.deserialize(context);
+	}
+}
+
+makeSerializable(RawDataUrlModule, "webpack/lib/asset/RawDataUrlModule");
+
+module.exports = RawDataUrlModule;

package/lib/config/browserslistTargetHandler.js

@@ -274,7 +274,44 @@ const resolve = browsers => {
 			// kaios: Unknown support
 			node: [12, 0]
 		}),
-
+		optionalChaining: rawChecker({
+			chrome: 80,
+			and_chr: 80,
+			edge: 80,
+			firefox: 74,
+			and_ff: 79,
+			// ie: Not supported,
+			opera: 67,
+			op_mob: 64,
+			safari: [13, 1],
+			ios_saf: [13, 4],
+			samsung: 13,
+			android: 80,
+			// and_qq: Not supported
+			// baidu: Not supported
+			// and_uc: Not supported
+			// kaios: Not supported
+			node: 14
+		}),
+		templateLiteral: rawChecker({
+			chrome: 41,
+			and_chr: 41,
+			edge: 13,
+			firefox: 34,
+			and_ff: 34,
+			// ie: Not supported,
+			opera: 29,
+			op_mob: 64,
+			safari: [9, 1],
+			ios_saf: 9,
+			samsung: 4,
+			android: 41,
+			and_qq: [10, 4],
+			baidu: [7, 12],
+			and_uc: [12, 12],
+			kaios: [2, 5],
+			node: 4
+		}),
 		browser: browserProperty,
 		electron: false,
 		node: nodeProperty,