カクカクしかじか

技術的なアレコレ

Railsアプリでwebpackerを使う場合はbin/webpack-dev-serverコマンド実行しておかないと生産性落ちるぞ!

概要

webpacker使ってると毎回Vue.jsを使っている画面に遷移するたびに [Webpacker] Compiling… というようなメッセージがコンソールに出て読み込みが遅いから何とかならんかな...って思っていました。
しかし!あるコマンドを実行することでホットリロードすることが出来ることが分かったのでそのメモです...(今更感w)

前提

webpackerのバージョン:3.2.2

webpackerで使えるコマンドのおさらい

  • bin/webpack
  • bin/webpack-dev-server

webpackerには上記2つのbinstubがデフォルトで付属されているようです。
自分もよく分かっていなかったのですが、binstubは実行可能ファイルのラッパースクリプトのことらしいです。

techracho.bpsinc.jp

つまり、上記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自体の理解を深めようかと思った次第です。以下の記事も追加で読むと参考になりそうな雰囲気が。

qiita.com