Laravelで「npm run dev」してもCSS＆JSが反映されない？それはブラウザのキャッシュが原因かも！

「npm run dev」してもCSSとJSファイルが反映されない…

Laravel 8で「Laravel Mix」を使用してアプリ開発の練習をしていた際に、npm run devコマンドを打った後、ブラウザで確認してもCSSとJSファイルが反映されなかったことがあったので、その解決メモ。

最初に答えを言ってしまうと、バージョン付け をすることで、ブラウザのキャッシュ対策をすれば解決できました。

Laravel 8をインストールした直後では、webpack.mix.jsは以下のような感じだと思います。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        // 略
    ]);

これを以下のように .version() を付けくわえてください。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        // 略
    ])
+   .version();

この様に.version()を付けた後に、npm run devを実行します。

この 「webpack.mix.js に .version() を付けて、コマンドで npm run devを実行する」 というのは、以前のキャッシュファイルが読み込まれないようにするために、コンパイルされたCSSファイル及びJSファイル名に一意のハッシュを付け加えていることを意味します。

public/mix-manifest.jsonを見てみてください。

public/mix-manifest.json

{
    "/js/app.js": "/js/app.js?id=********************",
    "/css/app.css": "/css/app.css?id=********************"
}

*** のところはハッシュの文字列になっていると思います。
これで、一意なハッシュを加えたファイル名として読み込めば、以前のキャッシュされたファイルを読み込むことを防げるというわけです。

あとは、resources/views フォルダ内のレイアウトファイル等に書かれている asset 関数の部分を mix関数に変更することで、再程、npm run dev を実行して生成された 最新のバージョン付けされたファイル を自動的に読み込むことができます。

  <!-- Styles -->
- <link rel="stylesheet" href="{{ asset('css/app.css') }}">
+ <link rel="stylesheet" href="{{ mix('css/app.css') }}">

  <!-- Scripts -->
- <script src="{{ asset('js/app.js') }}" defer></script>
+ <script src="{{ mix('js/app.js') }}" defer></script>

もし、npm run devしてもCSSが反映されない…となったときは、ぜひ.version()のことを思い出してください。

参考URL https://readouble.com/laravel/8.x/ja/mix.html