webpack 5.75.0 → 5.76.0

package/README.md

@@ -158,11 +158,11 @@ or are automatically applied via regex from your webpack configuration.
 
 #### Transpiling
 
-|                                                                            Name                                                                            |    Status     |  Install Size  | Description                                                                                       |
-| :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ |
-| <a href="https://github.com/babel/babel-loader"><img width="48" height="48" title="babel-loader" src="https://worldvectorlogo.com/logos/babel-10.svg"></a> | ![babel-npm]  | ![babel-size]  | Loads ES2015+ code and transpiles to ES5 using <a href="https://github.com/babel/babel">Babel</a> |
-|  <a href="https://github.com/TypeStrong/ts-loader"><img width="48" height="48" src="https://cdn.rawgit.com/Microsoft/TypeScript/master/doc/logo.svg"></a>  |  ![type-npm]  |  ![type-size]  | Loads TypeScript like JavaScript                                                                  |
-|    <a href="https://github.com/webpack-contrib/coffee-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/coffeescript.svg"></a>    | ![coffee-npm] | ![coffee-size] | Loads CoffeeScript like JavaScript                                                                |
+|                                                                                                                             Name                                                                                                                             |    Status     |  Install Size  | Description                                                                                       |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ |
+|                                                  <a href="https://github.com/babel/babel-loader"><img width="48" height="48" title="babel-loader" src="https://worldvectorlogo.com/logos/babel-10.svg"></a>                                                  | ![babel-npm]  | ![babel-size]  | Loads ES2015+ code and transpiles to ES5 using <a href="https://github.com/babel/babel">Babel</a> |
+| <a href="https://github.com/TypeStrong/ts-loader"><img width="48" height="48" src="https://raw.githubusercontent.com/microsoft/TypeScript-Website/f407e1ae19e5e990d9901ac8064a32a8cc60edf0/packages/typescriptlang-org/static/branding/ts-logo-128.svg"></a> |  ![type-npm]  |  ![type-size]  | Loads TypeScript like JavaScript                                                                  |
+|                                                     <a href="https://github.com/webpack-contrib/coffee-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/coffeescript.svg"></a>                                                     | ![coffee-npm] | ![coffee-size] | Loads CoffeeScript like JavaScript                                                                |
 
 [babel-npm]: https://img.shields.io/npm/v/babel-loader.svg
 [babel-size]: https://packagephobia.com/badge?p=babel-loader
@@ -175,7 +175,7 @@ or are automatically applied via regex from your webpack configuration.
 
 |                                                                                   Name                                                                                    |     Status      |   Install Size   | Description                                                                             |
 | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- |
-|                <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/html5.svg"></a>                |   ![html-npm]   |   ![html-size]   | Exports HTML as string, requires references to static resources                         |
+|               <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/html5-2.svg"></a>               |   ![html-npm]   |   ![html-size]   | Exports HTML as string, requires references to static resources                         |
 |   <a href="https://github.com/pugjs/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a>   |   ![pug-npm]    |   ![pug-size]    | Loads Pug templates and returns a function                                              |
 | <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> |   ![pug3-npm]   |   ![pug3-size]   | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular      |
 |                <a href="https://github.com/peerigon/markdown-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/markdown.svg"></a>                |    ![md-npm]    |    ![md-size]    | Compiles Markdown to HTML                                                               |

package/lib/NormalModule.js

@@ -330,6 +330,8 @@ class NormalModule extends Module {
 		this._isEvaluatingSideEffects = false;
 		/** @type {WeakSet<ModuleGraph> | undefined} */
 		this._addedSideEffectsBailout = undefined;
+		/** @type {Map<string, any>} */
+		this._codeGeneratorData = new Map();
 	}
 
 	/**
@@ -1188,11 +1190,9 @@ class NormalModule extends Module {
 			runtimeRequirements.add(RuntimeGlobals.thisAsExports);
 		}
 
-		/** @type {Map<string, any>} */
-		let data;
+		/** @type {function(): Map<string, any>} */
 		const getData = () => {
-			if (data === undefined) data = new Map();
-			return data;
+			return this._codeGeneratorData;
 		};
 
 		const sources = new Map();
@@ -1223,7 +1223,7 @@ class NormalModule extends Module {
 		const resultEntry = {
 			sources,
 			runtimeRequirements,
-			data
+			data: this._codeGeneratorData
 		};
 		return resultEntry;
 	}
@@ -1371,6 +1371,7 @@ class NormalModule extends Module {
 		write(this.error);
 		write(this._lastSuccessfulBuildMeta);
 		write(this._forceBuild);
+		write(this._codeGeneratorData);
 		super.serialize(context);
 	}
 
@@ -1403,6 +1404,7 @@ class NormalModule extends Module {
 		this.error = read();
 		this._lastSuccessfulBuildMeta = read();
 		this._forceBuild = read();
+		this._codeGeneratorData = read();
 		super.deserialize(context);
 	}
 }

package/lib/dependencies/ImportParserPlugin.js

@@ -137,7 +137,7 @@ class ImportParserPlugin {
 				if (importOptions.webpackInclude !== undefined) {
 					if (
 						!importOptions.webpackInclude ||
-						importOptions.webpackInclude.constructor.name !== "RegExp"
+						!(importOptions.webpackInclude instanceof RegExp)
 					) {
 						parser.state.module.addWarning(
 							new UnsupportedFeatureWarning(
@@ -146,13 +146,13 @@ class ImportParserPlugin {
 							)
 						);
 					} else {
-						include = new RegExp(importOptions.webpackInclude);
+						include = importOptions.webpackInclude;
 					}
 				}
 				if (importOptions.webpackExclude !== undefined) {
 					if (
 						!importOptions.webpackExclude ||
-						importOptions.webpackExclude.constructor.name !== "RegExp"
+						!(importOptions.webpackExclude instanceof RegExp)
 					) {
 						parser.state.module.addWarning(
 							new UnsupportedFeatureWarning(
@@ -161,7 +161,7 @@ class ImportParserPlugin {
 							)
 						);
 					} else {
-						exclude = new RegExp(importOptions.webpackExclude);
+						exclude = importOptions.webpackExclude;
 					}
 				}
 				if (importOptions.webpackExports !== undefined) {

package/lib/javascript/JavascriptParser.js

@@ -3635,17 +3635,27 @@ class JavascriptParser extends Parser {
 			return EMPTY_COMMENT_OPTIONS;
 		}
 		let options = {};
+		/** @type {unknown[]} */
 		let errors = [];
 		for (const comment of comments) {
 			const { value } = comment;
 			if (value && webpackCommentRegExp.test(value)) {
 				// try compile only if webpack options comment is present
 				try {
-					const val = vm.runInNewContext(`(function(){return {${value}};})()`);
-					Object.assign(options, val);
+					for (let [key, val] of Object.entries(
+						vm.runInNewContext(`(function(){return {${value}};})()`)
+					)) {
+						if (typeof val === "object" && val !== null) {
+							if (val.constructor.name === "RegExp") val = new RegExp(val);
+							else val = JSON.parse(JSON.stringify(val));
+						}
+						options[key] = val;
+					}
 				} catch (e) {
-					e.comment = comment;
-					errors.push(e);
+					const newErr = new Error(String(e.message));
+					newErr.stack = String(e.stack);
+					Object.assign(newErr, { comment });
+					errors.push(newErr);
 				}
 			}
 		}

package/lib/optimize/RealContentHashPlugin.js

@@ -178,10 +178,43 @@ class RealContentHashPlugin {
 						}
 					}
 					if (hashToAssets.size === 0) return;
-					const hashRegExp = new RegExp(
-						Array.from(hashToAssets.keys(), quoteMeta).join("|"),
-						"g"
+					const hashRegExps = Array.from(hashToAssets.keys(), quoteMeta).map(
+						hash => new RegExp(hash, "g")
 					);
+
+					/**
+					 * @param {string} str string to be matched against all hashRegExps
+					 * @returns {string[] | null} matches found
+					 */
+					const hashMatch = str => {
+						/** @type {string[]} */
+						const results = [];
+						for (const hashRegExp of hashRegExps) {
+							const matches = str.match(hashRegExp);
+							if (matches) {
+								matches.forEach(match => results.push(match));
+							}
+						}
+						if (results.length) {
+							return results;
+						} else {
+							return null;
+						}
+					};
+
+					/**
+					 * @param {string} str string to be replaced with all hashRegExps
+					 * @param {function(string): string} fn replacement function to use when a hash is found
+					 * @returns {string} replaced content
+					 */
+					const hashReplace = (str, fn) => {
+						let result = str;
+						for (const hashRegExp of hashRegExps) {
+							result = result.replace(hashRegExp, fn);
+						}
+						return result;
+					};
+
 					await Promise.all(
 						assetsWithInfo.map(async asset => {
 							const { name, source, content, hashes } = asset;
@@ -198,7 +231,7 @@ class RealContentHashPlugin {
 								await cacheAnalyse.providePromise(name, etag, () => {
 									const referencedHashes = new Set();
 									let ownHashes = new Set();
-									const inContent = content.match(hashRegExp);
+									const inContent = hashMatch(content);
 									if (inContent) {
 										for (const hash of inContent) {
 											if (hashes.has(hash)) {
@@ -298,7 +331,7 @@ ${referencingAssets
 									identifier,
 									etag,
 									() => {
-										const newContent = asset.content.replace(hashRegExp, hash =>
+										const newContent = hashReplace(asset.content, hash =>
 											hashToNewHash.get(hash)
 										);
 										return new RawSource(newContent);
@@ -323,15 +356,12 @@ ${referencingAssets
 									identifier,
 									etag,
 									() => {
-										const newContent = asset.content.replace(
-											hashRegExp,
-											hash => {
-												if (asset.ownHashes.has(hash)) {
-													return "";
-												}
-												return hashToNewHash.get(hash);
+										const newContent = hashReplace(asset.content, hash => {
+											if (asset.ownHashes.has(hash)) {
+												return "";
 											}
-										);
+											return hashToNewHash.get(hash);
+										});
 										return new RawSource(newContent);
 									}
 								);
@@ -342,7 +372,6 @@ ${referencingAssets
 					for (const oldHash of hashesInOrder) {
 						const assets = hashToAssets.get(oldHash);
 						assets.sort(comparator);
-						const hash = createHash(this._hashFunction);
 						await Promise.all(
 							assets.map(asset =>
 								asset.ownHashes.has(oldHash)
@@ -363,6 +392,7 @@ ${referencingAssets
 						});
 						let newHash = hooks.updateHash.call(assetsContent, oldHash);
 						if (!newHash) {
+							const hash = createHash(this._hashFunction);
 							for (const content of assetsContent) {
 								hash.update(content);
 							}
@@ -374,7 +404,7 @@ ${referencingAssets
 					await Promise.all(
 						assetsWithInfo.map(async asset => {
 							await computeNewContent(asset);
-							const newName = asset.name.replace(hashRegExp, hash =>
+							const newName = hashReplace(asset.name, hash =>
 								hashToNewHash.get(hash)
 							);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack",
-  "version": "5.75.0",
+  "version": "5.76.0",
   "author": "Tobias Koppers @sokra",
   "description": "Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.",
   "license": "MIT",
@@ -76,7 +76,7 @@
     "less": "^4.0.0",
     "less-loader": "^8.0.0",
     "lint-staged": "^11.0.0",
-    "loader-utils": "^2.0.0",
+    "loader-utils": "^2.0.3",
     "lodash": "^4.17.19",
     "lodash-es": "^4.17.15",
     "memfs": "^3.2.0",

package/types.d.ts

@@ -6595,6 +6595,12 @@ declare interface LoaderRunnerLoaderContext<OptionsType> {
 	 * Example: "/abc/resource.js?query#frag"
 	 */
 	resource: string;
+
+	/**
+	 * Target of compilation.
+	 * Example: "web"
+	 */
+	target: string;
 }
 declare class LoaderTargetPlugin {
 	constructor(target: string);