upgrade to webpack 4

Now that babel is upgraded, upgrading webpack was pretty
straightforward.

- We take advantage of the new `mode` config option, and no longer need
to manually set up Uglify plugin
- Uglifyjs is back, I checked the prod build output: it's very ugly
- I updated the RemoveBuildDirectoryPlugin per instructions, and
verified it still works.
- I verified that of `yarn backend`, `yarn build`, and `yarn start` all
still work as expected.

config/RemoveBuildDirectoryPlugin.js

@@ -6,19 +6,10 @@ const path = require("path");
 // Note: the following type-import just resolves to `any`.
 /*:: import type {Compiler} from "webpack"; */
 
-module.exports = class RemoveBuildDirectoryPlugin {
+const pluginName = "RemoveBuildDirectoryPlugin";
+class RemoveBuildDirectoryPlugin {
   apply(compiler /*: Compiler */) {
-    if (compiler.hooks) {
-      console.warn(
-        "" +
-          "You appear to be running Webpack >= 4. " +
-          "The RemoveBuildDirectoryPlugin should be forward-compatible, " +
-          "but you should update it to use the new APIs. See " +
-          "<https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0> " +
-          "for details."
-      );
-    }
-    compiler.plugin("compile", () => {
+    compiler.hooks.run.tap(pluginName, () => {
       const outputPath = compiler.options.output.path;
       // If a build config has no `output.path` property, and no
       // `--output-path` is passed on the command line, then Webpack
@@ -35,4 +26,6 @@ module.exports = class RemoveBuildDirectoryPlugin {
       fs.emptyDirSync(outputPath);
     });
   }
-};
+}
+
+module.exports = RemoveBuildDirectoryPlugin;

config/webpack.config.backend.js

@@ -73,4 +73,5 @@ module.exports = {
     new RemoveBuildDirectoryPlugin(),
     new webpack.DefinePlugin(env.individuallyStringified),
   ],
+  mode: process.env.NODE_ENV,
 };

config/webpack.config.web.js

@@ -118,6 +118,7 @@ function makeConfig(mode /*: "production" | "development" */) /*: mixed */ {
           .replace(/\\/g, "/"),
       // We need to use a UMD module to build the static site.
       libraryTarget: "umd",
+      globalObject: "this",
     },
     resolve: {
       // This allows you to set a fallback for where Webpack should look for modules.
@@ -220,6 +221,7 @@ function makeConfig(mode /*: "production" | "development" */) /*: mixed */ {
       tls: "empty",
       child_process: "empty",
     },
+    mode,
   };
 }
 

package.json

@@ -41,8 +41,8 @@
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "0.28.7",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^3.0.0",
     "dotenv": "8.0.0",
     "dotenv-expand": "5.1.0",
     "enzyme": "^3.3.0",
@@ -53,7 +53,7 @@
     "eslint-plugin-import": "2.18.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.14.2",
-    "file-loader": "1.1.5",
+    "file-loader": "^4.0.0",
     "flow-bin": "^0.100.0",
     "jest": "^24.8.0",
     "jest-fetch-mock": "^2.1.2",
@@ -61,24 +61,18 @@
     "raf": "3.4.1",
     "react-dev-utils": "^5.0.0",
     "static-site-generator-webpack-plugin": "^3.4.1",
-    "url-loader": "0.6.2",
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "2.9.4",
-    "webpack-manifest-plugin": "1.3.2",
+    "url-loader": "^2.0.1",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.7.2",
+    "webpack-manifest-plugin": "^2.0.4",
     "webpack-node-externals": "^1.7.2"
   },
   "greenkeeper": {
     "ignore": [
-      "copy-webpack-plugin",
-      "css-loader",
-      "file-loader",
       "history",
       "react-dev-utils",
       "react-router",
-      "url-loader",
-      "webpack",
-      "webpack-dev-server",
-      "webpack-manifest-plugin",
       "whatwg-fetch"
     ]
   },