Laravel mix - how to use file versioning

When you make some changes in your JS files, this new file version should be used instead of old one which is usually cached. Simple solution for this is to prefix file name with random string. 

Laravel mix can do this out of the box.

To implement file versioning for your JavaScript files go to webpack.mix.js and add .version() method:

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

notice that in our example we are using TypeScript compiler which we implemented in this post:

To use this version file name in your master.blade.php you have to change how you are loading JavaScript file, instead of plain file path we will use Laravel mix for that:

                    <script src="{{ mix('/js/app.js') }}"></script>
// css
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
                  

And now if you  run: npm run watch again, take a look in your page source you will see that JS src url have attached id param with random string.

                    <script src="/js/app.js?id=abe15337faa10c034c0e"></script>