注意
タイトルにもある通り、ここに書いてあるのは暫定的な対処。もっと適切な対処法があるハズ。
「とりあえず手っ取り早くrecompileさせたい」人向け。
環境
VirtualBox: 5.2.12
Vagrant: 2.1.1
CentOS: 7.5.1804
Ruby: 2.5.1
Rails: 5.2.0
Webpacker: 4.0.0-pre.2(webpack: 3.12.0)
webpack-dev-server: 2.11.2
vagrantについて: typeをNFSで設定した共有ディレクトリ内にRailsアプリケーション配置。ホスト側からRubyMineでいじる
起こったこと
Vagrant内に構築したRailsアプリケーション。最近の流れに乗っかってWebpacker × Vue.jsでフロントエンド開発しようとしてたのだが、どうも動きがおかしい。
というのも、webpack-dev-serverがJSファイルをcompileしてくれないのだ。
や、サーバー立ち上げた時はコンパイルしてくれるのだが、ファイルに変更があったときにrecompileしてくれない。どうも困った。
ググる->対処法見つけるまで
公式見てみる
Webpacker公式(Github)によると、webpack-dev-serverのconfigはこ↑こ↓に準拠しているとのこと。普通ならwebpack.config.jsにオプションやらなんやらを書くのだが、Webpackerの場合はこの内容をconfig/webpacker.ymlに書く。…で、何を書いたらいいんだべ？
アタリつける
だいたいのアタリをつけることにする。
立ち上げた時は一度コンパイル成功しているわけだから、パス設定がおかしいわけじゃなさそう。同じ理由でポート設定も多分大丈夫。
とすると、そもそも監視してない…？いや、このページによれば、webpack-dev-serverではデフォルトでファイル監視することになっている(当たり前だ)。んにゃぴ、おじさんよく分かんないです…。
それっぽいの見つけた
とか言いながら「webpack dev server not compile」とか「webpacker watch files」とかでググりまくってたら、こんなん見つけた。
https://www.javascriptstuff.com/webpack-watch-in-vagrant-docker/
ほう。VagrantでNFS使ってると、webpack-dev-serverにファイル変更したことが伝わらない…？公式の方を見ると、なんかpollingとかいうオプション使うといいとのこと。ちなみにみんな大好きWikipedia先生によると、pollingの定義は以下らしい。
ポーリング（polling）とは、通信やソフトウェアにおいて、競合を回避したり、送受信の準備状況を判断したり、処理を同期したりするために、複数の機器やプログラムに対して順番に定期的に問い合わせを行い、一定の条件を満たした場合に送受信や処理を行う通信及び処理方式のことである。
YOU THE ROCK☆に置き換えて説明すると(ホモはすぐに脱線する)
YTR☆による問い合わせ「のぶえいこう見てるか〜？」
YTR☆による問い合わせ「タカノさーん!タカノさーーん!!」
YTR☆による問い合わせ「近藤大輔ー!近藤大輔見てるかー!?」
YTR☆による問い合わせ「中居さんありがとう！」
条件を満たしたYTR☆「フラーッシュ！！」
的な感じである(的な感じではない)
話をもとに戻そう。pollingのオプション説明の下にこんな事が書いてあった。
If watching does not work for you, try out this option. Watching does not work with NFS and machines in VirtualBox.
はえ＾〜、やっぱダメみたいっすね(素)黙ってオプション設定するがよろし。
とりあえずやったこと
development: dev_server: watch_options:poll: 500
config/webpacker.ymlにさっきのpollingオプションを設定すればcompile対象のファイルが変更されてるかどうかをdev-server側で定期的に見てくれるようになる。値はtrueか数値(ミリセカンド指定)突っ込めばOK。
設定変えてwebpack-dev-server再起動したら、無事にrecompileしてくれるようになった。長かったぜよ…めでたしめでたし。
1点だけ。
trueのときはかなり頻繁に見てるっぽいけど、デフォ値(true指定した時の値)が幾つになるのかが分からんかった。webpackのリポジトリ内を検索してもここしかpolling関連の数値定義してそうなとこないんだよなぁ…。ミリセカンド指定だとデフォルトは10分の計算だけど、そんなことある？(疑問)
まとめ
とりあえず、Vagrant使っててwebpack-dev-serverがなんかrecompileしてくれねぇよなぁ！？(憤怒)ってなったらpollingオプション設定してみると幸せになれるかも。
もっといい解決方法知ってる人はコメントで教えてクレメンス(懇願)
ぼやき
NFS指定しておくと速いからとりあえず指定しておけおじさんの影響を受けて、ワシもよく訳わからんまま「NFSはいいぞ」を連呼しそうになってたけど、弊害は出てくるもんすねぇ…。UNIX/Linux系のおべんつよもちゃんとしていこうね(真顔)