webpack 5.78.0 → 5.80.0

package/lib/css/walkCssTokens.js

@@ -36,14 +36,16 @@ const CC_FORM_FEED = "\f".charCodeAt(0);
 const CC_TAB = "\t".charCodeAt(0);
 const CC_SPACE = " ".charCodeAt(0);
 
-const CC_SLASH = "/".charCodeAt(0);
-const CC_BACK_SLASH = "\\".charCodeAt(0);
+const CC_SOLIDUS = "/".charCodeAt(0);
+const CC_REVERSE_SOLIDUS = "\\".charCodeAt(0);
 const CC_ASTERISK = "*".charCodeAt(0);
 
 const CC_LEFT_PARENTHESIS = "(".charCodeAt(0);
 const CC_RIGHT_PARENTHESIS = ")".charCodeAt(0);
 const CC_LEFT_CURLY = "{".charCodeAt(0);
 const CC_RIGHT_CURLY = "}".charCodeAt(0);
+const CC_LEFT_SQUARE = "[".charCodeAt(0);
+const CC_RIGHT_SQUARE = "]".charCodeAt(0);
 
 const CC_QUOTATION_MARK = '"'.charCodeAt(0);
 const CC_APOSTROPHE = "'".charCodeAt(0);
@@ -62,6 +64,7 @@ const CC_LOWER_E = "e".charCodeAt(0);
 const CC_LOWER_Z = "z".charCodeAt(0);
 const CC_UPPER_A = "A".charCodeAt(0);
 const CC_UPPER_E = "E".charCodeAt(0);
+const CC_UPPER_U = "U".charCodeAt(0);
 const CC_UPPER_Z = "Z".charCodeAt(0);
 const CC_0 = "0".charCodeAt(0);
 const CC_9 = "9".charCodeAt(0);
@@ -99,28 +102,46 @@ const _isWhiteSpace = cc => {
 	);
 };
 
+const _isIdentStartCodePoint = cc => {
+	return (
+		(cc >= CC_LOWER_A && cc <= CC_LOWER_Z) ||
+		(cc >= CC_UPPER_A && cc <= CC_UPPER_Z) ||
+		cc === CC_LOW_LINE ||
+		cc >= 0x80
+	);
+};
+
 /** @type {CharHandler} */
-const consumeSingleCharToken = (input, pos, callbacks) => {
+const consumeDelimToken = (input, pos, callbacks) => {
 	return pos + 1;
 };
 
 /** @type {CharHandler} */
-const consumePotentialComment = (input, pos, callbacks) => {
-	pos++;
-	if (pos === input.length) return pos;
-	let cc = input.charCodeAt(pos);
-	if (cc !== CC_ASTERISK) return pos;
-	for (;;) {
-		pos++;
-		if (pos === input.length) return pos;
-		cc = input.charCodeAt(pos);
-		while (cc === CC_ASTERISK) {
+const consumeComments = (input, pos, callbacks) => {
+	// If the next two input code point are U+002F SOLIDUS (/) followed by a U+002A
+	// ASTERISK (*), consume them and all following code points up to and including
+	// the first U+002A ASTERISK (*) followed by a U+002F SOLIDUS (/), or up to an
+	// EOF code point. Return to the start of this step.
+	//
+	// If the preceding paragraph ended by consuming an EOF code point, this is a parse error.
+	// But we are silent on errors.
+	if (
+		input.charCodeAt(pos) === CC_SOLIDUS &&
+		input.charCodeAt(pos + 1) === CC_ASTERISK
+	) {
+		pos += 1;
+		while (pos < input.length) {
+			if (
+				input.charCodeAt(pos) === CC_ASTERISK &&
+				input.charCodeAt(pos + 1) === CC_SOLIDUS
+			) {
+				pos += 2;
+				break;
+			}
 			pos++;
-			if (pos === input.length) return pos;
-			cc = input.charCodeAt(pos);
-			if (cc === CC_SLASH) return pos + 1;
 		}
 	}
+	return pos;
 };
 
 /** @type {function(number): CharHandler} */
@@ -143,7 +164,7 @@ const _consumeString = (input, pos, end) => {
 			// bad string
 			return pos;
 		}
-		if (cc === CC_BACK_SLASH) {
+		if (cc === CC_REVERSE_SOLIDUS) {
 			// we don't need to fully parse the escaped code point
 			// just skip over a potential new line
 			pos++;
@@ -164,6 +185,12 @@ const _isIdentifierStartCode = cc => {
 	);
 };
 
+const _isTwoCodePointsAreValidEscape = (first, second) => {
+	if (first !== CC_REVERSE_SOLIDUS) return false;
+	if (_isNewLine(second)) return false;
+	return true;
+};
+
 const _isDigit = cc => {
 	return cc >= CC_0 && cc <= CC_9;
 };
@@ -174,13 +201,13 @@ const _startsIdentifier = (input, pos) => {
 		if (pos === input.length) return false;
 		const cc = input.charCodeAt(pos + 1);
 		if (cc === CC_HYPHEN_MINUS) return true;
-		if (cc === CC_BACK_SLASH) {
+		if (cc === CC_REVERSE_SOLIDUS) {
 			const cc = input.charCodeAt(pos + 2);
 			return !_isNewLine(cc);
 		}
 		return _isIdentifierStartCode(cc);
 	}
-	if (cc === CC_BACK_SLASH) {
+	if (cc === CC_REVERSE_SOLIDUS) {
 		const cc = input.charCodeAt(pos + 1);
 		return !_isNewLine(cc);
 	}
@@ -207,6 +234,7 @@ const consumeMinus = (input, pos, callbacks) => {
 	pos++;
 	if (pos === input.length) return pos;
 	const cc = input.charCodeAt(pos);
+	// If the input stream starts with a number, reconsume the current input code point, consume a numeric token, and return it.
 	if (cc === CC_FULL_STOP || _isDigit(cc)) {
 		return consumeNumericToken(input, pos, callbacks);
 	} else if (cc === CC_HYPHEN_MINUS) {
@@ -221,7 +249,7 @@ const consumeMinus = (input, pos, callbacks) => {
 				return callbacks.identifier(input, start, pos);
 			}
 		}
-	} else if (cc === CC_BACK_SLASH) {
+	} else if (cc === CC_REVERSE_SOLIDUS) {
 		if (pos + 1 === input.length) return pos;
 		const cc = input.charCodeAt(pos + 1);
 		if (_isNewLine(cc)) return pos;
@@ -230,11 +258,7 @@ const consumeMinus = (input, pos, callbacks) => {
 			return callbacks.identifier(input, start, pos);
 		}
 	} else if (_isIdentifierStartCode(cc)) {
-		pos++;
-		pos = _consumeIdentifier(input, pos);
-		if (callbacks.identifier !== undefined) {
-			return callbacks.identifier(input, start, pos);
-		}
+		pos = consumeOtherIdentifier(input, pos - 1, callbacks);
 	}
 	return pos;
 };
@@ -288,7 +312,11 @@ const consumeOtherIdentifier = (input, pos, callbacks) => {
 const consumePotentialUrl = (input, pos, callbacks) => {
 	const start = pos;
 	pos = _consumeIdentifier(input, pos);
-	if (pos === start + 3 && input.slice(start, pos + 1) === "url(") {
+	const nextPos = pos + 1;
+	if (
+		pos === start + 3 &&
+		input.slice(start, nextPos).toLowerCase() === "url("
+	) {
 		pos++;
 		let cc = input.charCodeAt(pos);
 		while (_isWhiteSpace(cc)) {
@@ -297,26 +325,15 @@ const consumePotentialUrl = (input, pos, callbacks) => {
 			cc = input.charCodeAt(pos);
 		}
 		if (cc === CC_QUOTATION_MARK || cc === CC_APOSTROPHE) {
-			pos++;
-			const contentStart = pos;
-			pos = _consumeString(input, pos, cc);
-			const contentEnd = pos - 1;
-			cc = input.charCodeAt(pos);
-			while (_isWhiteSpace(cc)) {
-				pos++;
-				if (pos === input.length) return pos;
-				cc = input.charCodeAt(pos);
+			if (callbacks.function !== undefined) {
+				return callbacks.function(input, start, nextPos);
 			}
-			if (cc !== CC_RIGHT_PARENTHESIS) return pos;
-			pos++;
-			if (callbacks.url !== undefined)
-				return callbacks.url(input, start, pos, contentStart, contentEnd);
-			return pos;
+			return nextPos;
 		} else {
 			const contentStart = pos;
 			let contentEnd;
 			for (;;) {
-				if (cc === CC_BACK_SLASH) {
+				if (cc === CC_REVERSE_SOLIDUS) {
 					pos++;
 					if (pos === input.length) return pos;
 					pos++;
@@ -435,7 +452,7 @@ const consumeComma = (input, pos, callbacks) => {
 const _consumeIdentifier = (input, pos) => {
 	for (;;) {
 		const cc = input.charCodeAt(pos);
-		if (cc === CC_BACK_SLASH) {
+		if (cc === CC_REVERSE_SOLIDUS) {
 			pos++;
 			if (pos === input.length) return pos;
 			pos++;
@@ -509,7 +526,6 @@ const consumeLessThan = (input, pos, callbacks) => {
 	return pos + 1;
 };
 
-/** @type {CharHandler} */
 const consumeAt = (input, pos, callbacks) => {
 	const start = pos;
 	pos++;
@@ -523,64 +539,102 @@ const consumeAt = (input, pos, callbacks) => {
 	return pos;
 };
 
+/** @type {CharHandler} */
+const consumeReverseSolidus = (input, pos, callbacks) => {
+	const start = pos;
+	pos++;
+	if (pos === input.length) return pos;
+	// If the input stream starts with a valid escape, reconsume the current input code point, consume an ident-like token, and return it.
+	if (
+		_isTwoCodePointsAreValidEscape(
+			input.charCodeAt(start),
+			input.charCodeAt(pos)
+		)
+	) {
+		return consumeOtherIdentifier(input, pos - 1, callbacks);
+	}
+	// Otherwise, this is a parse error. Return a <delim-token> with its value set to the current input code point.
+	return pos;
+};
+
 const CHAR_MAP = Array.from({ length: 0x80 }, (_, cc) => {
 	// https://drafts.csswg.org/css-syntax/#consume-token
 	switch (cc) {
+		// whitespace
 		case CC_LINE_FEED:
 		case CC_CARRIAGE_RETURN:
 		case CC_FORM_FEED:
 		case CC_TAB:
 		case CC_SPACE:
 			return consumeSpace;
+		// U+0022 QUOTATION MARK (")
 		case CC_QUOTATION_MARK:
-		case CC_APOSTROPHE:
 			return consumeString(cc);
+		// U+0023 NUMBER SIGN (#)
 		case CC_NUMBER_SIGN:
 			return consumeNumberSign;
-		case CC_SLASH:
-			return consumePotentialComment;
-		// case CC_LEFT_SQUARE:
-		// case CC_RIGHT_SQUARE:
-		// case CC_COMMA:
-		// case CC_COLON:
-		// 	return consumeSingleCharToken;
-		case CC_COMMA:
-			return consumeComma;
-		case CC_SEMICOLON:
-			return consumeSemicolon;
+		// U+0027 APOSTROPHE (')
+		case CC_APOSTROPHE:
+			return consumeString(cc);
+		// U+0028 LEFT PARENTHESIS (()
 		case CC_LEFT_PARENTHESIS:
 			return consumeLeftParenthesis;
+		// U+0029 RIGHT PARENTHESIS ())
 		case CC_RIGHT_PARENTHESIS:
 			return consumeRightParenthesis;
-		case CC_LEFT_CURLY:
-			return consumeLeftCurlyBracket;
-		case CC_RIGHT_CURLY:
-			return consumeRightCurlyBracket;
-		case CC_COLON:
-			return consumePotentialPseudo;
+		// U+002B PLUS SIGN (+)
 		case CC_PLUS_SIGN:
 			return consumeNumericToken;
-		case CC_FULL_STOP:
-			return consumeDot;
+		// U+002C COMMA (,)
+		case CC_COMMA:
+			return consumeComma;
+		// U+002D HYPHEN-MINUS (-)
 		case CC_HYPHEN_MINUS:
 			return consumeMinus;
+		// U+002E FULL STOP (.)
+		case CC_FULL_STOP:
+			return consumeDot;
+		// U+003A COLON (:)
+		case CC_COLON:
+			return consumePotentialPseudo;
+		// U+003B SEMICOLON (;)
+		case CC_SEMICOLON:
+			return consumeSemicolon;
+		// U+003C LESS-THAN SIGN (<)
 		case CC_LESS_THAN_SIGN:
 			return consumeLessThan;
+		// U+0040 COMMERCIAL AT (@)
 		case CC_AT_SIGN:
 			return consumeAt;
+		// U+005B LEFT SQUARE BRACKET ([)
+		case CC_LEFT_SQUARE:
+			return consumeDelimToken;
+		// U+005C REVERSE SOLIDUS (\)
+		case CC_REVERSE_SOLIDUS:
+			return consumeReverseSolidus;
+		// U+005D RIGHT SQUARE BRACKET (])
+		case CC_RIGHT_SQUARE:
+			return consumeDelimToken;
+		// U+007B LEFT CURLY BRACKET ({)
+		case CC_LEFT_CURLY:
+			return consumeLeftCurlyBracket;
+		// U+007D RIGHT CURLY BRACKET (})
+		case CC_RIGHT_CURLY:
+			return consumeRightCurlyBracket;
+		// Optimization
 		case CC_LOWER_U:
+		case CC_UPPER_U:
 			return consumePotentialUrl;
-		case CC_LOW_LINE:
-			return consumeOtherIdentifier;
 		default:
+			// digit
 			if (_isDigit(cc)) return consumeNumericToken;
-			if (
-				(cc >= CC_LOWER_A && cc <= CC_LOWER_Z) ||
-				(cc >= CC_UPPER_A && cc <= CC_UPPER_Z)
-			) {
+			// ident-start code point
+			if (_isIdentStartCodePoint(cc)) {
 				return consumeOtherIdentifier;
 			}
-			return consumeSingleCharToken;
+			// EOF, but we don't have it
+			// anything else
+			return consumeDelimToken;
 	}
 });
 
@@ -590,9 +644,15 @@ const CHAR_MAP = Array.from({ length: 0x80 }, (_, cc) => {
  * @returns {void}
  */
 module.exports = (input, callbacks) => {
+	// This section describes how to consume a token from a stream of code points. It will return a single token of any type.
 	let pos = 0;
 	while (pos < input.length) {
+		// Consume comments.
+		pos = consumeComments(input, pos, callbacks);
+
 		const cc = input.charCodeAt(pos);
+
+		// Consume the next input code point.
 		if (cc < 0x80) {
 			pos = CHAR_MAP[cc](input, pos, callbacks);
 		} else {
@@ -604,7 +664,7 @@ module.exports = (input, callbacks) => {
 module.exports.eatComments = (input, pos) => {
 	loop: for (;;) {
 		const cc = input.charCodeAt(pos);
-		if (cc === CC_SLASH) {
+		if (cc === CC_SOLIDUS) {
 			if (pos === input.length) return pos;
 			let cc = input.charCodeAt(pos + 1);
 			if (cc !== CC_ASTERISK) return pos;
@@ -617,7 +677,7 @@ module.exports.eatComments = (input, pos) => {
 					pos++;
 					if (pos === input.length) return pos;
 					cc = input.charCodeAt(pos);
-					if (cc === CC_SLASH) {
+					if (cc === CC_SOLIDUS) {
 						pos++;
 						continue loop;
 					}
@@ -631,7 +691,7 @@ module.exports.eatComments = (input, pos) => {
 module.exports.eatWhitespaceAndComments = (input, pos) => {
 	loop: for (;;) {
 		const cc = input.charCodeAt(pos);
-		if (cc === CC_SLASH) {
+		if (cc === CC_SOLIDUS) {
 			if (pos === input.length) return pos;
 			let cc = input.charCodeAt(pos + 1);
 			if (cc !== CC_ASTERISK) return pos;
@@ -644,7 +704,7 @@ module.exports.eatWhitespaceAndComments = (input, pos) => {
 					pos++;
 					if (pos === input.length) return pos;
 					cc = input.charCodeAt(pos);
-					if (cc === CC_SLASH) {
+					if (cc === CC_SOLIDUS) {
 						pos++;
 						continue loop;
 					}

package/lib/dependencies/CssUrlDependency.js

@@ -27,12 +27,12 @@ class CssUrlDependency extends ModuleDependency {
 	/**
 	 * @param {string} request request
 	 * @param {[number, number]} range range of the argument
-	 * @param {string} cssFunctionKind kind of css function, e. g. url(), image()
+	 * @param {"string" | "url"} urlType dependency type e.g. url() or string
 	 */
-	constructor(request, range, cssFunctionKind) {
+	constructor(request, range, urlType) {
 		super(request);
 		this.range = range;
-		this.cssFunctionKind = cssFunctionKind;
+		this.urlType = urlType;
 	}
 
 	get type() {
@@ -54,13 +54,13 @@ class CssUrlDependency extends ModuleDependency {
 
 	serialize(context) {
 		const { write } = context;
-		write(this.cssFunctionKind);
+		write(this.urlType);
 		super.serialize(context);
 	}
 
 	deserialize(context) {
 		const { read } = context;
-		this.cssFunctionKind = read();
+		this.urlType = read();
 		super.deserialize(context);
 	}
 }
@@ -108,22 +108,34 @@ CssUrlDependency.Template = class CssUrlDependencyTemplate extends (
 	apply(
 		dependency,
 		source,
-		{ runtime, moduleGraph, runtimeTemplate, codeGenerationResults }
+		{ moduleGraph, runtimeTemplate, codeGenerationResults }
 	) {
 		const dep = /** @type {CssUrlDependency} */ (dependency);
 
-		source.replace(
-			dep.range[0],
-			dep.range[1] - 1,
-			`${dep.cssFunctionKind}(${cssEscapeString(
-				runtimeTemplate.assetUrl({
-					publicPath: "",
-					runtime,
-					module: moduleGraph.getModule(dep),
-					codeGenerationResults
-				})
-			)})`
-		);
+		let newValue;
+
+		switch (dep.urlType) {
+			case "string":
+				newValue = cssEscapeString(
+					runtimeTemplate.assetUrl({
+						publicPath: "",
+						module: moduleGraph.getModule(dep),
+						codeGenerationResults
+					})
+				);
+				break;
+			case "url":
+				newValue = `url(${cssEscapeString(
+					runtimeTemplate.assetUrl({
+						publicPath: "",
+						module: moduleGraph.getModule(dep),
+						codeGenerationResults
+					})
+				)})`;
+				break;
+		}
+
+		source.replace(dep.range[0], dep.range[1] - 1, newValue);
 	}
 };
 

package/lib/dependencies/HarmonyImportDependencyParserPlugin.js

@@ -196,6 +196,8 @@ module.exports = class HarmonyImportDependencyParserPlugin {
 					exportPresenceMode,
 					settings.assertions
 				);
+				dep.referencedPropertiesInDestructuring =
+					parser.destructuringAssignmentPropertiesFor(expr);
 				dep.shorthand = parser.scope.inShorthand;
 				dep.directImport = true;
 				dep.asiSafe = !parser.isAsiPosition(expr.range[0]);
@@ -233,6 +235,8 @@ module.exports = class HarmonyImportDependencyParserPlugin {
 						exportPresenceMode,
 						settings.assertions
 					);
+					dep.referencedPropertiesInDestructuring =
+						parser.destructuringAssignmentPropertiesFor(expr);
 					dep.asiSafe = !parser.isAsiPosition(expr.range[0]);
 					dep.loc = expr.loc;
 					parser.state.module.addDependency(dep);

package/lib/dependencies/HarmonyImportSpecifierDependency.js

@@ -52,6 +52,8 @@ class HarmonyImportSpecifierDependency extends HarmonyImportDependency {
 		this.asiSafe = undefined;
 		/** @type {Set<string> | boolean} */
 		this.usedByExports = undefined;
+		/** @type {Set<string>} */
+		this.referencedPropertiesInDestructuring = undefined;
 	}
 
 	// TODO webpack 6 remove
@@ -121,7 +123,7 @@ class HarmonyImportSpecifierDependency extends HarmonyImportDependency {
 	 */
 	getReferencedExports(moduleGraph, runtime) {
 		let ids = this.getIds(moduleGraph);
-		if (ids.length === 0) return Dependency.EXPORTS_OBJECT_REFERENCED;
+		if (ids.length === 0) return this._getReferencedExportsInDestructuring();
 		let namespaceObjectAsContext = this.namespaceObjectAsContext;
 		if (ids[0] === "default") {
 			const selfModule = moduleGraph.getParentModule(this);
@@ -134,7 +136,8 @@ class HarmonyImportSpecifierDependency extends HarmonyImportDependency {
 			) {
 				case "default-only":
 				case "default-with-named":
-					if (ids.length === 1) return Dependency.EXPORTS_OBJECT_REFERENCED;
+					if (ids.length === 1)
+						return this._getReferencedExportsInDestructuring();
 					ids = ids.slice(1);
 					namespaceObjectAsContext = true;
 					break;
@@ -152,7 +155,27 @@ class HarmonyImportSpecifierDependency extends HarmonyImportDependency {
 			ids = ids.slice(0, -1);
 		}
 
-		return [ids];
+		return this._getReferencedExportsInDestructuring(ids);
+	}
+
+	/**
+	 * @param {string[]=} ids ids
+	 * @returns {(string[] | ReferencedExport)[]} referenced exports
+	 */
+	_getReferencedExportsInDestructuring(ids) {
+		if (this.referencedPropertiesInDestructuring) {
+			/** @type {ReferencedExport[]} */
+			const refs = [];
+			for (const key of this.referencedPropertiesInDestructuring) {
+				refs.push({
+					name: ids ? ids.concat([key]) : [key],
+					canMangle: false
+				});
+			}
+			return refs;
+		} else {
+			return ids ? [ids] : Dependency.EXPORTS_OBJECT_REFERENCED;
+		}
 	}
 
 	/**
@@ -226,6 +249,7 @@ class HarmonyImportSpecifierDependency extends HarmonyImportDependency {
 		write(this.shorthand);
 		write(this.asiSafe);
 		write(this.usedByExports);
+		write(this.referencedPropertiesInDestructuring);
 		super.serialize(context);
 	}
 
@@ -241,6 +265,7 @@ class HarmonyImportSpecifierDependency extends HarmonyImportDependency {
 		this.shorthand = read();
 		this.asiSafe = read();
 		this.usedByExports = read();
+		this.referencedPropertiesInDestructuring = read();
 		super.deserialize(context);
 	}
 }

package/lib/dependencies/ImportMetaPlugin.js

@@ -75,6 +75,17 @@ class ImportMetaPlugin {
 					}
 
 					/// import.meta direct ///
+					const webpackVersion = parseInt(
+						require("../../package.json").version,
+						10
+					);
+					const importMetaUrl = () =>
+						JSON.stringify(getUrl(parser.state.module));
+					const importMetaWebpackVersion = () => JSON.stringify(webpackVersion);
+					const importMetaUnknownProperty = members =>
+						`${Template.toNormalComment(
+							"unsupported import.meta." + members.join(".")
+						)} undefined${propertyAccess(members, 1)}`;
 					parser.hooks.typeof
 						.for("import.meta")
 						.tap(
@@ -84,20 +95,48 @@ class ImportMetaPlugin {
 					parser.hooks.expression
 						.for("import.meta")
 						.tap(PLUGIN_NAME, metaProperty => {
-							const CriticalDependencyWarning = getCriticalDependencyWarning();
-							parser.state.module.addWarning(
-								new ModuleDependencyWarning(
-									parser.state.module,
-									new CriticalDependencyWarning(
-										"Accessing import.meta directly is unsupported (only property access is supported)"
-									),
-									metaProperty.loc
-								)
-							);
-							const dep = new ConstDependency(
-								`${parser.isAsiPosition(metaProperty.range[0]) ? ";" : ""}({})`,
-								metaProperty.range
-							);
+							const referencedPropertiesInDestructuring =
+								parser.destructuringAssignmentPropertiesFor(metaProperty);
+							if (!referencedPropertiesInDestructuring) {
+								const CriticalDependencyWarning =
+									getCriticalDependencyWarning();
+								parser.state.module.addWarning(
+									new ModuleDependencyWarning(
+										parser.state.module,
+										new CriticalDependencyWarning(
+											"Accessing import.meta directly is unsupported (only property access or destructuring is supported)"
+										),
+										metaProperty.loc
+									)
+								);
+								const dep = new ConstDependency(
+									`${
+										parser.isAsiPosition(metaProperty.range[0]) ? ";" : ""
+									}({})`,
+									metaProperty.range
+								);
+								dep.loc = metaProperty.loc;
+								parser.state.module.addPresentationalDependency(dep);
+								return true;
+							}
+
+							let str = "";
+							for (const prop of referencedPropertiesInDestructuring) {
+								switch (prop) {
+									case "url":
+										str += `url: ${importMetaUrl()},`;
+										break;
+									case "webpack":
+										str += `webpack: ${importMetaWebpackVersion()},`;
+										break;
+									default:
+										str += `[${JSON.stringify(
+											prop
+										)}]: ${importMetaUnknownProperty([prop])},`;
+										break;
+								}
+							}
+							const dep = new ConstDependency(`({${str}})`, metaProperty.range);
 							dep.loc = metaProperty.loc;
 							parser.state.module.addPresentationalDependency(dep);
 							return true;
@@ -120,10 +159,7 @@ class ImportMetaPlugin {
 					parser.hooks.expression
 						.for("import.meta.url")
 						.tap(PLUGIN_NAME, expr => {
-							const dep = new ConstDependency(
-								JSON.stringify(getUrl(parser.state.module)),
-								expr.range
-							);
+							const dep = new ConstDependency(importMetaUrl(), expr.range);
 							dep.loc = expr.loc;
 							parser.state.module.addPresentationalDependency(dep);
 							return true;
@@ -140,10 +176,6 @@ class ImportMetaPlugin {
 						});
 
 					/// import.meta.webpack ///
-					const webpackVersion = parseInt(
-						require("../../package.json").version,
-						10
-					);
 					parser.hooks.typeof
 						.for("import.meta.webpack")
 						.tap(
@@ -154,7 +186,7 @@ class ImportMetaPlugin {
 						.for("import.meta.webpack")
 						.tap(
 							PLUGIN_NAME,
-							toConstantDependency(parser, JSON.stringify(webpackVersion))
+							toConstantDependency(parser, importMetaWebpackVersion())
 						);
 					parser.hooks.evaluateTypeof
 						.for("import.meta.webpack")
@@ -168,9 +200,7 @@ class ImportMetaPlugin {
 						.for("import.meta")
 						.tap(PLUGIN_NAME, (expr, members) => {
 							const dep = new ConstDependency(
-								`${Template.toNormalComment(
-									"unsupported import.meta." + members.join(".")
-								)} undefined${propertyAccess(members, 1)}`,
+								importMetaUnknownProperty(members),
 								expr.range
 							);
 							dep.loc = expr.loc;