Version Images with Laravel Mix

This article has been published a while ago.

If this is a technical article some information might be out of date. If something is terribly broken, let me know and I will update the article accordingly.

Here's a quick tip and in my view underrated feature of Laravel Mix: Versioning. With .version() mix appends a unique hash to your scripts, styles and other files in mix-manifest.json and uses that hash when using the mix()-helper in your blade-templates.

We use this in combination with .copy to ensure that all users see the most recent favicon of our application (and not an old cached version). In our webpack.mix.js we have the following configuration:

mix.copy('resources/assets/img/icons/favicon.ico', 'public/favicon.ico');

// Rest of your Larvel Mix Configuration

mix.version();

Sidenote: Our team decided that the public-folder should only be changed by our build process. Never should a human add or remove a file from the public folder. That's why we copy some files from resources to public

In our blade-template we load the favicon with the mix-helper:

<link rel="icon" type="image/x-icon" href="{{ mix('favicon.ico') }}" />

This will create the following output:

<link rel="icon" type="image/x-icon" href="/favicon.ico?id=981a7b54dbafb2f4f131" />

The next time we would update our favicon, we just have to run yarn run prod and Laravel Mix will copy the new Favicon from resources to public, update the hash in mix-manifest.json and all users will immediately see the new icon.