chore(deps): update to webpack 5 (#2664)

Co-authored-by: Kevin Barabash <kevinb@khanacademy.org>

.eslintignore

@@ -5,3 +5,4 @@ website/build/*
 website/lib/remarkable-katex.js
 **/*.min.js
 contrib/mhchem/*
+coverage/*

dockers/screenshotter/screenshotter.js

@@ -213,24 +213,32 @@ function startServer() {
             },
         };
     }
+    const config = {
+        ...webpackConfig.devServer,
+        port,
+        hot: false,
+        liveReload: false,
+        injectClient: false,
+    };
     const compiler = webpack(webpackConfig);
-    const wds = new WebpackDevServer(compiler, webpackConfig.devServer);
-    const server = wds.listen(port);
-    server.once("listening", function() {
-        devServer = wds;
-        katexPort = port;
-        attempts = 0;
-        process.nextTick(opts.seleniumProxy ? getProxyDriver
-            : opts.browserstack ? startBrowserstackLocal : tryConnect);
-    });
-    server.on("error", function(err) {
-        if (devServer !== null) { // error after we started listening
-            throw err;
-        } else if (++attempts > 50) {
-            throw new Error("Failed to start up dev server");
-        } else {
-            process.nextTick(startServer);
-        }
+    const wds = new WebpackDevServer(compiler, config);
+    wds.listen(port).then(server => {
+        server.once("listening", function() {
+            devServer = wds;
+            katexPort = port;
+            attempts = 0;
+            process.nextTick(opts.seleniumProxy ? getProxyDriver
+                : opts.browserstack ? startBrowserstackLocal : tryConnect);
+        });
+        server.on("error", function(err) {
+            if (devServer !== null) { // error after we started listening
+                throw err;
+            } else if (++attempts > 50) {
+                throw new Error("Failed to start up dev server");
+            } else {
+                process.nextTick(startServer);
+            }
+        });
     });
 }
 

package.json

@@ -63,7 +63,6 @@
     "mini-css-extract-plugin": "^1.0.0",
     "mkdirp": "^1.0.4",
     "pako": "^2.0.0",
-    "pnp-webpack-plugin": "^1.6.4",
     "postcss": "^7.0.32",
     "postcss-loader": "^4.0.0",
     "postcss-preset-env": "^6.7.0",
@@ -76,11 +75,11 @@
     "style-loader": "^2.0.0",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "terser-webpack-plugin": "^4.0.0",
-    "webpack": "^4.44.0",
+    "terser-webpack-plugin": "^5.0.3",
+    "webpack": "^5.8.0",
     "webpack-bundle-analyzer": "^4.0.0",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.0"
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^4.0.0-beta.0"
   },
   "bin": "cli.js",
   "scripts": {
@@ -98,7 +97,7 @@
     "test:perf": "NODE_ENV=test node test/perf-test.js",
     "clean": "rm -rf dist/ node_modules/",
     "clean-install": "yarn clean && yarn",
-    "start": "webpack-dev-server --hot --config webpack.dev.js",
+    "start": "webpack serve --config webpack.dev.js",
     "analyze": "webpack --config webpack.analyze.js",
     "build": "rimraf dist/ && mkdirp dist && cp README.md dist && rollup -c && webpack",
     "watch": "yarn build --watch",

webpack.common.js

@@ -4,8 +4,6 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 // $FlowIgnore
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-// $FlowIgnore
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
 
 const {version} = require("./package.json");
 
@@ -106,6 +104,7 @@ function createConfig(target /*: Target */, dev /*: boolean */,
             libraryExport: 'default',
             // Enable output modules to be used in browser or Node.
             // See: https://github.com/webpack/webpack/issues/6522
+            // https://github.com/webpack/webpack/pull/11987
             globalObject: "(typeof self !== 'undefined' ? self : this)",
             path: path.resolve(__dirname, 'dist'),
             publicPath: dev ? '/' : '',
@@ -168,12 +167,8 @@ function createConfig(target /*: Target */, dev /*: boolean */,
         performance: {
             hints: false,
         },
-        resolve: {
-            plugins: [PnpWebpackPlugin],
-        },
-        resolveLoader: {
-            // $FlowIgnore
-            plugins: [PnpWebpackPlugin.moduleLoader(module)],
+        stats: {
+            colors: true,
         },
     };
 }

webpack.dev.js

@@ -12,17 +12,19 @@ katexConfig.entry.main = './static/main.js';
 // only the `devServer` options for the first configuration will be taken
 // into account and used for all the configurations in the array.
 katexConfig.devServer = {
-    contentBase: [path.join(__dirname, 'static'), __dirname],
+    static: [
+        path.join(__dirname, 'static'),
+        {
+            directory: __dirname,
+            watch: false,
+        },
+    ],
     // Allow server to be accessed from anywhere, which is useful for
     // testing.  This potentially reveals the source code to the world,
     // but this should not be a concern for testing open-source software.
-    disableHostCheck: true,
+    firewall: false,
     host: '0.0.0.0',
     port: PORT,
-    sockPort: 'location',
-    stats: {
-        colors: true,
-    },
 };
 
 module.exports = ([