Fix extra CSS being included on the client

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",
+});