Docker内で Webpack の watch でファイルの変更を検知する
久しぶりにフロントエンドの開発(Vue.js)をしているんだけど、やることが多くて困ってます。とはいえ、vue-cliというツールが初期セットアップをしてくれてローカルでの開発環境やビルドの構成をまるっと作ってくれて、何も知らなくても Hello World はすぐさまできるようになっていてなかなか便利。
さらに、この環境をDockerで作成して他のメンバーがすぐに開発を始められるようにしたんだけど、なぜかファイルの変更を検知してくれれない。調べてみると以下のサイトに原因と対応方法が載ってました。
Webpack Watch in Vagrant/Docker
これによると、 Webpack の watch は inotify というLinux 2.6 から追加されたファイルシステムのイベントを監視する仕組みを使っているらしい。しかし、ホスト上のファイルをVirualBoxに同期するのにNFSを使っていて inotify は NFS に対応していない、とかそんな感じのようですよ。
ということで、以下のオプションを使って、ファイルシステムの変更を watch からポーリングするように以下の設定をしてくださいとのことでした。
watchOptions: { poll: true }
だがしかし、近頃のフロントエンド初心者の私にはどこに設定するのかなぞだった(設定ファイルっぽいのが一杯あって)。さがしました、ここに回答がありました。ありがとう。
https://github.com/vuejs-templates/webpack/issues/432#issuecomment-272914189
vue-cli が作成した設定ファイルの build/dev-server.js の 「webpack-dev-middleware」の設定に以下のように書けば動きました。
var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true, watchOptions: { aggregateTimeout: 300, poll: 1000 } })