reactjs - 反応ホットリロードを使用しているときに webpack からのログを抑制するにはどうすればよいですか?

Question

このreact reduxスターターキット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]

   以下のコードを(値に基づいてinにdevelopment.js条件付きで追加されるファイル) に追加します。entrywebpack.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();
   }