概要
webpacker使ってると毎回Vue.jsを使っている画面に遷移するたびに [Webpacker] Compiling…
というようなメッセージがコンソールに出て読み込みが遅いから何とかならんかな...って思っていました。
しかし!あるコマンドを実行することでホットリロードすることが出来ることが分かったのでそのメモです...(今更感w)
前提
webpackerのバージョン:3.2.2
webpackerで使えるコマンドのおさらい
- bin/webpack
- bin/webpack-dev-server
webpackerには上記2つのbinstubがデフォルトで付属されているようです。
自分もよく分かっていなかったのですが、binstubは実行可能ファイルのラッパースクリプトのことらしいです。
つまり、上記2つのコマンドはRails側からwebpackでのビルドを行えるコマンドという理解でよさそうです。
bin/webpackコマンド
- ローカルでJSファイルのビルドを行うコマンド
$ bin/webpack Hash: 600ce3604f4c02ea7aaf Version: webpack 3.11.0 Time: 9582ms
bin/webpack-dev-server
- このコマンドを実行した状態で一緒に
rails s
してサーバーを動かすとJS側の変更をホットリロードしてくれるので、いちいちゼロからビルドし直さずに済んで開発がいくらか快適に!
$ bin/webpack-dev-server 10% building modules 5/5 modules 0 active Project is running at http://localhost:3035/ webpack output is served from /packs/ Content not from webpack is served from /Users/fuqda/アプリ名/public/packs <中略> webpack: Compiled successfully.
最後に
いちいちコンパイルが走らなくなり前よりは快適なのですが、結構落とし穴がありそうな空気を察知しました...
これを機にwebpacker自体の理解を深めようかと思った次第です。以下の記事も追加で読むと参考になりそうな雰囲気が。