webpack 5.66.0 → 5.69.1

package/lib/FileSystemInfo.js

@@ -1185,7 +1185,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path file path
-	 * @param {function(WebpackError=, (FileSystemInfoEntry | "ignore" | null)=): void} callback callback function
+	 * @param {function((WebpackError | null)=, (FileSystemInfoEntry | "ignore" | null)=): void} callback callback function
 	 * @returns {void}
 	 */
 	getFileTimestamp(path, callback) {
@@ -1196,7 +1196,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path context path
-	 * @param {function(WebpackError=, (ResolvedContextFileSystemInfoEntry | "ignore" | null)=): void} callback callback function
+	 * @param {function((WebpackError | null)=, (ResolvedContextFileSystemInfoEntry | "ignore" | null)=): void} callback callback function
 	 * @returns {void}
 	 */
 	getContextTimestamp(path, callback) {
@@ -1217,7 +1217,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path context path
-	 * @param {function(WebpackError=, (ContextFileSystemInfoEntry | "ignore" | null)=): void} callback callback function
+	 * @param {function((WebpackError | null)=, (ContextFileSystemInfoEntry | "ignore" | null)=): void} callback callback function
 	 * @returns {void}
 	 */
 	_getUnresolvedContextTimestamp(path, callback) {
@@ -1228,7 +1228,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path file path
-	 * @param {function(WebpackError=, string=): void} callback callback function
+	 * @param {function((WebpackError | null)=, string=): void} callback callback function
 	 * @returns {void}
 	 */
 	getFileHash(path, callback) {
@@ -1239,7 +1239,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path context path
-	 * @param {function(WebpackError=, string=): void} callback callback function
+	 * @param {function((WebpackError | null)=, string=): void} callback callback function
 	 * @returns {void}
 	 */
 	getContextHash(path, callback) {
@@ -1259,7 +1259,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path context path
-	 * @param {function(WebpackError=, ContextHash=): void} callback callback function
+	 * @param {function((WebpackError | null)=, ContextHash=): void} callback callback function
 	 * @returns {void}
 	 */
 	_getUnresolvedContextHash(path, callback) {
@@ -1270,7 +1270,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path context path
-	 * @param {function(WebpackError=, ResolvedContextTimestampAndHash=): void} callback callback function
+	 * @param {function((WebpackError | null)=, ResolvedContextTimestampAndHash=): void} callback callback function
 	 * @returns {void}
 	 */
 	getContextTsh(path, callback) {
@@ -1290,7 +1290,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {string} path context path
-	 * @param {function(WebpackError=, ContextTimestampAndHash=): void} callback callback function
+	 * @param {function((WebpackError | null)=, ContextTimestampAndHash=): void} callback callback function
 	 * @returns {void}
 	 */
 	_getUnresolvedContextTsh(path, callback) {
@@ -1330,7 +1330,7 @@ class FileSystemInfo {
 	/**
 	 * @param {string} context context directory
 	 * @param {Iterable<string>} deps dependencies
-	 * @param {function(Error=, ResolveBuildDependenciesResult=): void} callback callback function
+	 * @param {function((Error | null)=, ResolveBuildDependenciesResult=): void} callback callback function
 	 * @returns {void}
 	 */
 	resolveBuildDependencies(context, deps, callback) {
@@ -1798,7 +1798,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {Map<string, string | false>} resolveResults results from resolving
-	 * @param {function(Error=, boolean=): void} callback callback with true when resolveResults resolve the same way
+	 * @param {function((Error | null)=, boolean=): void} callback callback with true when resolveResults resolve the same way
 	 * @returns {void}
 	 */
 	checkResolveResultsValid(resolveResults, callback) {
@@ -1880,7 +1880,7 @@ class FileSystemInfo {
 	 * @param {Object} options options object (for future extensions)
 	 * @param {boolean=} options.hash should use hash to snapshot
 	 * @param {boolean=} options.timestamp should use timestamp to snapshot
-	 * @param {function(WebpackError=, Snapshot=): void} callback callback function
+	 * @param {function((WebpackError | null)=, (Snapshot | null)=): void} callback callback function
 	 * @returns {void}
 	 */
 	createSnapshot(startTime, files, directories, missing, options, callback) {
@@ -2256,8 +2256,10 @@ class FileSystemInfo {
 		for (const path of managedItems) {
 			const cache = this._managedItems.get(path);
 			if (cache !== undefined) {
-				if (cache !== "missing") {
+				if (!cache.startsWith("*")) {
 					managedFiles.add(join(this.fs, path, "package.json"));
+				} else if (cache === "*nested") {
+					managedMissing.add(join(this.fs, path, "package.json"));
 				}
 				managedItemInfo.set(path, cache);
 			} else {
@@ -2271,8 +2273,10 @@ class FileSystemInfo {
 						}
 						jobError();
 					} else if (entry) {
-						if (entry !== "missing") {
+						if (!entry.startsWith("*")) {
 							managedFiles.add(join(this.fs, path, "package.json"));
+						} else if (cache === "*nested") {
+							managedMissing.add(join(this.fs, path, "package.json"));
 						}
 						managedItemInfo.set(path, entry);
 						jobDone();
@@ -2375,7 +2379,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {Snapshot} snapshot the snapshot made
-	 * @param {function(WebpackError=, boolean=): void} callback callback function
+	 * @param {function((WebpackError | null)=, boolean=): void} callback callback function
 	 * @returns {void}
 	 */
 	checkSnapshotValid(snapshot, callback) {
@@ -2395,7 +2399,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {Snapshot} snapshot the snapshot made
-	 * @param {function(WebpackError=, boolean=): void} callback callback function
+	 * @param {function((WebpackError | null)=, boolean=): void} callback callback function
 	 * @returns {void}
 	 */
 	_checkSnapshotValidNoCache(snapshot, callback) {
@@ -2944,7 +2948,7 @@ class FileSystemInfo {
 	 * @param {function(string, IStats, function(Error=, ItemType=): void): void} options.fromFile called when context item is a file
 	 * @param {function(string, IStats, function(Error=, ItemType=): void): void} options.fromDirectory called when context item is a directory
 	 * @param {function(string[], ItemType[]): T} options.reduce called from all context items
-	 * @param {function(Error=, (T)=): void} callback callback
+	 * @param {function((Error | null)=, (T)=): void} callback callback
 	 */
 	_readContext(
 		{
@@ -3127,7 +3131,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {ContextFileSystemInfoEntry} entry entry
-	 * @param {function(Error=, ResolvedContextFileSystemInfoEntry=): void} callback callback
+	 * @param {function((Error | null)=, ResolvedContextFileSystemInfoEntry=): void} callback callback
 	 * @returns {void}
 	 */
 	_resolveContextTimestamp(entry, callback) {
@@ -3235,7 +3239,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {ContextHash} entry context hash
-	 * @param {function(Error=, string=): void} callback callback
+	 * @param {function((Error | null)=, string=): void} callback callback
 	 * @returns {void}
 	 */
 	_resolveContextHash(entry, callback) {
@@ -3391,7 +3395,7 @@ class FileSystemInfo {
 
 	/**
 	 * @param {ContextTimestampAndHash} entry entry
-	 * @param {function(Error=, ResolvedContextTimestampAndHash=): void} callback callback
+	 * @param {function((Error | null)=, ResolvedContextTimestampAndHash=): void} callback callback
 	 * @returns {void}
 	 */
 	_resolveContextTsh(entry, callback) {
@@ -3471,8 +3475,8 @@ class FileSystemInfo {
 			}
 			if (!elements.has(path)) {
 				// file or directory doesn't exist
-				this._managedItems.set(path, "missing");
-				return callback(null, "missing");
+				this._managedItems.set(path, "*missing");
+				return callback(null, "*missing");
 			}
 			// something exists
 			// it may be a file or directory
@@ -3481,8 +3485,8 @@ class FileSystemInfo {
 				(path.endsWith("/node_modules") || path.endsWith("\\node_modules"))
 			) {
 				// we are only interested in existence of this special directory
-				this._managedItems.set(path, "exists");
-				return callback(null, "exists");
+				this._managedItems.set(path, "*node_modules");
+				return callback(null, "*node_modules");
 			}
 
 			// we assume it's a directory, as files shouldn't occur in managed paths
@@ -3499,8 +3503,8 @@ class FileSystemInfo {
 							) {
 								// This is only a grouping folder e. g. used by yarn
 								// we are only interested in existence of this special directory
-								this._managedItems.set(path, "nested");
-								return callback(null, "nested");
+								this._managedItems.set(path, "*nested");
+								return callback(null, "*nested");
 							}
 							this.logger.warn(
 								`Managed item ${path} isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)`

package/lib/HookWebpackError.js

@@ -51,7 +51,7 @@ module.exports.makeWebpackError = makeWebpackError;
 
 /**
  * @template T
- * @param {function(WebpackError=, T=): void} callback webpack error callback
+ * @param {function((WebpackError | null)=, T=): void} callback webpack error callback
  * @param {string} hook name of hook
  * @returns {Callback<T>} generic callback
  */

package/lib/Module.js

@@ -400,7 +400,6 @@ class Module extends DependenciesBlock {
 	// BACKWARD-COMPAT END
 
 	/**
-	 * @deprecated moved to .buildInfo.exportsArgument
 	 * @returns {string} name of the exports argument
 	 */
 	get exportsArgument() {
@@ -408,7 +407,6 @@ class Module extends DependenciesBlock {
 	}
 
 	/**
-	 * @deprecated moved to .buildInfo.moduleArgument
 	 * @returns {string} name of the module argument
 	 */
 	get moduleArgument() {
@@ -691,7 +689,7 @@ class Module extends DependenciesBlock {
 
 	/**
 	 * @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/MultiCompiler.js

@@ -27,7 +27,7 @@ const ArrayQueue = require("./util/ArrayQueue");
 /**
  * @template T
  * @callback Callback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  */
 

package/lib/MultiWatching.js

@@ -13,7 +13,7 @@ const asyncLib = require("neo-async");
 /**
  * @template T
  * @callback Callback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  */
 

package/lib/NormalModule.js

@@ -310,7 +310,7 @@ class NormalModule extends Module {
 		}
 
 		// Info from Build
-		/** @type {WebpackError=} */
+		/** @type {(WebpackError | null)=} */
 		this.error = null;
 		/** @private @type {Source=} */
 		this._source = null;
@@ -355,11 +355,13 @@ class NormalModule extends Module {
 	 * @returns {string | null} an identifier for library inclusion
 	 */
 	libIdent(options) {
-		return contextify(
+		let ident = contextify(
 			options.context,
 			this.userRequest,
 			options.associatedObjectForCache
 		);
+		if (this.layer) ident = `(${this.layer})/${ident}`;
+		return ident;
 	}
 
 	/**
@@ -730,7 +732,7 @@ class NormalModule extends Module {
 	 * @param {ResolverWithOptions} resolver the resolver
 	 * @param {InputFileSystem} fs the file system
 	 * @param {NormalModuleCompilationHooks} hooks the hooks
-	 * @param {function(WebpackError=): void} callback callback function
+	 * @param {function((WebpackError | null)=): void} callback callback function
 	 * @returns {void}
 	 */
 	_doBuild(options, compilation, resolver, fs, hooks, callback) {
@@ -1236,7 +1238,7 @@ class NormalModule 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/NormalModuleFactory.js

@@ -28,7 +28,10 @@ const LazySet = require("./util/LazySet");
 const { getScheme } = require("./util/URLAbsoluteSpecifier");
 const { cachedCleverMerge, cachedSetProperty } = require("./util/cleverMerge");
 const { join } = require("./util/fs");
-const { parseResource } = require("./util/identifier");
+const {
+	parseResource,
+	parseResourceWithoutFragment
+} = require("./util/identifier");
 
 /** @typedef {import("../declarations/WebpackOptions").ModuleOptionsNormalized} ModuleOptions */
 /** @typedef {import("./Generator")} Generator */
@@ -66,6 +69,11 @@ const { parseResource } = require("./util/identifier");
 
 /** @typedef {ResourceData & { data: Record<string, any> }} ResourceDataWithData */
 
+/** @typedef {Object} ParsedLoaderRequest
+ * @property {string} loader loader
+ * @property {string|undefined} options options
+ */
+
 const EMPTY_RESOLVE_OPTIONS = {};
 const EMPTY_PARSER_OPTIONS = {};
 const EMPTY_GENERATOR_OPTIONS = {};
@@ -97,27 +105,6 @@ const stringifyLoadersAndResource = (loaders, resource) => {
 	return str + resource;
 };
 
-/**
- * @param {string} resultString resultString
- * @returns {{loader: string, options: string|undefined}} parsed loader request
- */
-const identToLoaderRequest = resultString => {
-	const idx = resultString.indexOf("?");
-	if (idx >= 0) {
-		const loader = resultString.substr(0, idx);
-		const options = resultString.substr(idx + 1);
-		return {
-			loader,
-			options
-		};
-	} else {
-		return {
-			loader: resultString,
-			options: undefined
-		};
-	}
-};
-
 const needCalls = (times, callback) => {
 	return err => {
 		if (--times === 0) {
@@ -264,6 +251,9 @@ class NormalModuleFactory extends ModuleFactory {
 		const cacheParseResource = parseResource.bindCache(
 			associatedObjectForCache
 		);
+		const cachedParseResourceWithoutFragment =
+			parseResourceWithoutFragment.bindCache(associatedObjectForCache);
+		this._parseResourceWithoutFragment = cachedParseResourceWithoutFragment;
 
 		this.hooks.factorize.tapAsync(
 			{
@@ -351,7 +341,7 @@ class NormalModuleFactory extends ModuleFactory {
 				let matchResourceData = undefined;
 				/** @type {string} */
 				let unresolvedResource;
-				/** @type {{loader: string, options: string|undefined}[]} */
+				/** @type {ParsedLoaderRequest[]} */
 				let elements;
 				let noPreAutoLoaders = false;
 				let noAutoLoaders = false;
@@ -405,7 +395,13 @@ class NormalModuleFactory extends ModuleFactory {
 							)
 							.split(/!+/);
 						unresolvedResource = rawElements.pop();
-						elements = rawElements.map(identToLoaderRequest);
+						elements = rawElements.map(el => {
+							const { path, query } = cachedParseResourceWithoutFragment(el);
+							return {
+								loader: path,
+								options: query ? query.slice(1) : undefined
+							};
+						});
 						scheme = getScheme(unresolvedResource);
 					} else {
 						unresolvedResource = requestWithoutMatchResource;
@@ -1017,12 +1013,14 @@ If changing the source code is not an option there is also a resolve options cal
 						}
 						if (err) return callback(err);
 
-						const parsedResult = identToLoaderRequest(result);
+						const parsedResult = this._parseResourceWithoutFragment(result);
 						const resolved = {
-							loader: parsedResult.loader,
+							loader: parsedResult.path,
 							options:
 								item.options === undefined
-									? parsedResult.options
+									? parsedResult.query
+										? parsedResult.query.slice(1)
+										: undefined
 									: item.options,
 							ident: item.options === undefined ? undefined : item.ident
 						};

package/lib/ProgressPlugin.js

@@ -96,7 +96,7 @@ const createDefaultHandler = (profile, logger) => {
 /**
  * @callback ReportProgress
  * @param {number} p
- * @param {...string[]} [args]
+ * @param {...string} [args]
  * @returns {void}
  */
 

package/lib/RawModule.js

@@ -74,7 +74,7 @@ class RawModule 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/RuntimeGlobals.js

@@ -168,6 +168,13 @@ exports.scriptNonce = "__webpack_require__.nc";
  */
 exports.loadScript = "__webpack_require__.l";
 
+/**
+ * function to promote a string to a TrustedScript using webpack's Trusted
+ * Types policy
+ * Arguments: (script: string) => TrustedScript
+ */
+exports.createScript = "__webpack_require__.ts";
+
 /**
  * function to promote a string to a TrustedScriptURL using webpack's Trusted
  * Types policy
@@ -175,6 +182,12 @@ exports.loadScript = "__webpack_require__.l";
  */
 exports.createScriptUrl = "__webpack_require__.tu";
 
+/**
+ * function to return webpack's Trusted Types policy
+ * Arguments: () => TrustedTypePolicy
+ */
+exports.getTrustedTypesPolicy = "__webpack_require__.tt";
+
 /**
  * the chunk name of the chunk with the runtime
  */
@@ -195,6 +208,11 @@ exports.getChunkScriptFilename = "__webpack_require__.u";
  */
 exports.getChunkCssFilename = "__webpack_require__.k";
 
+/**
+ * a flag when a module/chunk/tree has css modules
+ */
+exports.hasCssModules = "has css modules";
+
 /**
  * the filename of the script part of the hot update chunk
  */

package/lib/RuntimeModule.js

@@ -78,7 +78,7 @@ class RuntimeModule 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/RuntimePlugin.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const RuntimeGlobals = require("./RuntimeGlobals");
+const { getChunkFilenameTemplate } = require("./css/CssModulesPlugin");
 const RuntimeRequirementsDependency = require("./dependencies/RuntimeRequirementsDependency");
 const JavascriptModulesPlugin = require("./javascript/JavascriptModulesPlugin");
 const AsyncModuleRuntimeModule = require("./runtime/AsyncModuleRuntimeModule");
@@ -13,11 +14,13 @@ const AutoPublicPathRuntimeModule = require("./runtime/AutoPublicPathRuntimeModu
 const CompatGetDefaultExportRuntimeModule = require("./runtime/CompatGetDefaultExportRuntimeModule");
 const CompatRuntimeModule = require("./runtime/CompatRuntimeModule");
 const CreateFakeNamespaceObjectRuntimeModule = require("./runtime/CreateFakeNamespaceObjectRuntimeModule");
+const CreateScriptRuntimeModule = require("./runtime/CreateScriptRuntimeModule");
 const CreateScriptUrlRuntimeModule = require("./runtime/CreateScriptUrlRuntimeModule");
 const DefinePropertyGettersRuntimeModule = require("./runtime/DefinePropertyGettersRuntimeModule");
 const EnsureChunkRuntimeModule = require("./runtime/EnsureChunkRuntimeModule");
 const GetChunkFilenameRuntimeModule = require("./runtime/GetChunkFilenameRuntimeModule");
 const GetMainFilenameRuntimeModule = require("./runtime/GetMainFilenameRuntimeModule");
+const GetTrustedTypesPolicyRuntimeModule = require("./runtime/GetTrustedTypesPolicyRuntimeModule");
 const GlobalRuntimeModule = require("./runtime/GlobalRuntimeModule");
 const HasOwnPropertyRuntimeModule = require("./runtime/HasOwnPropertyRuntimeModule");
 const LoadScriptRuntimeModule = require("./runtime/LoadScriptRuntimeModule");
@@ -39,7 +42,9 @@ const GLOBALS_ON_REQUIRE = [
 	RuntimeGlobals.runtimeId,
 	RuntimeGlobals.compatGetDefaultExport,
 	RuntimeGlobals.createFakeNamespaceObject,
+	RuntimeGlobals.createScript,
 	RuntimeGlobals.createScriptUrl,
+	RuntimeGlobals.getTrustedTypesPolicy,
 	RuntimeGlobals.definePropertyGetters,
 	RuntimeGlobals.ensureChunk,
 	RuntimeGlobals.entryModuleId,
@@ -279,9 +284,8 @@ class RuntimePlugin {
 							"css",
 							RuntimeGlobals.getChunkCssFilename,
 							chunk =>
-								chunk.cssFilenameTemplate ||
-								compilation.outputOptions.cssChunkFilename,
-							false
+								getChunkFilenameTemplate(chunk, compilation.outputOptions),
+							set.has(RuntimeGlobals.hmrDownloadUpdateHandlers)
 						)
 					);
 					return true;
@@ -364,15 +368,36 @@ class RuntimePlugin {
 					);
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.createScript)
+				.tap("RuntimePlugin", (chunk, set) => {
+					if (compilation.outputOptions.trustedTypes) {
+						set.add(RuntimeGlobals.getTrustedTypesPolicy);
+					}
+					compilation.addRuntimeModule(chunk, new CreateScriptRuntimeModule());
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.createScriptUrl)
 				.tap("RuntimePlugin", (chunk, set) => {
+					if (compilation.outputOptions.trustedTypes) {
+						set.add(RuntimeGlobals.getTrustedTypesPolicy);
+					}
 					compilation.addRuntimeModule(
 						chunk,
 						new CreateScriptUrlRuntimeModule()
 					);
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.getTrustedTypesPolicy)
+				.tap("RuntimePlugin", (chunk, set) => {
+					compilation.addRuntimeModule(
+						chunk,
+						new GetTrustedTypesPolicyRuntimeModule(set)
+					);
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.relativeUrl)
 				.tap("RuntimePlugin", (chunk, set) => {

package/lib/RuntimeTemplate.js

@@ -1031,7 +1031,7 @@ class RuntimeTemplate {
 		const codeGen = codeGenerationResults.get(module, runtime);
 		const { data } = codeGen;
 		const url = data.get("url");
-		if (url) return url;
+		if (url) return url.toString();
 		const filename = data.get("filename");
 		return publicPath + filename;
 	}

package/lib/TemplatedPathPlugin.js

@@ -5,6 +5,7 @@
 
 "use strict";
 
+const mime = require("mime-types");
 const { basename, extname } = require("path");
 const util = require("util");
 const Chunk = require("./Chunk");
@@ -117,29 +118,53 @@ const replacePathVariables = (path, data, assetInfo) => {
 	// [name] - file
 	// [ext] - .js
 	if (typeof data.filename === "string") {
-		const { path: file, query, fragment } = parseResource(data.filename);
-
-		const ext = extname(file);
-		const base = basename(file);
-		const name = base.slice(0, base.length - ext.length);
-		const path = file.slice(0, file.length - base.length);
-
-		replacements.set("file", replacer(file));
-		replacements.set("query", replacer(query, true));
-		replacements.set("fragment", replacer(fragment, true));
-		replacements.set("path", replacer(path, true));
-		replacements.set("base", replacer(base));
-		replacements.set("name", replacer(name));
-		replacements.set("ext", replacer(ext, true));
-		// Legacy
-		replacements.set(
-			"filebase",
-			deprecated(
-				replacer(base),
-				"[filebase] is now [base]",
-				"DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_FILENAME"
-			)
-		);
+		// check that filename is data uri
+		let match = data.filename.match(/^data:([^;,]+)/);
+		if (match) {
+			const ext = mime.extension(match[1]);
+			const emptyReplacer = replacer("", true);
+
+			replacements.set("file", emptyReplacer);
+			replacements.set("query", emptyReplacer);
+			replacements.set("fragment", emptyReplacer);
+			replacements.set("path", emptyReplacer);
+			replacements.set("base", emptyReplacer);
+			replacements.set("name", emptyReplacer);
+			replacements.set("ext", replacer(ext ? `.${ext}` : "", true));
+			// Legacy
+			replacements.set(
+				"filebase",
+				deprecated(
+					emptyReplacer,
+					"[filebase] is now [base]",
+					"DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_FILENAME"
+				)
+			);
+		} else {
+			const { path: file, query, fragment } = parseResource(data.filename);
+
+			const ext = extname(file);
+			const base = basename(file);
+			const name = base.slice(0, base.length - ext.length);
+			const path = file.slice(0, file.length - base.length);
+
+			replacements.set("file", replacer(file));
+			replacements.set("query", replacer(query, true));
+			replacements.set("fragment", replacer(fragment, true));
+			replacements.set("path", replacer(path, true));
+			replacements.set("base", replacer(base));
+			replacements.set("name", replacer(name));
+			replacements.set("ext", replacer(ext, true));
+			// Legacy
+			replacements.set(
+				"filebase",
+				deprecated(
+					replacer(base),
+					"[filebase] is now [base]",
+					"DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_FILENAME"
+				)
+			);
+		}
 	}
 
 	// Compilation context

package/lib/Watching.js

@@ -15,7 +15,7 @@ const Stats = require("./Stats");
 /**
  * @template T
  * @callback Callback
- * @param {Error=} err
+ * @param {(Error | null)=} err
  * @param {T=} result
  */
 

package/lib/WebpackOptionsApply.js

@@ -291,7 +291,7 @@ class WebpackOptionsApply extends OptionsApply {
 
 		if (options.experiments.css) {
 			const CssModulesPlugin = require("./css/CssModulesPlugin");
-			new CssModulesPlugin().apply(compiler);
+			new CssModulesPlugin(options.experiments.css).apply(compiler);
 		}
 
 		if (options.experiments.lazyCompilation) {