Laravel-Mix で HMR を利用する

Laravel 5.4 から採用されたフロントスクリプトのビルドツール、 Laravel Mix では、Webpack の HMR (Hot Module Replacement) がデフォルトで利用できます。

(HMRは)画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。
Hot Module Replacementの設定と仕組みを理解する – Qiita

Laravel でこれを利用すると、たとえば Vue コンポーネントの変更がリロード無しに反映できます。

Install

Laravel 5.4 の新規プロジェクトを作成した場合、Mix やその HMR は npm install を行えばデフォルトで利用できます。

※ もし cross-env あたりの参照でエラーが発生した場合、package.json を最新のものにあわせる(とくにscriptsを)ことで解決する場合があります。(mixや依存関係に破壊的変更があったため)

Laravel 5.3 以前からアップグレードした場合の導入手順は下記エントリーが参考になります。

Laravel 5.3から5.4アップグレード:Laravel Mix編 | hypermkt blog

HMR を利用した場合 mix でコンパイルしたアセットについては、 HMR 利用中は Laravel をホストしているサーバー(built-in serverやApache HTTPD, Nginx など) ではなく Webpack dev seerver からサーブされます。このため以下のような制約が生じます。

  • 当該スクリプトの読み込みをasset()からmix()に変える必要がある
  • mix() では HMR アセットは決め打ちで http://localhost:8080/ 以下からサーブされるため
    • 他で 8080 番ポートを使用していない必要がある
    • 開発環境が https だと利用できない
    • ネットワークの他の端末を繋いで使えない

※ 一時的に HTTP にするなりポートフォワーディングするなりで対処する手もあります。

Webpack dev server の起動

npm install をして npm run hot を実行すると、Webpack dev server が起動します。http://localhost:8080で起動していることを確認してください。(上記の通り決め打ちで見に行くのでそれ以外で起動してしまっているとアセットが読み込めません)

また、レイアウト内等のスクリプトの読み込み先が mix() で指定されていることを確認してください。

ブラウザで当該プロジェクトを開くとコンソールに WDS や HMR 関連のログが表示されているはずです。

例えばこの状態でVewコンポーネントを編集すると保存時にビルドが走り、当該コンポーネントのみが置換されます。それ以外のJS(たとえばapp.js)のようなfileを編集すると HMR で置換できないため、ページ自体がリロードされるものもあります。

まっしろ

この状態で HMR を止めてしまうとアセットが参照できずにフロントが死ぬので、npm run devなど、ほかのビルドコマンドを走らせましょう。アセットの参照先が戻ります。

HMR の様子を軽く動画にしました。ご覧ください。

動画ではテンプレート内を編集していますが、ほかにコンポーネントのJSやスタイルとかだってもちろん HMR で即座に読み込まれます。

HMR を使用すればコンポーネントを微調整する度にいちいちリロードをし直す必要はありません。Mix で Vue を使用する場合は是非使用してください。文法エラーにも気付きやすいし。


[追記] Q&A

Q. Laravel Mix 0.8.8+ で HMR がうまく動きません

エラー例:

(引用元:HMR Failed to execute ‘open’ on WIndwos 10 – Mix 0.8.8 #507)

A. デフォルトオプションで指定されている output.publicPath の末尾スラッシュが本来必要なのが不足しているため。PR #624 で修正できてるはずなのでマージされてほしい。

マージされるまでの間はオプションを付けたして凌げる。

Q. 構文・コンパイルエラーをブラウザ上に表示したい

A. これもオプションで可能。

Webpack dev server のオーバーレイを表示できる。

“Laravel-Mix で HMR を利用する” への1件の返信

コメントを残す