Watch および WatchOptions

Webpackはファイルの変更を監視し、変更があった場合に再コンパイルできます。このページでは、これを有効にする方法と、監視が正常に機能しない場合にできるいくつかの調整について説明します。

watch

boolean = false

ウォッチモードをオンにします。これは、最初のビルド後、webpackが解決されたファイルの変更を監視し続けることを意味します。

webpack.config.js

module.exports = {
  //...
  watch: true,
};

watchOptions

object

ウォッチモードをカスタマイズするために使用されるオプションのセット

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
};

watchOptions.aggregateTimeout

number = 20

最初のファイルが変更された後、再ビルドする前に遅延を追加します。これにより、webpackはこの期間中に行われた他の変更をすべて1つの再ビルドに集約できます。ミリ秒単位で値を渡します

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 600,
  },
};

watchOptions.ignored

RegExp string [string]

一部のシステムでは、多くのファイルを監視すると、CPUやメモリの使用量が多くなる可能性があります。正規表現を使用して、node_modulesのような大きなフォルダーを除外できます

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/,
  },
};

あるいは、globパターンを使用することもできます

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: '**/node_modules',
  },
};

複数のglobパターンを使用することも可能です

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: ['**/files/**/*.js', '**/node_modules'],
  },
};

さらに、絶対パスを指定できます

const path = require('path');
module.exports = {
  //...
  watchOptions: {
    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
  },
};

globパターンを使用する場合、それらはglob-to-regexpで正規表現に変換されるため、watchOptions.ignoredにglobパターンを使用する前に、必ず理解しておいてください。

watchOptions.poll

boolean = false number

trueを渡してポーリングをオンにします。これにより、デフォルトのポーリング間隔が5007に設定されるか、ミリ秒単位でポーリング間隔を指定します。

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // Check for changes every second
  },
};

watchOptions.followSymlinks

ファイルを探すときにシンボリックリンクをたどります。webpackはすでにresolve.symlinksでシンボリックリンクを解決するため、これは通常必要ありません。

• 型: boolean

• 例

  module.exports = {
    //...
    watchOptions: {
      followSymlinks: true,
    },
  };

watchOptions.stdin

標準入力ストリームが終了したときに監視を停止します。

• 型: boolean

• 例

  module.exports = {
    //...
    watchOptions: {
      stdin: true,
    },
  };

トラブルシューティング

問題が発生している場合は、次の注意事項を参照してください。webpackがファイルの変更を見逃す可能性のある理由はさまざまです。

変更が確認されたが処理されない

webpackを--progressフラグ付きで実行して、webpackに変更が通知されていないことを確認してください。保存時に進行状況が表示されるがファイルが出力されない場合は、ファイル監視の問題ではなく、構成の問題である可能性があります。

webpack --watch --progress

ウォッチャーが不足している

システムで使用可能なウォッチャーが十分に用意されていることを確認してください。この値が低すぎると、Webpackのファイルウォッチャーが変更を認識しません

cat /proc/sys/fs/inotify/max_user_watches

Archユーザーは、/etc/sysctl.d/99-sysctl.confにfs.inotify.max_user_watches=524288を追加してから、sysctl --systemを実行します。Ubuntuユーザー（および他のユーザー）は、echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -pを実行します。

macOS fseventsのバグ

macOSでは、特定のシナリオでフォルダーが破損する可能性があります。この記事を参照してください。

Windowsのパス

webpackは、__dirname + '/app/folder'のような多くの構成オプションに絶対パスを期待するため、Windowsの\パス区切り記号は一部の機能を損なう可能性があります。

正しい区切り記号を使用してください。つまり、path.resolve(__dirname, 'app/folder')またはpath.join(__dirname, 'app', 'folder')です。

Vim

一部のマシンでは、Vimはbackupcopyオプションがautoに設定された状態で事前構成されています。これは、システムのファイル監視メカニズムに問題を引き起こす可能性があります。このオプションをyesに切り替えると、ファイルのコピーが作成され、保存時に元のファイルが上書きされることが保証されます。

:set backupcopy=yes

WebStormでの保存

JetBrains WebStorm IDEを使用している場合、変更したファイルを保存しても、期待どおりにウォッチャーがトリガーされない場合があります。設定で保存前にファイルをバックアップするオプションを無効にしてみてください。これは、ファイルが最初に一時的な場所に保存されてから元のファイルが上書きされるかどうかを決定します。ファイル > {設定|環境設定} > 外観 & 動作 > システム設定 > 保存前にファイルをバックアップするのチェックを外します。一部のバージョンのWebStormでは、このオプションは"セーフライト"を使用する（最初に一時ファイルに変更を保存する）と呼ばれる場合があります。