Use inline file-loader for require.toUrl

code-asher · kylecarbs · commit c80b2fabc321 · 2019-02-05T11:16:08.000-06:00
Instead of trying to match on the string, because that string could be
anything or change in future versions.
diff --git a/packages/vscode/webpack.config.bootstrap.js b/packages/vscode/webpack.config.bootstrap.js
@@ -27,23 +27,6 @@ module.exports = (env) => {
 		},
 		module: {
 			rules: [{
-				loader: "string-replace-loader",
-				test: /\.(js|ts)$/,
-				options: {
-					multiple: [
-						{
-							search: "require\\.toUrl\\(",
-							replace: "requireToUrl(",
-							flags: "g",
-						},
-						{
-							search: "require\\.__\\$__nodeRequire",
-							replace: "require",
-							flags: "g",
-						},
-					],
-				},
-			}, {
 				// Ignore a bunch of file types we don't have loaders for. Also ignore
 				// test directories, some files with invalid JSON, and files we don't
 				// actually require but throw warnings or errors. This all seems to be a
diff --git a/packages/web/webpack.common.config.js b/packages/web/webpack.common.config.js
@@ -16,29 +16,6 @@ module.exports = merge({
 		path: path.join(root, "dist"),
 		filename: "[hash:6].bundle.js",
 	},
-	module: {
-		rules: [{
-			loader: "string-replace-loader",
-			test: /\.(j|t)s/,
-			options: {
-				multiple: [{
-					// These will be handled by file-loader. We need the location because
-					// they are parsed as URIs and will throw errors if not fully formed.
-					search: "require\\.toUrl",
-					replace: "location.protocol + '//' + location.host + '/' + require",
-					flags: "g",
-				}, {
-					search: "require\\.__\\$__nodeRequire",
-					replace: "require",
-					flags: "g",
-				}, {
-					search: "\\.attributes\\[([^\\]]+)\\] = ([^;]+)",
-					replace: ".setAttribute($1, $2)",
-					flags: "g",
-				}],
-			},
-		}],
-	},
 	node: {
 		module: "empty",
 		crypto: "empty",
diff --git a/scripts/webpack.general.config.js b/scripts/webpack.general.config.js
@@ -14,6 +14,26 @@ module.exports = (options = {}) => ({
 	mode: isCi ? "production" : "development",
 	module: {
 		rules: [{
+			loader: "string-replace-loader",
+			test: /\.(j|t)s/,
+			options: {
+				multiple: [{
+					// These will be handled by file-loader. We need the location because
+					// they are parsed as URIs and will throw errors if not fully formed.
+					search: "require\\.toUrl\\(",
+					replace: "location.protocol + '//' + location.host + '/' + require('file-loader?name=[path][name].[ext]!' + ",
+					flags: "g",
+				}, {
+					search: "require\\.__\\$__nodeRequire",
+					replace: "require",
+					flags: "g",
+				}, {
+					search: "\\.attributes\\[([^\\]]+)\\] = ([^;]+)",
+					replace: ".setAttribute($1, $2)",
+					flags: "g",
+				}],
+			},
+		}, {
 			test: /\.(js)/,
 			exclude: /test/,
 		}, {
@@ -22,12 +42,12 @@ module.exports = (options = {}) => ({
 				loader: "ignore-loader",
 			}],
 		}, {
-			test: /electron-browser.+\.html$|code\/electron-browser\/.+\.css$|markdown\.css$/,
+			// These are meant to run in separate pages, like the issue reporter or
+			// process explorer. Ignoring for now since otherwise their CSS is
+			// included in the main CSS.
+			test: /electron-browser.+\.html$|code\/electron-browser\/.+\.css$/,
 			use: [{
-				loader: "file-loader",
-				options: {
-					name: "[path][name].[ext]",
-				},
+				loader: "ignore-loader",
 			}],
 		}, {
 			test: /\.node$/,
@@ -39,9 +59,8 @@ module.exports = (options = {}) => ({
 			test: /(^.?|\.[^d]|[^.]d|[^.][^d])\.tsx?$/,
 		}, {
 			// Test CSS isn't required. The rest is supposed to be served in separate
-			// pages or iframes, so we need to skip it here and serve it with the file
-			// loader instead.
-			exclude: /test|code\/electron-browser\/.+\.css|markdown\.css$/,
+			// pages or iframes so we don't need to include it here.
+			exclude: /test|code\/electron-browser\/.+\.css$/,
 			test: /\.s?css$/,
 			// This is required otherwise it'll fail to resolve CSS in common.
 			include: root,
@@ -53,7 +72,7 @@ module.exports = (options = {}) => ({
 				loader: "sass-loader",
 			}],
 		}, {
-			test: /\.(svg|png|ttf|woff|eot|md)$/,
+			test: /\.(svg|png|ttf|woff|eot)$/,
 			use: [{
 				loader: "file-loader",
 				options: {
