feat: migrate to built-in logger

Author: hiroppy

bin/options.js

@@ -74,17 +74,12 @@ const options = {
     default: true,
     describe: 'Info',
   },
-  quiet: {
-    type: 'boolean',
-    group: DISPLAY_GROUP,
-    describe: 'Quiet',
-  },
   'client-log-level': {
     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',

bin/webpack-dev-server.js

@@ -2,7 +2,7 @@
 
 'use strict';
 
-/* eslint-disable no-shadow, no-console */
+/* eslint-disable no-shadow */
 
 const fs = require('fs');
 const net = require('net');
@@ -19,6 +19,7 @@ const getVersions = require('../lib/utils/getVersions');
 const options = require('./options');
 
 let server;
+const log = createLogger(null);
 const serverData = {
   server: null,
 };
@@ -38,12 +39,12 @@ if (importLocal(__filename)) {
 try {
   require.resolve('webpack-cli');
 } catch (err) {
-  console.error('The CLI moved into a separate package: webpack-cli');
-  console.error(
+  log.error('The CLI moved into a separate package: webpack-cli');
+  log.error(
     "Please install 'webpack-cli' in addition to webpack itself to use the CLI"
   );
-  console.error('-> When using npm: npm i -D webpack-cli');
-  console.error('-> When using yarn: yarn add -D webpack-cli');
+  log.error('-> When using npm: npm i -D webpack-cli');
+  log.error('-> When using yarn: yarn add -D webpack-cli');
 
   process.exitCode = 1;
 }
@@ -86,8 +87,6 @@ const config = require(convertArgvPath)(yargs, argv, {
 });
 
 function startDevServer(config, options) {
-  const log = createLogger(options);
-
   let compiler;
 
   try {
@@ -103,7 +102,7 @@ function startDevServer(config, options) {
   }
 
   try {
-    server = new Server(compiler, options, log);
+    server = new Server(compiler, options);
     serverData.server = server;
   } catch (err) {
     if (err.name === 'ValidationError') {

client-src/default/index.js

@@ -1,11 +1,16 @@
 'use strict';
 
+// webpack@5 doesn't inject node polyfill automatically
+// this is for tapable
+// window.process = require('process/browser');
+// require('util/util');
+
 /* global __resourceQuery WorkerGlobalScope self */
 /* eslint prefer-destructuring: off */
 const stripAnsi = require('strip-ansi');
 const socket = require('./socket');
 const overlay = require('./overlay');
-const { log, setLogLevel } = require('./utils/log');
+const createLogger = require('./utils/createLogger');
 const sendMessage = require('./utils/sendMessage');
 const reloadApp = require('./utils/reloadApp');
 const createSocketUrl = require('./utils/createSocketUrl');
@@ -24,6 +29,7 @@ const options = {
   useProgress: false,
 };
 const socketUrl = createSocketUrl(__resourceQuery);
+let log = createLogger(null);
 
 self.addEventListener('beforeunload', () => {
   status.isUnloading = true;
@@ -37,14 +43,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,18 +61,14 @@ 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) {
-    const hotCtx = require.context('webpack/hot', false, /^\.\/log$/);
-    if (hotCtx.keys().indexOf('./log') !== -1) {
-      hotCtx('./log').setLogLevel(level);
-    }
-    setLogLevel(level);
+    log = createLogger(level);
   },
   overlay(value) {
     if (typeof document !== 'undefined') {
@@ -86,7 +88,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);
   },
@@ -98,14 +100,14 @@ const onSocketMessage = {
     if (options.initial) {
       return (options.initial = false);
     } // eslint-disable-line no-return-assign
-    reloadApp(options, status);
+    reloadApp(options, status, log);
   },
   '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++) {
@@ -118,10 +120,10 @@ const onSocketMessage = {
     if (options.initial) {
       return (options.initial = false);
     } // eslint-disable-line no-return-assign
-    reloadApp(options, status);
+    reloadApp(options, status, log);
   },
   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 +138,7 @@ const onSocketMessage = {
     log.error(error);
   },
   close() {
-    log.error('[WDS] Disconnected!');
+    log.error('Disconnected!');
     sendMessage('Close');
   },
 };

client-src/default/utils/createLogger.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const log = require('webpack/lib/logging/runtime');
+
+function createLogger(level = 'info') {
+  const name = 'webpack-dev-server';
+
+  log.configureDefaultLogger({
+    level,
+  });
+
+  return log.getLogger(name);
+}
+
+module.exports = createLogger;

client-src/default/utils/log.js

@@ -2,17 +2,16 @@
 
 /* global WorkerGlobalScope self */
 
-const { log } = require('./log');
-
 function reloadApp(
   { hotReload, hot, liveReload },
-  { isUnloading, currentHash }
+  { isUnloading, currentHash },
+  log
 ) {
   if (isUnloading || !hotReload) {
     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 +39,7 @@ function reloadApp(
 
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
-    log.info('[WDS] App updated. Reloading...');
+    log.info('App updated. Reloading...');
     rootWindow.location.reload();
   }
 }

client-src/default/utils/reloadApp.js

@@ -1,9 +1,18 @@
 'use strict';
 
+const { join, resolve } = require('path');
 const webpack = require('webpack');
 
 module.exports = {
   mode: 'production',
+  entry: [
+    join(__dirname, '../../node_modules/util'),
+    join(__dirname, './index.js'),
+  ],
+  output: {
+    path: resolve('client'),
+    filename: 'index.bundle.js',
+  },
   module: {
     rules: [
       {

client-src/default/webpack.config.js

@@ -38,13 +38,11 @@ if (!process.env.WEBPACK_DEV_SERVER) {
 }
 
 class Server {
-  constructor(compiler, options = {}, _log) {
+  constructor(compiler, options = {}, log) {
     validateOptions(schema, options, 'webpack Dev Server');
-
     this.compiler = compiler;
     this.options = options;
-
-    this.log = _log || createLogger(options);
+    this.log = log || createLogger(compiler);
 
     if (this.options.transportMode !== undefined) {
       this.log.warn(
@@ -194,10 +192,7 @@ class Server {
 
   setupDevMiddleware() {
     // middleware for serving webpack bundle
-    this.middleware = webpackDevMiddleware(
-      this.compiler,
-      Object.assign({}, this.options, { logLevel: this.log.options.level })
-    );
+    this.middleware = webpackDevMiddleware(this.compiler, this.options);
   }
 
   setupCompressFeature() {

lib/Server.js

@@ -37,16 +37,7 @@
       ]
     },
     "clientLogLevel": {
-      "enum": [
-        "info",
-        "warn",
-        "error",
-        "debug",
-        "trace",
-        "silent",
-        "none",
-        "warning"
-      ]
+      "enum": ["none", "error", "warn", "info", "log", "verbose"]
     },
     "compress": {
       "type": "boolean"
@@ -182,18 +173,12 @@
     "log": {
       "instanceof": "Function"
     },
-    "logLevel": {
-      "enum": ["info", "warn", "error", "debug", "trace", "silent"]
-    },
     "logTime": {
       "type": "boolean"
     },
     "mimeTypes": {
       "type": "object"
     },
-    "noInfo": {
-      "type": "boolean"
-    },
     "onListening": {
       "instanceof": "Function"
     },
@@ -301,9 +286,6 @@
     "publicPath": {
       "type": "string"
     },
-    "quiet": {
-      "type": "boolean"
-    },
     "reporter": {
       "instanceof": "Function"
     },
@@ -439,10 +421,8 @@
       "key": "should be {String|Buffer}",
       "liveReload": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverlivereload-)",
       "log": "should be {Function}",
-      "logLevel": "should be {String} and equal to one of the allowed values\n\n [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]\n\n (https://github.com/webpack/webpack-dev-middleware#loglevel)",
       "logTime": "should be {Boolean} (https://github.com/webpack/webpack-dev-middleware#logtime)",
       "mimeTypes": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devservermimetypes-)",
-      "noInfo": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservernoinfo-)",
       "onListening": "should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)",
       "open": "should be {String|Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserveropen)",
       "openPage": "should be {String|Array} (https://webpack.js.org/configuration/dev-server/#devserveropenpage)",
@@ -455,7 +435,6 @@
       "proxy": "should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)",
       "public": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)",
       "publicPath": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublicpath-)",
-      "quiet": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverquiet-)",
       "reporter": "should be {Function} (https://github.com/webpack/webpack-dev-middleware#reporter)",
       "requestCert": "should be {Boolean}",
       "contentBasePublicPath": "should be {String|Array} (https://webpack.js.org/configuration/dev-server/#devservercontentbasepublicpath)",