Add 'outputPath' configuration option for resource asset modules

Knagis · Knagis · commit 2fc4c8da1b32 · 2022-01-18T13:45:42.000+02:00
diff --git a/declarations/WebpackOptions.d.ts b/declarations/WebpackOptions.d.ts
@@ -692,6 +692,15 @@ export type AssetGeneratorDataUrlFunction = (
  */
 export type AssetGeneratorOptions = AssetInlineGeneratorOptions &
 	AssetResourceGeneratorOptions;
+/**
+ * Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.
+ */
+export type AssetModuleOutputPath =
+	| string
+	| ((
+			pathData: import("../lib/Compilation").PathData,
+			assetInfo?: import("../lib/Compilation").AssetInfo
+	  ) => string);
 /**
  * Function that executes for module and should return whenever asset should be inlined as DataUrl.
  */
@@ -2705,6 +2714,10 @@ export interface AssetResourceGeneratorOptions {
 	 * Specifies the filename template of output files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
 	 */
 	filename?: FilenameTemplate;
+	/**
+	 * Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.
+	 */
+	outputPath?: AssetModuleOutputPath;
 	/**
 	 * The 'publicPath' specifies the public URL address of the output files when referenced in a browser.
 	 */
diff --git a/lib/asset/AssetGenerator.js b/lib/asset/AssetGenerator.js
@@ -15,6 +15,7 @@ const { makePathsRelative } = require("../util/identifier");
 
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../../declarations/WebpackOptions").AssetGeneratorOptions} AssetGeneratorOptions */
+/** @typedef {import("../../declarations/WebpackOptions").AssetModuleOutputPath} AssetModuleOutputPath */
 /** @typedef {import("../../declarations/WebpackOptions").RawPublicPath} RawPublicPath */
 /** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Compiler")} Compiler */
@@ -117,13 +118,15 @@ class AssetGenerator extends Generator {
 	 * @param {AssetGeneratorOptions["dataUrl"]=} dataUrlOptions the options for the data url
 	 * @param {string=} filename override for output.assetModuleFilename
 	 * @param {RawPublicPath=} publicPath override for output.assetModulePublicPath
+	 * @param {AssetModuleOutputPath=} outputPath the output path for the emitted file which is not included in the runtime import
 	 * @param {boolean=} emit generate output asset
 	 */
-	constructor(dataUrlOptions, filename, publicPath, emit) {
+	constructor(dataUrlOptions, filename, publicPath, outputPath, emit) {
 		super();
 		this.dataUrlOptions = dataUrlOptions;
 		this.filename = filename;
 		this.publicPath = publicPath;
+		this.outputPath = outputPath;
 		this.emit = emit;
 	}
 
@@ -276,15 +279,31 @@ class AssetGenerator extends Generator {
 						sourceFilename,
 						...assetInfo
 					};
-					module.buildInfo.filename = filename;
+					let outputFilename = filename;
+					if (this.outputPath) {
+						const { path: outputPath, info } =
+							runtimeTemplate.compilation.getAssetPathWithInfo(
+								this.outputPath,
+								{
+									module,
+									runtime,
+									filename: sourceFilename,
+									chunkGraph,
+									contentHash
+								}
+							);
+						assetInfo = mergeAssetInfo(assetInfo, info);
+						outputFilename = path.posix.join(outputPath, filename);
+					}
+					module.buildInfo.filename = outputFilename;
 					module.buildInfo.assetInfo = assetInfo;
 					if (getData) {
 						// Due to code generation caching module.buildInfo.XXX can't used to store such information
 						// It need to be stored in the code generation results instead, where it's cached too
 						// TODO webpack 6 For back-compat reasons we also store in on module.buildInfo
 						const data = getData();
 						data.set("fullContentHash", fullHash);
-						data.set("filename", filename);
+						data.set("filename", outputFilename);
 						data.set("assetInfo", assetInfo);
 					}
 
diff --git a/lib/asset/AssetModulesPlugin.js b/lib/asset/AssetModulesPlugin.js
@@ -137,9 +137,11 @@ class AssetModulesPlugin {
 
 							let filename = undefined;
 							let publicPath = undefined;
+							let outputPath = undefined;
 							if (type !== "asset/inline") {
 								filename = generatorOptions.filename;
 								publicPath = generatorOptions.publicPath;
+								outputPath = generatorOptions.outputPath;
 							}
 
 							const AssetGenerator = getAssetGenerator();
@@ -148,6 +150,7 @@ class AssetModulesPlugin {
 								dataUrl,
 								filename,
 								publicPath,
+								outputPath,
 								generatorOptions.emit !== false
 							);
 						});
diff --git a/schemas/WebpackOptions.check.js b/schemas/WebpackOptions.check.js
diff --git a/schemas/WebpackOptions.json b/schemas/WebpackOptions.json
@@ -108,6 +108,9 @@
         "filename": {
           "$ref": "#/definitions/FilenameTemplate"
         },
+        "outputPath": {
+          "$ref": "#/definitions/AssetModuleOutputPath"
+        },
         "publicPath": {
           "$ref": "#/definitions/RawPublicPath"
         }
@@ -136,6 +139,19 @@
         }
       ]
     },
+    "AssetModuleOutputPath": {
+      "description": "Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.",
+      "anyOf": [
+        {
+          "type": "string",
+          "absolutePath": false
+        },
+        {
+          "instanceof": "Function",
+          "tsType": "((pathData: import(\"../lib/Compilation\").PathData, assetInfo?: import(\"../lib/Compilation\").AssetInfo) => string)"
+        }
+      ]
+    },
     "AssetParserDataUrlFunction": {
       "description": "Function that executes for module and should return whenever asset should be inlined as DataUrl.",
       "instanceof": "Function",
@@ -182,6 +198,9 @@
         "filename": {
           "$ref": "#/definitions/FilenameTemplate"
         },
+        "outputPath": {
+          "$ref": "#/definitions/AssetModuleOutputPath"
+        },
         "publicPath": {
           "$ref": "#/definitions/RawPublicPath"
         }
diff --git a/schemas/plugins/asset/AssetGeneratorOptions.check.js b/schemas/plugins/asset/AssetGeneratorOptions.check.js
diff --git a/schemas/plugins/asset/AssetResourceGeneratorOptions.check.js b/schemas/plugins/asset/AssetResourceGeneratorOptions.check.js
diff --git a/test/__snapshots__/Cli.basictest.js.snap b/test/__snapshots__/Cli.basictest.js.snap
@@ -1283,6 +1283,19 @@ Object {
     "multiple": false,
     "simpleType": "string",
   },
+  "module-generator-asset-output-path": Object {
+    "configs": Array [
+      Object {
+        "description": "Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.",
+        "multiple": false,
+        "path": "module.generator.asset.outputPath",
+        "type": "string",
+      },
+    ],
+    "description": "Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.",
+    "multiple": false,
+    "simpleType": "string",
+  },
   "module-generator-asset-public-path": Object {
     "configs": Array [
       Object {
@@ -1322,6 +1335,19 @@ Object {
     "multiple": false,
     "simpleType": "string",
   },
+  "module-generator-asset-resource-output-path": Object {
+    "configs": Array [
+      Object {
+        "description": "Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.",
+        "multiple": false,
+        "path": "module.generator.asset/resource.outputPath",
+        "type": "string",
+      },
+    ],
+    "description": "Emit the asset in the specified folder instead relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.",
+    "multiple": false,
+    "simpleType": "string",
+  },
   "module-generator-asset-resource-public-path": Object {
     "configs": Array [
       Object {
diff --git a/test/configCases/asset-modules/emit/index.js b/test/configCases/asset-modules/emit/index.js
@@ -1,11 +1,12 @@
 import url from "../_images/file.png";
+import url2 from "../_images/file.jpg";
 import fs from "fs";
+import path from "path";
 
 it("should output asset with path", () => {
 	expect(url).toEqual("images/file.png");
-	expect(() => fs.statSync(url)).toThrowError(
-		expect.objectContaining({
-			code: "ENOENT"
-		})
-	);
+	expect(url2).toEqual("images/file.jpg");
+
+	expect(fs.existsSync(path.join(__STATS__.outputPath, url))).toBe(false);
+	expect(fs.existsSync(path.join(__STATS__.outputPath, url2))).toBe(true);
 });
diff --git a/test/configCases/asset-modules/emit/webpack.config.js b/test/configCases/asset-modules/emit/webpack.config.js
@@ -8,10 +8,14 @@ module.exports = {
 		rules: [
 			{
 				test: /\.png$/,
-				type: "asset",
+				type: "asset/resource",
 				generator: {
 					emit: false
 				}
+			},
+			{
+				test: /\.jpg$/,
+				type: "asset/resource"
 			}
 		]
 	}
diff --git a/test/configCases/asset-modules/rule-generator-outputPath/index.js b/test/configCases/asset-modules/rule-generator-outputPath/index.js
@@ -0,0 +1,10 @@
+import url from "../_images/file.png";
+import fs from "fs";
+import path from "path";
+
+it("should emit asset with module.generator.asset.outputPath", () => {
+	expect(url).toEqual("https://cdn/assets/file.png");
+
+	const emitPath = path.join(__STATS__.outputPath, "cdn-assets/file.png")
+	expect(fs.existsSync(emitPath)).toBe(true);
+});
diff --git a/test/configCases/asset-modules/rule-generator-outputPath/webpack.config.js b/test/configCases/asset-modules/rule-generator-outputPath/webpack.config.js
@@ -0,0 +1,19 @@
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	mode: "development",
+	output: {
+		assetModuleFilename: "file[ext]"
+	},
+	module: {
+		rules: [
+			{
+				test: /\.png$/,
+				type: "asset/resource",
+				generator: {
+					publicPath: "https://cdn/assets/",
+					outputPath: "cdn-assets/"
+				}
+			}
+		]
+	}
+};
diff --git a/types.d.ts b/types.d.ts

Original file line number	Diff line number	Diff line change
`@@ -8,10 +8,14 @@ module.exports = {`
`8`	`8`	`rules: [`
`9`	`9`	`{`
`10`	`10`	`test: /\.png$/,`
`11`		`- type: "asset",`
	`11`	`+ type: "asset/resource",`
`12`	`12`	`generator: {`
`13`	`13`	`emit: false`
`14`	`14`	`}`
	`15`	`+ },`
	`16`	`+ {`
	`17`	`+ test: /\.jpg$/,`
	`18`	`+ type: "asset/resource"`
`15`	`19`	`}`
`16`	`20`	`]`
`17`	`21`	`}`