Laravel(6.x) assetファイルにタイムスタンプを使わずmix versionを使う
jsやcss、画像など静的リソース(assetファイル)を扱うとき、ブラウザに保存
されたキャッシュが有効になり、予期した動作にならない場合があります
そういったときに、URLの末尾にタイムスタンプやバージョン情報などを
付与するケースがあります
以下のようにクエリパラメータをつけて別ファイルを取得させているのではないでしょうか
<script type="text/javascript" src="hoge.js?ver=10"></script>
<script type="text/javascript" src="fuga.js?20200101000000"></script>
Laravelではこういったケースに、自動でハッシュ値が付与される仕組みが
用意されています
バージョニング / キャッシュ対策
Laravelのデフォルトプロジェクトを作成し、
auth機能をつけたデフォルト画面で説明します
設定なし
webpack.mix.js
webpack.mix.jsはデフォルトで以下のようになっています
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources/views/layouts/app.blade.php
ビューのbladeは以下の記載がデフォルトです
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
〜割愛〜
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
ブラウザ確認
ブラウザで実際にどう呼ばれているのか確認してみます

何も設定していないのでHTMLのscript、linkのURLになにもクエリについていません
version設定
では今度はLaravelの機能をつかってキャッシュが効かないように設定します
webpack.mix.js
最後にversion()を呼び出すようにします
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
resources/views/layouts/app.blade.php
ビューの記載方法を以下のように、asset → mix に変更します
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
〜割愛〜
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
ビルド実行
書き換えただけでは使えないため、ビルド実行します
npm run dev
または
npm run watch
ブラウザ確認
再度ブラウザで実際にどう呼ばれているのか確認してみます

script、linkのそれぞれリンクの最後に id=ハッシュ値のクエリパラメータが付与されました
コンソールにでていたアクセスログは以下です
$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
[Mon Oct 19 22:08:35 2020] 127.0.0.1:55548 [200]: /js/app.js?id=40c0ea55fd0df7e736e8
[Mon Oct 19 22:08:36 2020] 127.0.0.1:55546 [200]: /css/app.css?id=285bc4b1273162aedfc2
ビルドを再実行すれば、クエリパラメータに新たなハッシュ値が付与されます
まとめ
以上、静的リソースでブラウザキャッシュを効かせない方法として
webpack.mix.jsでのversion()を使った方法の紹介でした