Merge pull request #17252 from snitin315/feat/appen-sourcemap-fn

feat(SourceMapDevToolPlugin): support append option as a function

declarations/plugins/SourceMapDevToolPlugin.d.ts

@@ -17,7 +17,13 @@ export interface SourceMapDevToolPluginOptions {
 	/**
 	 * Appends the given value to the original asset. Usually the #sourceMappingURL comment. [url] is replaced with a URL to the source map file. false disables the appending.
 	 */
-	append?: (false | null) | string;
+	append?:
+		| (false | null)
+		| string
+		| ((
+				pathData: import("../../lib/Compilation").PathData,
+				assetInfo?: import("../../lib/Compilation").AssetInfo
+		  ) => string);
 	/**
 	 * Indicates whether column mappings should be used (defaults to true).
 	 */

lib/EvalSourceMapDevToolPlugin.js

@@ -48,7 +48,9 @@ class EvalSourceMapDevToolPlugin {
 			options = inputOptions;
 		}
 		this.sourceMapComment =
-			options.append || "//# sourceURL=[module]\n//# sourceMappingURL=[url]";
+			options.append && typeof options.append !== "function"
+				? options.append
+				: "//# sourceURL=[module]\n//# sourceMappingURL=[url]";
 		this.moduleFilenameTemplate =
 			options.moduleFilenameTemplate ||
 			"webpack://[namespace]/[resource-path]?[hash]";

lib/SourceMapDevToolPlugin.js

@@ -23,6 +23,7 @@ const { makePathsAbsolute } = require("./util/identifier");
 /** @typedef {import("./CacheFacade").ItemCacheFacade} ItemCacheFacade */
 /** @typedef {import("./Chunk")} Chunk */
 /** @typedef {import("./Compilation").AssetInfo} AssetInfo */
+/** @typedef {import("./Compilation").PathData} PathData */
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./Module")} Module */
 /** @typedef {import("./NormalModule").SourceMap} SourceMap */
@@ -139,7 +140,7 @@ class SourceMapDevToolPlugin {
 
 		/** @type {string | false} */
 		this.sourceMapFilename = options.filename;
-		/** @type {string | false} */
+		/** @type {string | false | (function(PathData, AssetInfo=): string)}} */
 		this.sourceMappingURLComment =
 			options.append === false
 				? false
@@ -447,13 +448,14 @@ class SourceMapDevToolPlugin {
 										);
 									}
 
-									/** @type {string | false} */
+									/** @type {string | false | (function(PathData, AssetInfo=): string)} */
 									let currentSourceMappingURLComment = sourceMappingURLComment;
 									let cssExtensionDetected =
 										CSS_EXTENSION_DETECT_REGEXP.test(file);
 									resetRegexpState(CSS_EXTENSION_DETECT_REGEXP);
 									if (
 										currentSourceMappingURLComment !== false &&
+										typeof currentSourceMappingURLComment !== "function" &&
 										cssExtensionDetected
 									) {
 										currentSourceMappingURLComment =
@@ -534,6 +536,11 @@ class SourceMapDevToolPlugin {
 												"SourceMapDevToolPlugin: append can't be false when no filename is provided"
 											);
 										}
+										if (typeof currentSourceMappingURLComment === "function") {
+											throw new Error(
+												"SourceMapDevToolPlugin: append can't be a function when no filename is provided"
+											);
+										}
 										/**
 										 * Add source map as data url to asset
 										 */

schemas/plugins/SourceMapDevToolPlugin.json

@@ -47,6 +47,10 @@
         {
           "type": "string",
           "minLength": 1
+        },
+        {
+          "instanceof": "Function",
+          "tsType": "((pathData: import(\"../../lib/Compilation\").PathData, assetInfo?: import(\"../../lib/Compilation\").AssetInfo) => string)"
         }
       ]
     },

test/configCases/plugins/source-map-dev-tool-plugin-append-function/index.js

@@ -0,0 +1,6 @@
+it("should have [file] replaced with chunk filename in append", function() {
+	const fs = require("fs"),
+			path = require("path");
+	const source = fs.readFileSync(path.join(__dirname, "some-test.js"), "utf-8");
+	expect(source).toMatch("//# sourceMappingURL=http://localhost:50505/some-test.js.map");
+});

test/configCases/plugins/source-map-dev-tool-plugin-append-function/test.js

@@ -0,0 +1,5 @@
+const testObject = {
+	a: 1
+};
+
+module.exports = testObject;

test/configCases/plugins/source-map-dev-tool-plugin-append-function/webpack.config.js

@@ -0,0 +1,26 @@
+const webpack = require("../../../../");
+const TerserPlugin = require("terser-webpack-plugin");
+
+/** @type {import("../../../../types").Configuration} */
+module.exports = {
+	node: {
+		__dirname: false,
+		__filename: false
+	},
+	entry: {
+		bundle0: ["./index.js"],
+		"some-test": ["./test.js"]
+	},
+	output: {
+		filename: "[name].js"
+	},
+	optimization: {
+		minimizer: [new TerserPlugin()]
+	},
+	plugins: [
+		new webpack.SourceMapDevToolPlugin({
+			filename: "sourcemaps/[file].map",
+			append: data => `\n//# sourceMappingURL=http://localhost:50505/[file].map`
+		})
+	]
+};

types.d.ts

@@ -11649,7 +11649,10 @@ declare interface SourceMap {
 declare class SourceMapDevToolPlugin {
 	constructor(options?: SourceMapDevToolPluginOptions);
 	sourceMapFilename: string | false;
-	sourceMappingURLComment: string | false;
+	sourceMappingURLComment:
+		| string
+		| false
+		| ((arg0: PathData, arg1?: AssetInfo) => string);
 	moduleFilenameTemplate: string | Function;
 	fallbackModuleFilenameTemplate: string | Function;
 	namespace: string;
@@ -11664,7 +11667,11 @@ declare interface SourceMapDevToolPluginOptions {
 	/**
 	 * Appends the given value to the original asset. Usually the #sourceMappingURL comment. [url] is replaced with a URL to the source map file. false disables the appending.
 	 */
-	append?: null | string | false;
+	append?:
+		| null
+		| string
+		| false
+		| ((pathData: PathData, assetInfo?: AssetInfo) => string);
 
 	/**
 	 * Indicates whether column mappings should be used (defaults to true).