Laravel と Reactで Laravel Mixを使いapp.cssとapp.jsのバージョン管理を有効にする

LaravelとReactを使って、サービスを作ったはいいが、いざリリースして、フロント周りの調整をかけても、なかなかクライアントサイドで変更が有効にされないケースが多かった。

これは当たり前の話で、Laravel内から コンパイル済みのapp.cssとapp.jsをくださいとロジックを書いているからである。

これ、バージョンを上げるごとに手動で、ファイル名を変更したり、パラメーターを追加して、強制的に再読込させる方法もないではないが、スマートではない。

そこでどうするか。

プロジェクトのルートにある Laravel Mixのファイルに以下を追記（末尾3行）

webpack.mix.jsを編集

webpack.mix.js

[bash]
mix.react(‘resources/assets/js/app.js’, ‘public/js’)
.sass(‘resources/assets/sass/app.scss’, ‘public/css’)
.sourceMaps();

+ if (mix.inProduction()) {
+ mix.version();
+ }

[/bash]

ルートになるbladeファイル編集

Reactのルートとなるbladeファイルを調整する。
app.cssの行と、app.jsの行を以下のようにする。

[bash]
–

+

–

+

[/bash]

動作検証

リリース作業をしてみて、Chromeで読み込んでみて、app.jsが以下のようになっていれば、成功！