担当しているRailsプロジェクトのフロントエンド環境をSprocketsからWebpackerに移行しようとしていて、ここ最近辛い毎日です。
とりあえず、scssの移行は終わったので、今はCoffeeScriptのコードをできるだけそのままでWebpackerに乗っけようとしているのですが、エントリーポイントのファイルを修正しても全然再コンパイルが走らなくて毎回webpack-dev-serverを再起動するというめちゃくちゃ辛いことをしていました。時間かかりすぎる…。
いい加減、原因を探ろうと調査しだしたのですが、私の開発環境は全てDockerに移行しています。
webpack-dev-severもDockerで起動するようにしてあったのでRailsのコンテナとwebpack-dev-serverのコンテナがうまく連携できてないのが原因なのかなと思い、ググった記事を参考にコンテナを作り直したりとか、色々していました。 ローカル環境でwebpack-dev-serverを起動したら、ファイル変更の検知が効いたのに、Dockerコンテナ経由だと効かなかったので、ファイルの変更の検知をポーリングできないものか…と思ったらwebpackにそういう設定ありました。
じゃあそれをwebpackerでどうやって設定すればいいか？というところですが、config/webpacker.ymlで設定できます。
webpacker.ymlのwatch_optionsにpollを追加します！pollはミリ秒を設定するので1秒毎にポーリングするよう、1000を設定してみました。
development: # 略 dev_server: # 略 watch_options: ignored: '**/node_modules/**' aggregate_timeout: 200 poll: 1000
これで、変更があった分のファイルのみ再コンパイルが実行されるようになりました。速い！！🚀
まだ全然Sprocketsからの移行は終わってないのですが、やる気がみなぎってきました。
