Using Laravel Mix for Asset Compilation

Laravel Mix provides a clean, fluent API for defining webpack build steps, so compiling CSS and JavaScript doesn't require hand-writing complex webpack configuration.

Basic Setup

A typical webpack.mix.js file lives at the project root and defines what should be compiled.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Running the Build

npm run dev
npm run watch
npm run production

watch rebuilds automatically as files change during development; production minifies and optimizes output for deployment.

Versioning Assets

mix.js('resources/js/app.js', 'public/js')
   .version();

<script src="{{ mix('js/app.js') }}"></script>

version() appends a hash to filenames so browsers reliably fetch updated assets after a deploy, rather than serving a stale cached copy.

Note: newer Laravel versions default to Vite instead of Mix, though Mix remains supported for existing projects. With assets compiled, the next topic looks at pushing real-time updates from the server to the browser.