refactor: `devtool` option

declarations/WebpackOptions.d.ts

@@ -301,7 +301,20 @@ export interface WebpackOptions {
 	/**
 	 * A developer tool to enhance debugging.
 	 */
-	devtool?: string | false;
+	devtool?:
+		| false
+		| "eval"
+		| "cheap-eval-source-map"
+		| "cheap-module-eval-source-map"
+		| "eval-source-map"
+		| "cheap-source-map"
+		| "cheap-module-source-map"
+		| "inline-cheap-source-map"
+		| "inline-cheap-module-source-map"
+		| "source-map"
+		| "inline-source-map"
+		| "hidden-source-map"
+		| "nosources-source-map";
 	/**
 	 * The entry point(s) of the compilation.
 	 */

examples/source-map/webpack.config.js

@@ -1,16 +1,18 @@
 var path = require("path");
 
 module.exports = [
+	"eval",
 	"cheap-eval-source-map",
 	"cheap-module-eval-source-map",
-	"cheap-module-source-map",
-	"cheap-source-map",
-	"eval",
 	"eval-source-map",
-	"hidden-source-map",
+	"cheap-source-map",
+	"cheap-module-source-map",
+	"inline-cheap-source-map",
+	"inline-cheap-module-source-map",
+	"source-map",
 	"inline-source-map",
-	"nosources-source-map",
-	"source-map"
+	"hidden-source-map",
+	"nosources-source-map"
 ].map(devtool => ({
 	mode: "development",
 	entry: {

lib/WebpackOptionsApply.js

@@ -237,29 +237,13 @@ class WebpackOptionsApply extends OptionsApply {
 			new ModuleInfoHeaderPlugin().apply(compiler);
 		}
 
-		if (
-			options.devtool &&
-			(options.devtool.includes("sourcemap") ||
-				options.devtool.includes("source-map"))
-		) {
+		if (options.devtool && options.devtool.includes("source-map")) {
 			const hidden = options.devtool.includes("hidden");
 			const inline = options.devtool.includes("inline");
 			const evalWrapped = options.devtool.includes("eval");
 			const cheap = options.devtool.includes("cheap");
 			const moduleMaps = options.devtool.includes("module");
 			const noSources = options.devtool.includes("nosources");
-			const legacy = options.devtool.includes("@");
-			const modern = options.devtool.includes("#");
-			const comment =
-				legacy && modern
-					? "\n/*\n//@ source" +
-					  "MappingURL=[url]\n//# source" +
-					  "MappingURL=[url]\n*/"
-					: legacy
-					? "\n/*\n//@ source" + "MappingURL=[url]\n*/"
-					: modern
-					? "\n//# source" + "MappingURL=[url]"
-					: null;
 			const Plugin = evalWrapped
 				? require("./EvalSourceMapDevToolPlugin")
 				: require("./SourceMapDevToolPlugin");
@@ -268,26 +252,15 @@ class WebpackOptionsApply extends OptionsApply {
 				moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
 				fallbackModuleFilenameTemplate:
 					options.output.devtoolFallbackModuleFilenameTemplate,
-				append: hidden ? false : comment,
+				append: hidden ? false : "\n//# source" + "MappingURL=[url]",
 				module: moduleMaps ? true : cheap ? false : true,
 				columns: cheap ? false : true,
 				noSources: noSources,
 				namespace: options.output.devtoolNamespace
 			}).apply(compiler);
 		} else if (options.devtool && options.devtool.includes("eval")) {
-			const legacy = options.devtool.includes("@");
-			const modern = options.devtool.includes("#");
-			const comment =
-				legacy && modern
-					? "\n//@ sourceURL=[url]\n//# sourceURL=[url]"
-					: legacy
-					? "\n//@ sourceURL=[url]"
-					: modern
-					? "\n//# sourceURL=[url]"
-					: null;
 			const EvalDevToolModulePlugin = require("./EvalDevToolModulePlugin");
 			new EvalDevToolModulePlugin({
-				sourceUrlComment: comment,
 				moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
 				namespace: options.output.devtoolNamespace
 			}).apply(compiler);

lib/WebpackOptionsDefaulter.js

@@ -448,7 +448,7 @@ class WebpackOptionsDefaulter extends OptionsDefaulter {
 						cache: true,
 						parallel: true,
 						sourceMap:
-							(options.devtool && /source-?map/.test(options.devtool)) ||
+							(options.devtool && options.devtool.includes("source-map")) ||
 							(options.plugins &&
 								options.plugins.some(p => p instanceof SourceMapDevToolPlugin)),
 						terserOptions: {

schemas/WebpackOptions.json

@@ -2382,13 +2382,20 @@
     },
     "devtool": {
       "description": "A developer tool to enhance debugging.",
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "enum": [false]
-        }
+      "enum": [
+        false,
+        "eval",
+        "cheap-eval-source-map",
+        "cheap-module-eval-source-map",
+        "eval-source-map",
+        "cheap-source-map",
+        "cheap-module-source-map",
+        "inline-cheap-source-map",
+        "inline-cheap-module-source-map",
+        "source-map",
+        "inline-source-map",
+        "hidden-source-map",
+        "nosources-source-map"
       ]
     },
     "entry": {

test/TestCasesAllCombined.test.js

@@ -5,7 +5,7 @@ describe("TestCases", () => {
 	describeCases({
 		name: "all-combined",
 		mode: "production",
-		devtool: "#@source-map",
+		devtool: "source-map",
 		minimize: true,
 		optimization: {
 			moduleIds: "named",

test/TestCasesDevelopment.test.js

@@ -4,6 +4,6 @@ describe("TestCases", () => {
 	describeCases({
 		name: "development",
 		mode: "development",
-		devtool: "none"
+		devtool: false
 	});
 });

test/TestCasesDevtoolCheapEvalModuleSourceMap.test.js

@@ -3,6 +3,6 @@ const { describeCases } = require("./TestCases.template");
 describe("TestCases", () => {
 	describeCases({
 		name: "devtool-cheap-eval-module-source-map",
-		devtool: "cheap-eval-module-source-map"
+		devtool: "cheap-module-eval-source-map"
 	});
 });

test/TestCasesDevtoolCheapInlineSourceMap.test.js

@@ -3,6 +3,6 @@ const { describeCases } = require("./TestCases.template");
 describe("TestCases", () => {
 	describeCases({
 		name: "devtool-cheap-inline-source-map",
-		devtool: "cheap-inline-source-map"
+		devtool: "inline-cheap-source-map"
 	});
 });

test/TestCasesDevtoolEvalSourceMap.test.js

@@ -3,6 +3,6 @@ const { describeCases } = require("./TestCases.template");
 describe("TestCases", () => {
 	describeCases({
 		name: "devtool-eval-source-map",
-		devtool: "#eval-source-map"
+		devtool: "eval-source-map"
 	});
 });

test/TestCasesDevtoolSourceMap.test.js

@@ -3,6 +3,6 @@ const { describeCases } = require("./TestCases.template");
 describe("TestCases", () => {
 	describeCases({
 		name: "devtool-source-map",
-		devtool: "#@source-map"
+		devtool: "source-map"
 	});
 });

test/TestCasesMinimizedSourceMap.test.js

@@ -4,7 +4,7 @@ describe("TestCases", () => {
 	describeCases({
 		name: "minimized-source-map",
 		mode: "production",
-		devtool: "eval-cheap-module-source-map",
+		devtool: "cheap-module-eval-source-map",
 		minimize: true
 	});
 });

test/Validation.test.js

@@ -220,11 +220,8 @@ describe("Validation", () => {
 			expect(msg).toMatchInlineSnapshot(`
 			"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 			 - configuration.devtool should be one of these:
-			   string | false
-			   -> A developer tool to enhance debugging.
-			   Details:
-			    * configuration.devtool should be a string.
-			    * configuration.devtool should be false."
+			   false | \\"eval\\" | \\"cheap-eval-source-map\\" | \\"cheap-module-eval-source-map\\" | \\"eval-source-map\\" | \\"cheap-source-map\\" | \\"cheap-module-source-map\\" | \\"inline-cheap-source-map\\" | \\"inline-cheap-module-source-map\\" | \\"source-map\\" | \\"inline-source-map\\" | \\"hidden-source-map\\" | \\"nosources-source-map\\"
+			   -> A developer tool to enhance debugging."
 		`)
 	);
 
@@ -547,4 +544,32 @@ describe("Validation", () => {
 			    * configuration.output.ecmaVersion should be >= 2015 and <= 2020."
 		`)
 	);
+
+	createTestCase(
+		"devtool sourcemap",
+		{
+			devtool: "sourcemap"
+		},
+		msg =>
+			expect(msg).toMatchInlineSnapshot(`
+			"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
+			 - configuration.devtool should be one of these:
+			   false | \\"eval\\" | \\"cheap-eval-source-map\\" | \\"cheap-module-eval-source-map\\" | \\"eval-source-map\\" | \\"cheap-source-map\\" | \\"cheap-module-source-map\\" | \\"inline-cheap-source-map\\" | \\"inline-cheap-module-source-map\\" | \\"source-map\\" | \\"inline-source-map\\" | \\"hidden-source-map\\" | \\"nosources-source-map\\"
+			   -> A developer tool to enhance debugging."
+		`)
+	);
+
+	createTestCase(
+		"devtool source-maps",
+		{
+			devtool: "source-maps"
+		},
+		msg =>
+			expect(msg).toMatchInlineSnapshot(`
+			"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
+			 - configuration.devtool should be one of these:
+			   false | \\"eval\\" | \\"cheap-eval-source-map\\" | \\"cheap-module-eval-source-map\\" | \\"eval-source-map\\" | \\"cheap-source-map\\" | \\"cheap-module-source-map\\" | \\"inline-cheap-source-map\\" | \\"inline-cheap-module-source-map\\" | \\"source-map\\" | \\"inline-source-map\\" | \\"hidden-source-map\\" | \\"nosources-source-map\\"
+			   -> A developer tool to enhance debugging."
+		`)
+	);
 });

test/statsCases/preset-normal-performance-ensure-filter-sourcemaps/webpack.config.js

@@ -1,6 +1,6 @@
 module.exports = {
 	mode: "production",
-	devtool: "sourcemap",
+	devtool: "source-map",
 	performance: {
 		hints: "warning"
 	},