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

Question

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

[HMR] connected

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

  noInfo: true,
  debug: false,

我怎样才能关闭这些日志？

Answer 1

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

然后我找到了一个解决方法：

1. 运行您的应用程序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"
   }
   

2. 修改webpack.config.js：

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

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

   或者

   替换为过滤掉并记录global.console.log的自定义。请参阅此Github 评论。console_log[HMR][WDS]

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

   (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)
   

3. npm run dev

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

   if (__DEVELOPMENT__) {
     console.clear();
   }