cannot mute webpack/hot/dev-server console.logs

[aegyed91]

Do you want to request a feature or report a bug?

bug

What is the current behavior?
Right now webpack/hot/dev-server/ spams my console, especially with multiple hot entry points (double spam).

[HMR] Waiting for update signal from WDS...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ../ng-cli/node_modules/css-loader/index.js!../ng-cli/node_modules/sass-loader/index.js!./src/assets/styles/main.scss
[HMR] App is up to date.

If the current behavior is a bug, please provide the steps to reproduce.
Use HMR in one of the entry points and check browser console.

What is the expected behavior?
Selective console logs in browser. Values: none, error, warning, info.

Webpack-dev-server has a devServer.clientLogLevel option, implemented here. The problem is, webpack/hot/dev-server should respect this option.

Files doing the spam:

• https://github.com/webpack/webpack/blob/master/hot/dev-server.js
• https://github.com/webpack/webpack/blob/master/hot/log-apply-result.js

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

win10/ubuntu 1604, node v7.4.0, npm v4.0.5, webpack-, webpack-dev-server v2.2.0

[sokra]

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please either update the issue with the template and reopen, or open a new issue.

[aegyed91]

@sokra boo, im afraid i dont have th power to reopen the issue

updated the issue based on the template

for ppl who dont wanna wait just copy those 2 files, comment out the relevant console.logs and reference ur own dev-server.js, thats it

[shubheksha]

I'd like to work on this!

[aegyed91]

+1 will do a code review

[lgraziani2712]

What is the difference* between the HotModuleReplacementPlugin and the devServer.hot flag?

[aegyed91]

@LucianoGraziani webpack/webpack-dev-server#97 (comment)

[lgraziani2712]

Thank you @tsm91! I never really understood HRM hah. I thought that just adding the plugin will work 🙈

[mjanssen]

Hey guys, is this 'issue' already resolved or is there already a way to allow certain log messages (like "updated modules") but disable the "Checking for updates on the server" message?

My console is flooding with [HMR] logs 😥 (see attached image).

[kazazor]

Another hacky temp solution for now in case you do not want to copy the needed files and reference them instead of webpack's files (so you'll still get updates in case they'll come in future versions):

////////// Temp solution ///////////

// TODO - Disable all info / logs for HMR until the log level issue will be fixed - https://github.com/webpack/webpack/issues/4115
const replaceInFile = (filePath, searchRegex, replaceString) => {
  const fs = require('fs');
  filePath = path.resolve(filePath);

  fs.readFile(filePath, 'utf8', function (err,data) {
    if (err) {
      return console.log(err);
    }

    const result = data.replace(searchRegex, replaceString);

    fs.writeFile(filePath, result, 'utf8', function (err) {
      if (err) {
        return console.log(err);
      }
    });
  });
};

// Why do we add `;\n{}`? Some part of the code has if conditions without {} around their content.
// So we'll just comment out the console.log line we'll get an error. This way we're adding a line that doesn't do anything.
const emptyStatement = '//$1;\n{}';
const consoleRegex = /(console\.(info|log).+\);)/g;
replaceInFile("node_modules/webpack/hot/dev-server.js", consoleRegex, emptyStatement);
replaceInFile("node_modules/webpack/hot/log-apply-result.js", consoleRegex, emptyStatement);

////////// End of temp solution ///////////

The above comments out all the console.log / console.info (just change the regex as you wish) in the original webpack's HMR files.

[esbenp]

This issue is fixed by #4960 and webpack/webpack-dev-server#926 , right? @sokra @TheLarkInn

[psimyn]

@esbenp fixed for some messages. Still getting [HMR] Waiting for update signal from WDS...

[drewlustro]

Would love this to get fixed. +1

[IAMtheIAM]

Hey guys, none of these suggestions worked for me, except the CLI option does!!

webpack --client-log-level warning
// or 
webpack --client-log-level error

It defaults to info which is where all the [HMR] and [WDS] spam comes from.

[alexander-akait]

Maybe better fix this problem in webpack-dev-server/webpack-dev-middleware

[noelebrun]

Hey guys,

@evilebottnawi Seems like this config is already handled in webpack-dev-server (https://github.com/webpack/webpack-dev-server/blob/34a4a26ccd8ea9f0349a9d3b257f686d43f027f8/client-src/default/index.js#L101).

What do you think about adding an optional query string parameter to define the log level? This parameter would override the logLevel set by webpack-dev-server if defined. (Even tho this case should not really happen since webpack-dev-server is adding the hot dev server without any parameters).

[alexander-akait]

@webpack-bot move to webpack/webpack-dev-server

[webpack-bot]

I've moved it to webpack/webpack-dev-server.

[agrublev]

devServer: {
        clientLogLevel: "silent",

[MaxmaxmaximusGitHub]

@agrublev this not working

[wen81643956]

If you're using webpack-hot-middleware, you can configure it like this: webpack-hot-middleware/client?reload=true&noInfo=true

[peterpoe]

Anyone using gatsby, you can alter webpack-hot-middleware configuration by adding the following to gatsby-node.js:

exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
  if (stage === 'develop') {
    // First commons entry is webpack-hot-middleware
    // @see https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js
    const commons = getConfig().entry.commons
    commons[0] += '&noInfo=true'
    actions.setWebpackConfig({
      entry: {
        commons,
      },
    })
  }
}