refactor(client): migrate client to built-in logger (#2631)

Author: knagaitsev

bin/cli-flags.js

@@ -65,12 +65,12 @@ module.exports = {
       describe: 'Open default browser with the specified page',
     },
     {
-      name: 'client-log-level',
+      name: 'client-logging',
       type: String,
       group: DISPLAY_GROUP,
       defaultValue: 'info',
       describe:
-        'Log level in the browser (trace, debug, info, warn, error or silent)',
+        'Log level in the browser (none, error, warn, info, log, verbose)',
     },
     {
       name: 'https',

bin/options.js

@@ -73,12 +73,12 @@ const options = {
     group: DISPLAY_GROUP,
     describe: 'Enables/Disables colors on the console',
   },
-  'client-log-level': {
+  'client-logging': {
     type: 'string',
     group: DISPLAY_GROUP,
     default: 'info',
     describe:
-      'Log level in the browser (trace, debug, info, warn, error or silent)',
+      'Log level in the browser (none, error, warn, info, log, verbose)',
   },
   https: {
     type: 'boolean',

client-src/clients/SockJSClient.js

@@ -13,7 +13,7 @@ module.exports = class SockJSClient extends BaseClient {
     this.sock = new SockJS(url);
 
     this.sock.onerror = (err) => {
-      log.error('[WDS]', err);
+      log.error(err);
     };
   }
 

client-src/clients/WebsocketClient.js

@@ -14,7 +14,7 @@ module.exports = class WebsocketClient extends BaseClient {
     this.client = new WebSocket(url.replace(/^http/, 'ws'));
 
     this.client.onerror = (err) => {
-      log.error('[WDS]', err);
+      log.error(err);
     };
   }
 

client-src/default/index.js

@@ -1,5 +1,10 @@
 'use strict';
 
+// webpack@5 doesn't inject node polyfill automatically
+window.global = window.global || window;
+window.process = window.process || {};
+window.process.env = window.process.env || {};
+
 /* global __resourceQuery WorkerGlobalScope self */
 /* eslint prefer-destructuring: off */
 const stripAnsi = require('strip-ansi');
@@ -37,14 +42,14 @@ if (typeof window !== 'undefined') {
 const onSocketMessage = {
   hot() {
     options.hot = true;
-    log.info('[WDS] Hot Module Replacement enabled.');
+    log.info('Hot Module Replacement enabled.');
   },
   liveReload() {
     options.liveReload = true;
-    log.info('[WDS] Live Reloading enabled.');
+    log.info('Live Reloading enabled.');
   },
   invalid() {
-    log.info('[WDS] App updated. Recompiling...');
+    log.info('App updated. Recompiling...');
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.useWarningOverlay || options.useErrorOverlay) {
       overlay.clear();
@@ -55,17 +60,20 @@ const onSocketMessage = {
     status.currentHash = hash;
   },
   'still-ok': function stillOk() {
-    log.info('[WDS] Nothing changed.');
+    log.info('Nothing changed.');
     if (options.useWarningOverlay || options.useErrorOverlay) {
       overlay.clear();
     }
     sendMessage('StillOk');
   },
-  'log-level': function logLevel(level) {
+  logging: function logging(level) {
+    // this is needed because the HMR logger operate separately from
+    // dev server logger
     const hotCtx = require.context('webpack/hot', false, /^\.\/log$/);
     if (hotCtx.keys().indexOf('./log') !== -1) {
       hotCtx('./log').setLogLevel(level);
     }
+
     setLogLevel(level);
   },
   overlay(value) {
@@ -86,7 +94,7 @@ const onSocketMessage = {
   },
   'progress-update': function progressUpdate(data) {
     if (options.useProgress) {
-      log.info(`[WDS] ${data.percent}% - ${data.msg}.`);
+      log.info(`${data.percent}% - ${data.msg}.`);
     }
     sendMessage('Progress', data);
   },
@@ -101,11 +109,11 @@ const onSocketMessage = {
     reloadApp(options, status);
   },
   'content-changed': function contentChanged() {
-    log.info('[WDS] Content base changed. Reloading...');
+    log.info('Content base changed. Reloading...');
     self.location.reload();
   },
   warnings(warnings) {
-    log.warn('[WDS] Warnings while compiling.');
+    log.warn('Warnings while compiling.');
     const strippedWarnings = warnings.map((warning) => stripAnsi(warning));
     sendMessage('Warnings', strippedWarnings);
     for (let i = 0; i < strippedWarnings.length; i++) {
@@ -121,7 +129,7 @@ const onSocketMessage = {
     reloadApp(options, status);
   },
   errors(errors) {
-    log.error('[WDS] Errors while compiling. Reload prevented.');
+    log.error('Errors while compiling. Reload prevented.');
     const strippedErrors = errors.map((error) => stripAnsi(error));
     sendMessage('Errors', strippedErrors);
     for (let i = 0; i < strippedErrors.length; i++) {
@@ -136,7 +144,7 @@ const onSocketMessage = {
     log.error(error);
   },
   close() {
-    log.error('[WDS] Disconnected!');
+    log.error('Disconnected!');
 
     sendMessage('Close');
   },

client-src/default/utils/log.js

@@ -1,47 +1,19 @@
 'use strict';
 
-const log = require('loglevel').getLogger('webpack-dev-server');
+const log = require('webpack/lib/logging/runtime');
 
-const INFO = 'info';
-const WARN = 'warn';
-const ERROR = 'error';
-const DEBUG = 'debug';
-const TRACE = 'trace';
-const SILENT = 'silent';
-// deprecated
-// TODO: remove these at major released
-// https://github.com/webpack/webpack-dev-server/pull/1825
-const WARNING = 'warning';
-const NONE = 'none';
-
-// Set the default log level
-log.setDefaultLevel(INFO);
+const name = 'webpack-dev-server';
+const defaultLevel = 'info';
 
 function setLogLevel(level) {
-  switch (level) {
-    case INFO:
-    case WARN:
-    case ERROR:
-    case DEBUG:
-    case TRACE:
-      log.setLevel(level);
-      break;
-    // deprecated
-    case WARNING:
-      // loglevel's warning name is different from webpack's
-      log.setLevel('warn');
-      break;
-    // deprecated
-    case NONE:
-    case SILENT:
-      log.disableAll();
-      break;
-    default:
-      log.error(`[WDS] Unknown clientLogLevel '${level}'`);
-  }
+  log.configureDefaultLogger({
+    level,
+  });
 }
 
+setLogLevel(defaultLevel);
+
 module.exports = {
-  log,
+  log: log.getLogger(name),
   setLogLevel,
 };

client-src/default/utils/reloadApp.js

@@ -12,7 +12,7 @@ function reloadApp(
     return;
   }
   if (hot) {
-    log.info('[WDS] App hot update...');
+    log.info('App hot update...');
     const hotEmitter = require('webpack/hot/emitter');
     hotEmitter.emit('webpackHotUpdate', currentHash);
     if (typeof self !== 'undefined' && self.window) {
@@ -40,7 +40,7 @@ function reloadApp(
 
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
-    log.info('[WDS] App updated. Reloading...');
+    log.info('App updated. Reloading...');
     rootWindow.location.reload();
   }
 }

lib/Server.js

@@ -634,8 +634,12 @@ class Server {
         }
       });
 
-      if (this.options.clientLogLevel) {
-        this.sockWrite([connection], 'log-level', this.options.clientLogLevel);
+      if (this.options.clientOptions.logging) {
+        this.sockWrite(
+          [connection],
+          'logging',
+          this.options.clientOptions.logging
+        );
       }
 
       if (this.options.hot === true || this.options.hot === 'only') {

lib/options.json

@@ -10,18 +10,6 @@
     "bonjour": {
       "type": "boolean"
     },
-    "clientLogLevel": {
-      "enum": [
-        "info",
-        "warn",
-        "error",
-        "debug",
-        "trace",
-        "silent",
-        "none",
-        "warning"
-      ]
-    },
     "clientOptions": {
       "type": "object",
       "properties": {
@@ -43,6 +31,9 @@
               "type": "null"
             }
           ]
+        },
+        "logging": {
+          "enum": ["none", "error", "warn", "info", "log", "verbose"]
         }
       },
       "additionalProperties": false
@@ -399,7 +390,6 @@
     "properties": {
       "allowedHosts": "should be {Array} (https://webpack.js.org/configuration/dev-server/#devserverallowedhosts)",
       "bonjour": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverbonjour)",
-      "clientLogLevel": "should be {String} and equal to one of the allowed values\n\n [ 'none', 'silent', 'info', 'debug', 'trace', 'error', 'warning', 'warn' ]\n\n (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)",
       "clientOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverclientoptions)",
       "compress": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservercompress)",
       "contentBase": "should be {Number|String|Array} (https://webpack.js.org/configuration/dev-server/#devservercontentbase)",

lib/utils/createConfig.js

@@ -80,10 +80,14 @@ function createConfig(config, argv, { port }) {
     options.hot = hasHotOnly ? 'only' : argv.hot;
   }
 
-  // TODO https://github.com/webpack/webpack-dev-server/issues/616 (v4)
-  // We should prefer CLI arg under config, now we always prefer `clientLogLevel` from `devServer`
-  if (!options.clientLogLevel && argv.clientLogLevel) {
-    options.clientLogLevel = argv.clientLogLevel;
+  if (argv.clientLogging) {
+    if (options.clientOptions) {
+      options.clientOptions.logging = argv.clientLogging;
+    } else {
+      options.clientOptions = {
+        logging: argv.clientLogging,
+      };
+    }
   }
 
   if (argv.contentBase) {