Fix extra CSS being included on the client

build/tasks.ts

@@ -28,7 +28,7 @@ const buildServerBinaryPackage = register("build:server:binary:package", async (
 	const cliPath = path.join(pkgsPath, "server");
 	runner.cwd = cliPath;
 	if (!fs.existsSync(path.join(cliPath, "out"))) {
-		throw new Error("Cannot build binary without web bundle built");
+		throw new Error("Cannot build binary without server bundle built");
 	}
 	await buildServerBinaryCopy();
 	await dependencyNexeBinary();
@@ -78,7 +78,7 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner
 	const cliBuildPath = path.join(cliPath, "build");
 	fse.removeSync(cliBuildPath);
 	fse.mkdirpSync(path.join(cliBuildPath, "extensions"));
-	const bootstrapForkPath = path.join(pkgsPath, "vscode", "bin", "bootstrap-fork.js");
+	const bootstrapForkPath = path.join(pkgsPath, "vscode", "out", "bootstrap-fork.js");
 	const webOutputPath = path.join(pkgsPath, "web", "out");
 	const browserAppOutputPath = path.join(pkgsPath, "app", "browser", "out");
 	const nodePtyModule = path.join(pkgsPath, "protocol", "node_modules", "node-pty", "build", "Release", "pty.node");
@@ -124,7 +124,7 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner
 const buildServerBundle = register("build:server:bundle", async (runner) => {
 	const cliPath = path.join(pkgsPath, "server");
 	runner.cwd = cliPath;
-	await runner.execute("npm", ["run", "build:webpack"]);
+	await runner.execute("npm", ["run", "build"]);
 });
 
 const buildBootstrapFork = register("build:bootstrap-fork", async (runner) => {

packages/app/browser/webpack.config.js

@@ -2,23 +2,16 @@ const path = require("path");
 const webpack = require("webpack");
 const merge = require("webpack-merge");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const prod = process.env.NODE_ENV === "production";
 
-module.exports = merge(require(path.join(__dirname, "../../../scripts", "webpack.general.config.js"))(), {
-	devtool: prod ? "source-map" : "cheap-module-eval-source-map",
-	mode: prod ? "production" : "development",
-	output: {
-		path: path.join(__dirname, "out"),
+const root = path.resolve(__dirname, "../../..");
+
+module.exports = merge(
+	require(path.join(root, "scripts/webpack.client.config.js"))({
+		entry: path.join(root, "packages/app/browser/src/app.ts"),
+		template: path.join(root, "packages/app/browser/src/app.html"),
+	}), {
+		output: {
+			path: path.join(__dirname, "out"),
+		},
 	},
-	entry: [
-		"webpack-hot-middleware/client?reload=true&quiet=true",
-		"./packages/app/browser/src/app.ts"
-	],
-	plugins: [
-		new HtmlWebpackPlugin({
-			template: "packages/app/browser/src/app.html",
-		}),
-		new webpack.HotModuleReplacementPlugin(),
-		// new BundleAnalyzerPlugin(),
-	]
-});
+);

packages/dns/webpack.config.js

@@ -1,18 +1,21 @@
 const path = require("path");
 const merge = require("webpack-merge");
 
-module.exports = merge(require(path.join(__dirname, "../../scripts", "webpack.general.config.js"))(), {
-	devtool: "none",
-	mode: "production",
-	target: "node",
-	externals: {
-		"node-named": "commonjs node-named",
+const root = path.resolve(__dirname, "../..");
+
+module.exports = merge(
+	require(path.join(root, "scripts/webpack.node.config.js"))({
+		// Options.
+	}), {
+		externals: {
+			"node-named": "commonjs node-named",
+		},
+		output: {
+			path: path.join(__dirname, "out"),
+			filename: "main.js",
+		},
+		entry: [
+			"./packages/dns/src/dns.ts"
+		],
 	},
-	output: {
-		path: path.join(__dirname, "out"),
-		filename: "main.js",
-	},
-	entry: [
-		"./packages/dns/src/dns.ts"
-	],
-});
+);

packages/ide-api/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

packages/server/package.json

@@ -5,12 +5,8 @@
 	"files": [],
 	"scripts": {
 		"start": "node --max-old-space-size=32384 --require ts-node/register --require tsconfig-paths/register src/cli.ts",
-		"build:webpack": "rm -rf ./out && export CLI=true && UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js",
-		"build:nexe": "node scripts/nexe.js",
-		"build:bootstrap-fork": "cd ../vscode && npm run build:bootstrap-fork; mkdir -p ./packages/server/resources; cp ./bin/bootstrap-fork.js ../server/resources/bootstrap-fork.js",
-		"build:default-extensions": "cd ../../lib/vscode && npx gulp vscode-linux-arm && cd ../.. && mkdir -p ./packages/server/resources/extensions; cp -r ./lib/VSCode-linux-arm/resources/app/extensions/* ./packages/server/resources/extensions/",
-		"build:web": "cd ../web; rm -rf ./out; NODE_ENV=production npm run build; rm -rf ../server/resources/web; mkdir -p ../server/resources/web; cp -r ./out/* ../server/resources/web",
-		"build": "npm run build:bootstrap-fork && npm run build:webpack && npm run build:nexe"
+		"build": "rm -rf ./out && export CLI=true && UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js",
+		"build:nexe": "node scripts/nexe.js"
 	},
 	"dependencies": {
 		"@oclif/config": "^1.10.4",

packages/server/src/vscode/bootstrapFork.ts

@@ -110,7 +110,7 @@ export const requireModule = (modulePath: string, dataDir: string, builtInExtens
 	if (isCli) {
 		content = zlib.gunzipSync(readFile("bootstrap-fork.js.gz"));
 	} else {
-		content = readFile("../../vscode/bin/bootstrap-fork.js");
+		content = readFile("../../vscode/out/bootstrap-fork.js");
 	}
 	eval(content.toString());
 };

packages/server/webpack.config.js

@@ -2,30 +2,33 @@ const path = require("path");
 const webpack = require("webpack");
 const merge = require("webpack-merge");
 
-module.exports = merge({
-	devtool: "none",
-	mode: "production",
-	output: {
-		filename: "cli.js",
-		path: path.join(__dirname, "./out"),
-		libraryTarget: "commonjs",
+const root = path.resolve(__dirname, "../..");
+
+module.exports = merge(
+	require(path.join(root, "scripts/webpack.node.config.js"))({
+		// Config options.
+	}), {
+		output: {
+			filename: "cli.js",
+			path: path.join(__dirname, "out"),
+			libraryTarget: "commonjs",
+		},
+		node: {
+			console: false,
+			global: false,
+			process: false,
+			Buffer: false,
+			__filename: false,
+			__dirname: false,
+			setImmediate: false
+		},
+		externals: ["tslib", "trash"],
+		entry: "./packages/server/src/cli.ts",
+		plugins: [
+			new webpack.DefinePlugin({
+				"process.env.BUILD_DIR": `"${__dirname}"`,
+				"process.env.CLI": `"${process.env.CLI ? "true" : "false"}"`,
+			}),
+		],
 	},
-	node: {
-		console: false,
-		global: false,
-		process: false,
-		Buffer: false,
-		__filename: false,
-		__dirname: false,
-		setImmediate: false
-	},
-	externals: ["tslib", "trash"],
-	entry: "./packages/server/src/cli.ts",
-	target: "node",
-	plugins: [
-		new webpack.DefinePlugin({
-			"process.env.BUILD_DIR": `"${__dirname}"`,
-			"process.env.CLI": `"${process.env.CLI ? "true" : "false"}"`,
-		}),
-	],
-}, require("../../scripts/webpack.general.config")());
+);

packages/vscode/package.json

@@ -3,7 +3,7 @@
   "description": "VS Code implementation of the browser-based IDE client.",
   "main": "src/index.ts",
   "scripts": {
-    "build:bootstrap-fork": "../../node_modules/.bin/webpack --config ./webpack.config.bootstrap.js"
+		"build:bootstrap-fork": "UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.bootstrap.config.js"
   },
   "dependencies": {
     "iconv-lite": "^0.4.24",

packages/vscode/src/workbench.ts

@@ -29,8 +29,6 @@ import { RawContextKey, IContextKeyService } from "vs/platform/contextkey/common
 import { ServiceCollection } from "vs/platform/instantiation/common/serviceCollection";
 import { URI } from "vs/base/common/uri";
 
-import "vs/loader";
-
 export class Workbench {
 	private readonly windowId = parseInt(new Date().toISOString().replace(/[-:.TZ]/g, ""), 10);
 	private _serviceCollection: ServiceCollection | undefined;

packages/vscode/webpack.bootstrap.config.js

@@ -0,0 +1,69 @@
+const path = require("path");
+const merge = require("webpack-merge");
+
+const root = path.resolve(__dirname, "../..");
+const fills = path.join(root, "packages/ide/src/fill");
+const vsFills = path.join(root, "packages/vscode/src/fill");
+
+module.exports = merge(
+	require(path.join(root, "scripts/webpack.node.config.js"))({
+		typescriptCompilerOptions: {
+			target: "es5",
+		},
+	}), {
+		entry: path.join(root, "lib/vscode/src/bootstrap-fork.js"),
+		mode: "development",
+		output: {
+			chunkFilename: "[name].bundle.js",
+			path: path.resolve(__dirname, "out"),
+			publicPath: "/",
+			filename: "bootstrap-fork.js",
+			libraryTarget: "commonjs",
+			globalObject: "this",
+		},
+		// Due to the dynamic `require.context` we add to `loader.js` Webpack tries
+		// to include way too much. We can modify what Webpack imports in this case
+		// (I believe), but for now ignore some things.
+		module: {
+			rules: [{
+				test: /\.(txt|d\.ts|perf\.data\.js|jxs|scpt|exe|sh|less|html|s?css|qwoff|md|svg|png|ttf|woff|eot|woff2)$/,
+				use: [{
+					loader: "ignore-loader",
+				}],
+			}, {
+				test: /test|tsconfig/,
+				use: [{
+					loader: "ignore-loader",
+				}],
+			}, {
+				test: /(\/vs\/code\/electron-main\/)|(\/test\/)|(OSSREADME\.json$)|(\.(test\.ts|test\.js|d\.ts|qwoff|node|html|txt|exe|wuff|md|sh|scpt|less)$)/,
+				use: [{
+					loader: "ignore-loader",
+				}],
+			}],
+			noParse: /\/test\/|\.test\.jsx?|\.test\.tsx?|tsconfig.+\.json$/,
+		},
+		resolve: {
+			alias: {
+				"gc-signals": path.join(fills, "empty.ts"),
+				"node-pty": path.resolve(fills, "empty.ts"),
+				"windows-mutex": path.resolve(fills, "empty.ts"),
+				"windows-process-tree": path.resolve(fills, "empty.ts"),
+
+				"electron": path.join(vsFills, "stdioElectron.ts"),
+				"native-keymap": path.join(vsFills, "native-keymap.ts"),
+				"native-watchdog": path.join(vsFills, "native-watchdog.ts"),
+				"vs/base/common/amd": path.resolve(vsFills, "amd.ts"),
+				"vs/base/node/paths": path.resolve(vsFills, "paths.ts"),
+				"vs/platform/node/package": path.resolve(vsFills, "package.ts"),
+				"vs/platform/node/product": path.resolve(vsFills, "product.ts"),
+				"vs": path.resolve(root, "lib/vscode/src/vs"),
+			},
+		},
+		resolveLoader: {
+			alias: {
+				"vs/css": path.resolve(vsFills, "css.js"),
+			},
+		},
+	}
+);

packages/vscode/webpack.config.bootstrap.js

@@ -1,61 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-
-const root = path.resolve(__dirname, "../..");
-const fills = path.join(root, "packages/ide/src/fill");
-const vscodeFills = path.join(root, "packages/vscode/src/fill");
-
-const merge = require("webpack-merge");
-
-module.exports = (env) => {
-	return merge(require(path.join(root, "scripts/webpack.general.config.js"))({
-		typescriptCompilerOptions: {
-			target: "es5",
-		},
-	}), {
-		entry: path.join(root, "lib/vscode/src/bootstrap-fork.js"),
-		mode: "development",
-		target: "node",
-		output: {
-			chunkFilename: "[name].bundle.js",
-			path: path.resolve(__dirname, "./bin"),
-			publicPath: "/",
-			filename: "bootstrap-fork.js",
-			libraryTarget: "commonjs",
-			globalObject: "this",
-		},
-		module: {
-			rules: [{
-				// 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
-				// case of dynamic loading including things we won't require.
-				// This also results in the bundle being significantly smaller which
-				// makes uglify much faster.
-				test: /(\/vs\/code\/electron-main\/)|(\/test\/)|(OSSREADME\.json$)|(\.(test\.ts|test\.js|d\.ts|qwoff|node|html|txt|exe|wuff|md|sh|scpt|less)$)/,
-				use: ["ignore-loader"]
-			}],
-		},
-		resolve: {
-			alias: {
-				"gc-signals": path.join(fills, "empty.ts"),
-				"native-keymap": path.join(fills, "native-keymap.ts"),
-				"windows-process-tree": path.resolve(fills, "empty.ts"),
-				"node-pty": path.resolve(fills, "empty.ts"),
-
-				"electron": path.join(vscodeFills, "stdioElectron.ts"),
-				"native-watchdog": path.join(vscodeFills, "native-watchdog.ts"),
-				"vs/platform/node/product": path.resolve(vscodeFills, "product.ts"),
-				"vs/platform/node/package": path.resolve(vscodeFills, "package.ts"),
-				"vs/base/node/paths": path.resolve(vscodeFills, "paths.ts"),
-				"vs/base/common/amd": path.resolve(vscodeFills, "amd.ts"),
-				"vs": path.resolve(root, "lib/vscode/src/vs"),
-			},
-		},
-		resolveLoader: {
-			alias: {
-				"vs/css": path.resolve(vscodeFills, "css.js"),
-			},
-		},
-	});
-};

packages/web/webpack.common.config.js

@@ -1,91 +0,0 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-const PreloadWebpackPlugin = require("preload-webpack-plugin");
-const root = path.resolve(__dirname, "../..");
-const fills = path.join(root, "packages/ide/src/fill");
-const vsFills = path.join(root, "packages/vscode/src/fill");
-
-const merge = require("webpack-merge");
-
-module.exports = merge({
-	entry: "./packages/web/src/index.ts",
-	output: {
-		chunkFilename: "[name]-[hash:6].bundle.js",
-		path: path.join(root, "dist"),
-		filename: "[hash:6].bundle.js",
-	},
-	node: {
-		module: "empty",
-		crypto: "empty",
-		tls: "empty",
-	},
-	resolve: {
-		alias: {
-			"gc-signals": path.join(fills, "empty.ts"),
-			"selenium-webdriver": path.join(fills, "empty.ts"),
-			"vscode": path.join(fills, "empty.ts"),
-			"vscode-fsevents": path.join(fills, "empty.ts"),
-			"vsda": path.join(fills, "empty.ts"),
-			"windows-foreground-love": path.join(fills, "empty.ts"),
-			"windows-mutex": path.join(fills, "empty.ts"),
-			"windows-process-tree": path.join(fills, "empty.ts"),
-			"vscode-sqlite3": path.join(fills, "empty.ts"),
-			"tls": path.join(fills, "empty.ts"),
-			"native-is-elevated": path.join(fills, "empty.ts"),
-			"dns": path.join(fills, "empty.ts"),
-			"console": path.join(fills, "empty.ts"),
-			"readline": path.join(fills, "empty.ts"),
-			"oniguruma": path.join(fills, "empty.ts"),
-
-			// Webpack includes path-browserify but not the latest version, so
-			// path.posix and path.parse are undefined (among other things possibly).
-			// Also if we don't provide the full path, the code in vscode will import
-			// from vscode's node_modules which is the wrong version.
-			"path": path.join(root, "node_modules", "path-browserify"),
-			"crypto": "crypto-browserify",
-			"http": "http-browserify",
-
-			"child_process": path.join(fills, "child_process.ts"),
-			"os": path.join(fills, "os.ts"),
-			"fs": path.join(fills, "fs.ts"),
-			"net": path.join(fills, "net.ts"),
-			"util": path.join(fills, "util.ts"),
-			"electron": path.join(fills, "electron.ts"),
-
-			"native-keymap": path.join(vsFills, "native-keymap.ts"),
-			"node-pty": path.join(vsFills, "node-pty.ts"),
-			"graceful-fs": path.join(vsFills, "graceful-fs.ts"),
-			"spdlog": path.join(vsFills, "spdlog.ts"),
-			"native-watchdog": path.join(vsFills, "native-watchdog.ts"),
-			"iconv-lite": path.join(vsFills, "iconv-lite.ts"),
-
-			"vs/base/node/paths": path.join(vsFills, "paths.ts"),
-			"vs/base/common/amd": path.join(vsFills, "amd.ts"),
-			"vs/platform/node/product": path.join(vsFills, "product.ts"),
-			"vs/platform/node/package": path.join(vsFills, "package.ts"),
-			"vs": path.join(root, "lib", "vscode", "src", "vs"),
-		},
-	},
-	resolveLoader: {
-		alias: {
-			"vs/css": path.join(vsFills, "css.js"),
-		},
-	},
-	plugins: [
-		new HtmlWebpackPlugin({
-			template: "packages/web/src/index.html",
-		}),
-		new PreloadWebpackPlugin({
-			rel: "preload",
-			as: "script",
-		}),
-	],
-	target: "web",
-}, require(path.join(root, "scripts", "webpack.general.config.js"))({
-	typescriptCompilerOptions: {
-		"target": "es5",
-		"lib": ["dom", "esnext"],
-		"importHelpers": true,
-	},
-}));

packages/web/webpack.config.js

@@ -1,22 +1,81 @@
 const path = require("path");
-const webpack = require("webpack");
 const merge = require("webpack-merge");
-const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const prod = process.env.NODE_ENV === "production";
 
-module.exports = merge(require("./webpack.common.config.js"), {
-	devtool: prod ? "source-map" : "cheap-module-eval-source-map",
-	mode: prod ? "production" : "development",
-	output: {
-		path: path.join(__dirname, "out"),
+const root = path.resolve(__dirname, "../..");
+const fills = path.join(root, "packages/ide/src/fill");
+const vsFills = path.join(root, "packages/vscode/src/fill");
+
+module.exports = merge(
+	require(path.join(root, "scripts/webpack.client.config.js"))({
+		entry: path.join(root, "packages/web/src/index.ts"),
+		template: path.join(root, "packages/web/src/index.html"),
+		typescriptCompilerOptions: {
+			"target": "es5",
+			"lib": ["dom", "esnext"],
+			"importHelpers": true,
+		},
+	},
+), {
+	output: {
+		chunkFilename: "[name]-[hash:6].bundle.js",
+		path: path.join(__dirname, "out"),
+		filename: "[hash:6].bundle.js",
+	},
+	node: {
+		module: "empty",
+		crypto: "empty",
+		tls: "empty",
+	},
+	resolve: {
+		alias: {
+			"gc-signals": path.join(fills, "empty.ts"),
+			"selenium-webdriver": path.join(fills, "empty.ts"),
+			"vscode": path.join(fills, "empty.ts"),
+			"vscode-fsevents": path.join(fills, "empty.ts"),
+			"vsda": path.join(fills, "empty.ts"),
+			"windows-foreground-love": path.join(fills, "empty.ts"),
+			"windows-mutex": path.join(fills, "empty.ts"),
+			"windows-process-tree": path.join(fills, "empty.ts"),
+			"vscode-sqlite3": path.join(fills, "empty.ts"),
+			"tls": path.join(fills, "empty.ts"),
+			"native-is-elevated": path.join(fills, "empty.ts"),
+			"dns": path.join(fills, "empty.ts"),
+			"console": path.join(fills, "empty.ts"),
+			"readline": path.join(fills, "empty.ts"),
+			"oniguruma": path.join(fills, "empty.ts"),
+
+			// Webpack includes path-browserify but not the latest version, so
+			// path.posix and path.parse are undefined (among other things possibly).
+			// Also if we don't provide the full path, the code in vscode will import
+			// from vscode's node_modules which is the wrong version.
+			"path": path.join(root, "node_modules", "path-browserify"),
+			"crypto": "crypto-browserify",
+			"http": "http-browserify",
+
+			"child_process": path.join(fills, "child_process.ts"),
+			"os": path.join(fills, "os.ts"),
+			"fs": path.join(fills, "fs.ts"),
+			"net": path.join(fills, "net.ts"),
+			"util": path.join(fills, "util.ts"),
+			"electron": path.join(fills, "electron.ts"),
+
+			"native-keymap": path.join(vsFills, "native-keymap.ts"),
+			"node-pty": path.join(vsFills, "node-pty.ts"),
+			"graceful-fs": path.join(vsFills, "graceful-fs.ts"),
+			"spdlog": path.join(vsFills, "spdlog.ts"),
+			"native-watchdog": path.join(vsFills, "native-watchdog.ts"),
+			"iconv-lite": path.join(vsFills, "iconv-lite.ts"),
+
+			"vs/base/node/paths": path.join(vsFills, "paths.ts"),
+			"vs/base/common/amd": path.join(vsFills, "amd.ts"),
+			"vs/platform/node/product": path.join(vsFills, "product.ts"),
+			"vs/platform/node/package": path.join(vsFills, "package.ts"),
+			"vs": path.join(root, "lib", "vscode", "src", "vs"),
+		},
+	},
+	resolveLoader: {
+		alias: {
+			"vs/css": path.join(vsFills, "css.js"),
+		},
 	},
-	entry: [
-		"webpack-hot-middleware/client?reload=true&quiet=true",
-		"./packages/web/src/index.ts"
-	],
-	plugins: [
-		new webpack.HotModuleReplacementPlugin(),
-		// new BundleAnalyzerPlugin(),
-	]
 });

scripts/webpack.client.config.js

@@ -0,0 +1,58 @@
+const webpack = require("webpack");
+const path = require("path");
+const merge = require("webpack-merge");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const PreloadWebpackPlugin = require("preload-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+
+const root = path.join(__dirname, "..");
+const prod = process.env.NODE_ENV === "production";
+
+module.exports = (options = {}) => merge(
+	require("./webpack.general.config")(options), {
+	devtool: prod ? "source-map" : "cheap-module-eval-source-map",
+	mode: prod ? "production" : "development",
+	entry: prod ? options.entry : [
+		"webpack-hot-middleware/client?reload=true&quiet=true",
+		options.entry,
+	],
+	module: {
+		rules: [{
+			test: /\.s?css$/,
+			// This is required otherwise it'll fail to resolve CSS in common.
+			include: root,
+			use: [{
+				loader: MiniCssExtractPlugin.loader,
+			}, {
+				loader: "css-loader",
+			}, {
+				loader: "sass-loader",
+			}],
+		}, {
+			test: /\.(svg|png|ttf|woff|eot|woff2)$/,
+			use: [{
+				loader: "file-loader",
+				options: {
+					name: "[path][name].[ext]",
+				},
+			}],
+		}],
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: "[name].css",
+			chunkFilename: "[id].css",
+		}),
+		new HtmlWebpackPlugin({
+			template: options.template,
+		}),
+		new PreloadWebpackPlugin({
+			rel: "preload",
+			as: "script",
+		}),
+	].concat(prod ? [] : [
+		new webpack.HotModuleReplacementPlugin(),
+	]),
+	target: "web",
+});

scripts/webpack.general.config.js

@@ -3,13 +3,12 @@ const os = require("os");
 const environment = process.env.NODE_ENV || "development";
 const HappyPack = require("happypack");
 const webpack = require("webpack");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const root = path.join(__dirname, "..");
 
 module.exports = (options = {}) => ({
 	context: root,
-	devtool: "source-map",
+	devtool: "none",
 	module: {
 		rules: [{
 			loader: "string-replace-loader",
@@ -32,22 +31,6 @@ module.exports = (options = {}) => ({
 					flags: "g",
 				}],
 			},
-		}, {
-			test: /\.(js|css)/,
-			exclude: /test/,
-		}, {
-			test: /\.(txt|d\.ts|test.ts|perf.data.js|jxs|scpt|exe|sh|less)$/,
-			use: [{
-				loader: "ignore-loader",
-			}],
-		}, {
-			// 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: /test|electron-browser.+\.html$|code\/electron-browser\/.+\.css$/,
-			use: [{
-				loader: "ignore-loader",
-			}],
 		}, {
 			test: /\.node$/,
 			use: "node-loader",
@@ -56,37 +39,11 @@ module.exports = (options = {}) => ({
 				loader: "happypack/loader?id=ts",
 			}],
 			test: /(^.?|\.[^d]|[^.]d|[^.][^d])\.tsx?$/,
-		}, {
-			// Test CSS isn't required. The rest is supposed to be served in separate
-			// pages or iframes so we don't need to include it here. Also excluding
-			// markdown.css because even though it uses the file-loader as shown above
-			// in the string replace, it's still making its way into the main CSS.
-			exclude: /test|code\/electron-browser\/.+\.css$/,
-			test: /\.s?css$/,
-			// This is required otherwise it'll fail to resolve CSS in common.
-			include: root,
-			use: [{
-				loader: MiniCssExtractPlugin.loader,
-			}, {
-				loader: "css-loader",
-			}, {
-				loader: "sass-loader",
-			}],
-		}, {
-			test: /\.(svg|png|ttf|woff|eot|woff2)$/,
-			use: [{
-				loader: "file-loader",
-				options: {
-					name: "[path][name].[ext]",
-				},
-			}],
 		}, {
 			test: /\.wasm$/,
 			type: "javascript/auto",
 		}, {
-			/**
-			 * Fixes spdlog
-			 */
+			// Fixes spdlog.
 			test: /spdlog\/index\.js/,
 			loader: "string-replace-loader",
 			options: {
@@ -118,7 +75,6 @@ module.exports = (options = {}) => ({
 				}],
 			},
 		}],
-		noParse: /\/test\/|\.test\.jsx?|\.test\.tsx?|tsconfig.+\.json$/,
 	},
 	resolve: {
 		alias: {
@@ -151,12 +107,7 @@ module.exports = (options = {}) => ({
 			"process.env.NODE_ENV": `"${environment}"`,
 			"process.env.LOG_LEVEL": `"${process.env.LOG_LEVEL || ""}"`,
 		}),
-		new MiniCssExtractPlugin({
-			filename: "[name].css",
-			chunkFilename: "[id].css",
-		}),
 	],
-	// target: "web",
 	stats: {
 		all: false, // Fallback for options not defined.
 		errors: true,

scripts/webpack.node.config.js

@@ -0,0 +1,8 @@
+const merge = require("webpack-merge");
+
+module.exports = (options = {}) => merge(
+	require("./webpack.general.config")(options), {
+	devtool: "none",
+	mode: "production",
+	target: "node",
+});