使用react hot reloading时如何抑制来自webpack的日志？答案

【问题标题】：How can i suppress logs from webpack when using react hot reloading?使用react hot reloading时如何抑制来自webpack的日志？
【发布时间】：2017-04-04 15:37:51
【问题描述】：

我正在使用这个 react redux 入门套件 https://github.com/coryhouse/pluralsight-redux-starter，我在控制台中得到以下输出

[HMR] connected

我尝试将 web-pack 配置中的以下字段切换为 true 和 false，但没有帮助

  noInfo: true,
  debug: false,

如何关闭这些日志？

【问题讨论】：

试试devServer: { stats: 'errors-only' }

标签： reactjs webpack redux webpack-dev-server react-hot-loader

【解决方案1】：

尝试了许多解决方案，开发服务器选项clientLogLevel: "none" 具有最接近的含义。但无法正常工作。

然后我找到了解决方法：

使用NODE_ENV=development 运行您的应用；为此转到package.json 并更新scripts：

"scripts": {
  "build": "webpack",
  "start": "NODE_ENV=production webpack-dev-server --progress --inline --hot",
  "dev": "NODE_ENV=development webpack-dev-server --progress --inline --hot"
}

修改webpack.config.js:

plugins: [
  new webpack.DefinePlugin({
    __DEVELOPMENT__: process.env.NODE_ENV !== 'production',
  })
],

DefinePlugin 允许您创建全局常量在编译时配置。

或

将global.console.log 替换为自定义console_log，以过滤掉[HMR] 和[WDS] 日志。看到这个Github comment。

将以下代码添加到您的development.js（根据值process.env.NODE_ENV !== 'production' 有条件地附加到webpack.config.js 中的entry 的文件）

(function(global) {
    var console_log = global.console.log
    global.console.log = function() {
        if (!(
            arguments.length == 1 &&
            typeof arguments[0] === 'string' &&
            arguments[0].match(/^\[(HMR|WDS)\]/)
        )) {
            console_log.apply(global.console,arguments)
        }
    }
})(window)

npm run dev

如果您使用过 DefinePlugin，那么我们现在在客户端拥有全局常量 __DEVELOPMENT__ === true。因此，在每次刷新时，您都可以这样做：
```
if (__DEVELOPMENT__) {
  console.clear();
}
```

【讨论】：