Update to webpack4 WIP

package.json

@@ -67,7 +67,7 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free-webfonts": "1.0.5",
     "babel-core": "6.26.0",
-    "babel-loader": "7.1.2",
+    "babel-loader": "7.1.4",
     "babel-preset-env": "1.6.1",
     "chai": "4.1.2",
     "copy-webpack-plugin": "4.5.1",
@@ -77,14 +77,14 @@
     "fuzzy": "0.1.3",
     "graphql-request": "1.5.1",
     "handlebars": "4.0.11",
-    "handlebars-loader": "1.6.0",
+    "handlebars-loader": "1.7.0",
     "intersection-observer": "0.5.0",
     "istanbul-instrumenter-loader": "3.0.1",
     "jquery": "3.3.1",
     "jquery-ui": "1.12.1",
     "mocha": "5.0.5",
     "mocha-loader": "1.1.3",
-    "mocha-webpack": "1.0.1",
+    "mocha-webpack": "2.0.0-beta.0",
     "mousetrap": "1.6.1",
     "npm-run-all": "4.1.2",
     "nyc": "11.6.0",
@@ -94,7 +94,8 @@
     "stylelint-config-standard": "18.2.0",
     "textcomplete": "0.17.1",
     "undate": "0.2.4",
-    "webpack": "3.11.0",
-    "webpack-dev-server": "2.11.1"
+    "webpack": "4.5.0",
+    "webpack-cli": "2.0.14",
+    "webpack-dev-server": "3.1.1"
   }
 }

webpack.config-test.js

@@ -1,7 +1,6 @@
 "use strict";
 
 const path = require("path");
-const webpack = require("webpack");
 const config = require("./webpack.config.js");
 
 config.target = "node";
@@ -17,10 +16,9 @@ config.module.rules.push({
 	enforce: "post",
 });
 
-// `CommonsChunkPlugin` is incompatible with a `target` of `node`.
-// See https://github.com/zinserjan/mocha-webpack/issues/84
-config.plugins = config.plugins.filter((a) =>
-	!(a instanceof webpack.optimize.CommonsChunkPlugin)
-);
+// `optimization.splitChunks` is incompatible with a `target` of `node`. See:
+// - https://github.com/zinserjan/mocha-webpack/issues/84
+// - https://github.com/webpack/webpack/issues/6727#issuecomment-372589122
+config.optimization.splitChunks = false;
 
 module.exports = config;

webpack.config.js

@@ -9,6 +9,7 @@ const CopyPlugin = require("copy-webpack-plugin");
 // ********************
 
 const config = {
+	mode: process.env.NODE_ENV === "production" ? "production" : "development",
 	entry: {
 		"js/bundle.js": path.resolve(__dirname, "client/js/lounge.js"),
 	},
@@ -57,6 +58,17 @@ const config = {
 			},
 		],
 	},
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				commons: {
+					test: /[\\/]node_modules[\\/]/,
+					name: "js/bundle.vendor.js",
+					chunks: "all",
+				},
+			},
+		},
+	},
 	externals: {
 		json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
 	},
@@ -98,23 +110,7 @@ const config = {
 		]),
 		// socket.io uses debug, we don't need it
 		new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),
-		// automatically split all vendor dependencies into a separate bundle
-		new webpack.optimize.CommonsChunkPlugin({
-			name: "js/bundle.vendor.js",
-			minChunks: (module) => module.context && module.context.includes("node_modules"),
-		}),
 	],
 };
 
-// *********************************
-// Production-specific configuration
-// *********************************
-
-if (process.env.NODE_ENV === "production") {
-	config.plugins.push(new webpack.optimize.UglifyJsPlugin({
-		sourceMap: true,
-		comments: false,
-	}));
-}
-
 module.exports = config;