refactor: migrate on built-in logger

BREAKING CHANGE: `log`, `logLevel`, `logTime`, `noInfo`, `quiet`, `reporter` and `warn` options were removed in favor built-in webpack logger, please use https://webpack.js.org/configuration/other-options/#infrastructurelogginglevel for enable and setup logging output

Author: alexander-akait

babel.config.js

@@ -4,6 +4,10 @@ module.exports = (api) => {
   api.cache(true);
 
   return {
+    parserOpts: {
+      // For `jest`
+      allowReturnOutsideFunction: true,
+    },
     presets: ['@babel/preset-env'],
     env: {
       test: {

bin/options.js

@@ -68,17 +68,6 @@ const options = {
     group: DISPLAY_GROUP,
     describe: 'Enables/Disables colors on the console',
   },
-  info: {
-    type: 'boolean',
-    group: DISPLAY_GROUP,
-    default: true,
-    describe: 'Info',
-  },
-  quiet: {
-    type: 'boolean',
-    group: DISPLAY_GROUP,
-    describe: 'Quiet',
-  },
   'client-log-level': {
     type: 'string',
     group: DISPLAY_GROUP,

bin/webpack-dev-server.js

@@ -14,7 +14,6 @@ const Server = require('../lib/Server');
 const setupExitSignals = require('../lib/utils/setupExitSignals');
 const colors = require('../lib/utils/colors');
 const processOptions = require('../lib/utils/processOptions');
-const createLogger = require('../lib/utils/createLogger');
 const getVersions = require('../lib/utils/getVersions');
 const options = require('./options');
 
@@ -86,15 +85,13 @@ const config = require(convertArgvPath)(yargs, argv, {
 });
 
 function startDevServer(config, options) {
-  const log = createLogger(options);
-
   let compiler;
 
   try {
     compiler = webpack(config);
   } catch (err) {
     if (err instanceof webpack.WebpackOptionsValidationError) {
-      log.error(colors.error(options.stats.colors, err.message));
+      console.error(colors.error(options.stats.colors, err.message));
       // eslint-disable-next-line no-process-exit
       process.exit(1);
     }
@@ -103,11 +100,11 @@ 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') {
-      log.error(colors.error(options.stats.colors, err.message));
+      console.error(colors.error(options.stats.colors, err.message));
       // eslint-disable-next-line no-process-exit
       process.exit(1);
     }

lib/Server.js

@@ -24,7 +24,6 @@ const validateOptions = require('schema-utils');
 const isAbsoluteUrl = require('is-absolute-url');
 const normalizeOptions = require('./utils/normalizeOptions');
 const updateCompiler = require('./utils/updateCompiler');
-const createLogger = require('./utils/createLogger');
 const getCertificate = require('./utils/getCertificate');
 const status = require('./utils/status');
 const createDomain = require('./utils/createDomain');
@@ -38,16 +37,16 @@ if (!process.env.WEBPACK_DEV_SERVER) {
 }
 
 class Server {
-  constructor(compiler, options = {}, _log) {
+  constructor(compiler, options = {}) {
     validateOptions(schema, options, 'webpack Dev Server');
 
     this.compiler = compiler;
     this.options = options;
+    this.logger = this.compiler.getInfrastructureLogger('webpack-dev-server');
     this.sockets = [];
     this.contentBaseWatchers = [];
     // Keep track of websocket proxies for external websocket upgrade.
     this.websocketProxies = [];
-    this.log = _log || createLogger(options);
     // this value of ws can be overwritten for tests
     this.wsHeartbeatInterval = 30000;
 
@@ -149,7 +148,9 @@ class Server {
     // middleware for serving webpack bundle
     this.middleware = webpackDevMiddleware(
       this.compiler,
-      Object.assign({}, this.options, { logLevel: this.log.options.level })
+      Object.assign({}, this.options, {
+        logger: this.logger,
+      })
     );
   }
 
@@ -189,7 +190,26 @@ class Server {
             proxyOptions.context = correctedContext;
           }
 
-          proxyOptions.logLevel = proxyOptions.logLevel || 'warn';
+          const getLogLevelForProxy = (level) => {
+            if (level === 'none') {
+              return 'silent';
+            }
+
+            if (level === 'log') {
+              return 'info';
+            }
+
+            if (level === 'verbose') {
+              return 'debug';
+            }
+
+            return level;
+          };
+
+          proxyOptions.logLevel = getLogLevelForProxy(
+            this.compiler.options.infrastructureLogging.level
+          );
+          proxyOptions.logProvider = () => this.logger;
 
           return proxyOptions;
         });
@@ -302,11 +322,11 @@ class Server {
         this.app.use(publicPath, express.static(item));
       });
     } else if (isAbsoluteUrl(String(contentBase))) {
-      this.log.warn(
+      this.logger.warn(
         'Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
       );
 
-      this.log.warn(
+      this.logger.warn(
         'proxy: {\n\t"*": "<your current contentBase configuration>"\n}'
       );
 
@@ -319,11 +339,11 @@ class Server {
         res.end();
       });
     } else if (typeof contentBase === 'number') {
-      this.log.warn(
+      this.logger.warn(
         'Using a number as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
       );
 
-      this.log.warn(
+      this.logger.warn(
         'proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'
       );
 
@@ -548,7 +568,7 @@ class Server {
       let fakeCert;
 
       if (!this.options.https.key || !this.options.https.cert) {
-        fakeCert = getCertificate(this.log);
+        fakeCert = getCertificate(this.logger);
       }
 
       this.options.https.key = this.options.https.key || fakeCert;
@@ -577,7 +597,7 @@ class Server {
     }
 
     this.listeningApp.on('error', (err) => {
-      this.log.error(err);
+      this.logger.error(err);
     });
   }
 
@@ -590,7 +610,7 @@ class Server {
       }
 
       if (!headers) {
-        this.log.warn(
+        this.logger.warn(
           'transportMode.server implementation must pass headers to the callback of onConnection(f) ' +
             'via f(connection, headers) in order for clients to pass a headers security check'
         );
@@ -650,7 +670,7 @@ class Server {
     status(
       uri,
       this.options,
-      this.log,
+      this.logger,
       this.options.stats && this.options.stats.colors
     );
   }

lib/options.json

@@ -211,21 +211,9 @@
     "liveReload": {
       "type": "boolean"
     },
-    "log": {
-      "instanceof": "Function"
-    },
-    "logLevel": {
-      "enum": ["info", "warn", "error", "debug", "trace", "silent"]
-    },
-    "logTime": {
-      "type": "boolean"
-    },
     "mimeTypes": {
       "type": "object"
     },
-    "noInfo": {
-      "type": "boolean"
-    },
     "onAfterSetupMiddleware": {
       "instanceof": "Function"
     },
@@ -326,12 +314,6 @@
     "publicPath": {
       "type": "string"
     },
-    "quiet": {
-      "type": "boolean"
-    },
-    "reporter": {
-      "instanceof": "Function"
-    },
     "requestCert": {
       "type": "boolean"
     },
@@ -396,9 +378,6 @@
     "useLocalIp": {
       "type": "boolean"
     },
-    "warn": {
-      "instanceof": "Function"
-    },
     "watchContentBase": {
       "type": "boolean"
     },
@@ -436,11 +415,7 @@
       "injectClient": "should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjectclient)",
       "injectHot": "should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjecthot)",
       "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-)",
       "onAfterSetupMiddleware": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverafter)",
       "onBeforeSetupMiddleware": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverbefore)",
       "onListening": "should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)",
@@ -453,8 +428,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)",
       "serveIndex": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverserveindex)",
@@ -464,7 +437,6 @@
       "stats": "should be {Object|Boolean} (https://webpack.js.org/configuration/dev-server/#devserverstats-)",
       "transportMode": "should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)",
       "useLocalIp": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserveruselocalip)",
-      "warn": "should be {Function}",
       "watchContentBase": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverwatchcontentbase)",
       "watchOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-)",
       "writeToDisk": "should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-)"

lib/servers/SockJSServer.js

@@ -30,15 +30,18 @@ module.exports = class SockJSServer extends BaseServer {
   // options has: error (function), debug (function), server (http/s server), path (string)
   constructor(server) {
     super(server);
+
     this.socket = sockjs.createServer({
       // Use provided up-to-date sockjs-client
       sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
-      // Limit useless logs
+      // Default logger is very annoy. Limit useless logs.
       log: (severity, line) => {
         if (severity === 'error') {
-          this.server.log.error(line);
+          this.server.logger.error(line);
+        } else if (severity === 'info') {
+          this.server.logger.log(line);
         } else {
-          this.server.log.debug(line);
+          this.server.logger.debug(line);
         }
       },
     });

lib/servers/WebsocketServer.js

@@ -9,6 +9,7 @@ const BaseServer = require('./BaseServer');
 module.exports = class WebsocketServer extends BaseServer {
   constructor(server) {
     super(server);
+
     this.wsServer = new ws.Server({
       noServer: true,
       path: this.server.options.clientOptions.path,
@@ -25,7 +26,7 @@ module.exports = class WebsocketServer extends BaseServer {
     });
 
     this.wsServer.on('error', (err) => {
-      this.server.log.error(err.message);
+      this.server.logger.error(err.message);
     });
 
     const noop = () => {};

lib/utils/createConfig.js

@@ -121,16 +121,6 @@ function createConfig(config, argv, { port }) {
     options.stats = Object.assign({}, options.stats, { colors: argv.color });
   }
 
-  // TODO remove in `v4`
-  if (!argv.info) {
-    options.noInfo = true;
-  }
-
-  // TODO remove in `v4`
-  if (argv.quiet) {
-    options.quiet = true;
-  }
-
   if (argv.https) {
     options.https = true;
   }

lib/utils/createLogger.js

@@ -3,7 +3,7 @@
 const open = require('open');
 const isAbsoluteUrl = require('is-absolute-url');
 
-function runOpen(uri, options, log) {
+function runOpen(uri, options, logger) {
   // https://github.com/webpack/webpack-dev-server/issues/1990
   let openOptions = { wait: false };
   let openOptionValue = '';
@@ -26,7 +26,7 @@ function runOpen(uri, options, log) {
       const pageUrl = page && isAbsoluteUrl(page) ? page : `${uri}${page}`;
 
       return open(pageUrl, openOptions).catch(() => {
-        log.warn(
+        logger.warn(
           `Unable to open "${pageUrl}" in browser${openOptionValue}. If you are running in a headless environment, please do not use the --open flag`
         );
       });