Upgrade to webpack-dev-server 4

.changeset/clever-foxes-compare.md

@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Upgrade to webpack-dev-server 4.

packages/modular-scripts/package.json

@@ -116,7 +116,7 @@
     "update-notifier": "5.1.0",
     "url-loader": "4.1.1",
     "webpack": "4.46.0",
-    "webpack-dev-server": "3.11.2",
+    "webpack-dev-server": "4.6.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4",
     "ws": "7.4.6"

packages/modular-scripts/react-dev-utils/WebpackDevServerUtils.js

@@ -8,11 +8,13 @@ const chalk = require('chalk');
 const detect = require('detect-port-alt');
 const isRoot = require('is-root');
 const prompts = require('prompts');
-const clearConsole = require('./clearConsole');
+const forkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+const { clearConsole } = require('./logger');
 const formatWebpackMessages = require('./formatWebpackMessages');
 const getProcessForPort = require('./getProcessForPort');
 const typescriptFormatter = require('./typescriptFormatter');
-const forkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const console = require('./logger');
 
 const isInteractive = process.stdout.isTTY;
 

packages/modular-scripts/react-dev-utils/launchEditor.js

@@ -6,6 +6,7 @@ const child_process = require('child_process');
 const os = require('os');
 const chalk = require('chalk');
 const shellQuote = require('shell-quote');
+const console = require('./logger');
 
 function isTerminalEditor(editor) {
   switch (editor) {

packages/modular-scripts/react-dev-utils/logger.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const isCI = require('is-ci');
+const chalk = require('chalk');
+
+const PREFIX = '[modular] ';
+
+const DEBUG =
+  process.env.MODULAR_LOGGER_DEBUG || process.argv.includes('--verbose');
+const SILENT = process.env.MODULAR_LOGGER_MUTE;
+const isInteractive = process.stdout.isTTY;
+
+function printStdErr(x) {
+  if (SILENT) {
+    return;
+  }
+  x.split(/\r?\n/).forEach((l) => {
+    process.stderr.write(chalk.dim(PREFIX) + l + '\n');
+  });
+}
+
+function printStdOut(x, prefix = '') {
+  if (SILENT) {
+    return;
+  }
+  x.split('\n').forEach((l) => {
+    process.stdout.write(chalk.dim(PREFIX) + prefix + l + '\n');
+  });
+}
+module.exports.log = function log(...x) {
+  printStdOut(x.join(' '));
+};
+module.exports.warn = function warn(...x) {
+  printStdErr(chalk.yellow(x.join(' ')));
+};
+module.exports.error = function error(...x) {
+  printStdErr(chalk.red(x.join(' ')));
+};
+
+module.exports.debug = function debug(...x) {
+  if (DEBUG) {
+    printStdOut(x.join(' '), chalk.blue('[debug] '));
+  }
+};
+
+module.exports.clearConsole = function clear() {
+  // if we're in CI then we'll always want to keep logs for whatever we're doing.
+  if (!isCI && isInteractive && !DEBUG) {
+    process.stdout.write(
+      process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H',
+    );
+  }
+};

packages/modular-scripts/react-dev-utils/openBrowser.js

@@ -4,6 +4,7 @@ var chalk = require('chalk');
 var execSync = require('child_process').execSync;
 var spawn = require('cross-spawn');
 var open = require('open');
+const console = require('./logger');
 
 // https://github.com/sindresorhus/open#app
 var OSX_CHROME = 'google chrome';

packages/modular-scripts/react-dev-utils/printBuildError.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const chalk = require('chalk');
+const console = require('./logger');
 
 module.exports = function printBuildError(err) {
   const message = err != null && err.message;

packages/modular-scripts/react-scripts/config/webpack.config.js

@@ -14,6 +14,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
+const { info } = require('../../react-dev-utils/logger');
 const InterpolateHtmlPlugin = require('../../react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('../../react-dev-utils/WatchMissingNodeModulesPlugin');
@@ -558,8 +559,6 @@ module.exports = function (webpackEnv) {
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (CSS and Fast Refresh):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
@@ -689,8 +688,8 @@ module.exports = function (webpackEnv) {
       try {
         require.resolve(plugin.package);
       } catch (err) {
-        console.info(
-          `${chalk.dim('[modular]')} It appears you're using ${chalk.cyan(
+        info(
+          `It appears you're using ${chalk.cyan(
             dependency,
           )}. Run ${chalk.cyan.bold(
             `yarn add -D ${plugin.package}`,

packages/modular-scripts/react-scripts/config/webpackDevServer.config.js

@@ -11,10 +11,13 @@ const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
-module.exports = function (proxy, allowedHost) {
+module.exports = function (port, proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -32,77 +35,67 @@ module.exports = function (proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // want to allow setting the allowedHosts manually for more complex setups
+    allowedHosts: disableFirewall ? 'all' : [allowedHost],
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    contentBasePublicPath: paths.publicUrlOrPath,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // Use 'ws' instead of 'sockjs-node' on server since we're using native
-    // websockets in `webpackHotDevClient`.
-    transportMode: 'ws',
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
-    // Enable custom sockjs pathname for websocket connection to hot reloading server.
-    // Enable custom sockjs hostname, pathname and port for websocket connection
-    // to hot reloading server.
-    sockHost,
-    sockPath,
-    sockPort,
-    // It is important to tell WebpackDevServer to use the same "publicPath" path as
-    // we specified in the webpack config. When homepage is '.', default to serving
-    // from the root.
-    // remove last slash so user can land on `/test` instead of `/test/`
-    publicPath: paths.publicUrlOrPath.slice(0, -1),
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: [paths.publicUrlOrPath],
+      // By default files from `contentBase` will not trigger a page reload.
+      watch: {
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    client: {
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
     https: getHttpsConfig(),
     host,
-    overlay: false,
+    port,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
     },
-    public: allowedHost,
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    before(app, server) {
+    onBeforeSetupMiddleware(server) {
+      const app = server.app;
       // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
@@ -115,7 +108,8 @@ module.exports = function (proxy, allowedHost) {
         require(paths.proxySetup)(app);
       }
     },
-    after(app) {
+    onAfterSetupMiddleware(server) {
+      const app = server.app;
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
       app.use(redirectServedPath(paths.publicUrlOrPath));
 

packages/modular-scripts/react-scripts/scripts/build.js

@@ -16,11 +16,12 @@ const configFactory = require('../config/webpack.config');
 const paths = require('../config/paths');
 const formatWebpackMessages = require('../../react-dev-utils/formatWebpackMessages');
 const printBuildError = require('../../react-dev-utils/printBuildError');
+const { log } = require('../../react-dev-utils/logger');
 
 const compiler = webpack(configFactory('production'));
 
 compiler.run(async (err, stats) => {
-  console.log(chalk.dim('[modular] ') + 'Webpack Compiled.');
+  log('Webpack Compiled.');
   let messages;
   let statsJson;
   if (err) {
@@ -62,7 +63,7 @@ compiler.run(async (err, stats) => {
   }
 
   if (isCi && messages.warnings.length) {
-    console.log(
+    log(
       chalk.yellow(
         'Treating warnings as errors because process.env.CI = true.\n' +
           'Most CI servers set it automatically.\n',