fix resource name when filename is data uri

- infer extention from mime type - set path like replacement to empty string
zhangming · Feb 1, 2022 · c872a68 · c872a68
1 parent f593d98
commit c872a68
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 23 deletions.
diff --git a/lib/TemplatedPathPlugin.js b/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

diff --git a/test/configCases/asset-modules/resource-from-data-uri/index.js b/test/configCases/asset-modules/resource-from-data-uri/index.js
@@ -0,0 +1,5 @@
+import asset from "data:image/svg+xml;utf8,<svg><title>icon-square-small</title></svg>"
+
+it("should compile with correct filename", () => {
+	expect(asset).toMatch(/public\/media\/\.[0-9a-zA-Z]{8}\.svg/);
+});
diff --git a/test/configCases/asset-modules/resource-from-data-uri/webpack.config.js b/test/configCases/asset-modules/resource-from-data-uri/webpack.config.js
@@ -0,0 +1,16 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	output: {
+		assetModuleFilename: "media/[name].[contenthash:8][ext]",
+		publicPath: "public/"
+	},
+	module: {
+		rules: [
+			{
+				mimetype: "image/svg+xml",
+				type: "asset/resource"
+			}
+		]
+	},
+	target: "web"
+};