A FIELD GUIDE TO LARAVEL · VOLUME II · THE ECOSYSTEM
ENTRY II.14 · ASSET BUNDLING
Mix
Package · first recorded 24 January 2017, with Laravel 5.4; on npm since 26 December 2016
A fluent wrapper that writes a webpack configuration from a short webpack.mix.js. Superseded: Laravel now ships Vite and laravel-vite-plugin, and its docs list Mix as a legacy package no longer actively maintained.
Specification
Kind npm package, build-time only. Superseded by Vite
Engine webpack 5, with PostCSS 8 and Vue Loader 16 from Mix 6
Runs on Node, at build time; the browser gets static files
Installed by npm install laravel-mix --save-dev · webpack.mix.js
Voice none. npx mix · mix watch · mix --production
Scales by One config per app; mix.extract() splits vendor code for caching
Range Cloud: yes, as an npm build step in the deploy
Forge, VPS: yes. npm run production in the deploy script
Vapor: yes, as a build step before the deploy
Neighbours
Vite replaced Mix in new Laravel installations: laravel-vite-plugin, a dev server with hot module replacement, and @vite in place of mix(). Elixir, on Gulp, came before Mix. The docs list Mix as a legacy package and link a migration guide to Vite; its role has passed on.
Elixir II.6
Field marks
webpack.mix.js
mix-manifest.json in public/
mix('js/app.js') in Blade
laravel-mix in package.json
Fig. II.14.1 · one asset build, exploded
Parts
1 webpack.mix.js. mix.js('resources/js/app.js', 'public/js').sass(...). The whole build in a few chained calls.
2 Mix. A thin layer that turns those calls into a webpack config, aimed at the common 80 percent of builds.
3 webpack, the bundler underneath, its loaders and plugins chosen for you. Mix 6 brought webpack 5 support.
4 Output. Compiled files in public/js and public/css, with mix.extract() splitting vendor code for caching.
5 Manifest. mix-manifest.json maps each file to its URL; mix.version() adds a hash to each so old caches miss.
6 Blade. mix('js/app.js') reads the manifest and prints the hashed path. Vite's @vite does this job now.
Hidden joinery
Versioned URLs carry the hash as a query string (app.js?id=...), so the file name stays put and only the cache key moves. Mix 6 swapped the npm scripts for a mix CLI: mix, mix watch, mix --production. Vue and React support became opt-in with .vue() and .react(). The watcher ignores node_modules unless mix.override says so.
Every line checked on 2026-10-08 against the 13.x docs, the laravel-mix source and docs, and npm.
TITLE
Mix · one asset build
SOURCES
laravel.com/docs/13.x/mix · laravel.com/docs/13.x/vite · laravel-mix.com/docs/6.0/what-is-mix · github.com/laravel-mix/laravel-mix · registry.npmjs.org/laravel-mix · github.com/laravel/laravel/blob/v5.4.0/webpack.mix.js · github.com/laravel/laravel/blob/v5.3.0/gulpfile.js · cloud.laravel.com/docs/deployments · docs.vapor.build/projects/deployments
STATUS
Verified · 2026-10-08
SHEET
II.14 of 48
REV
A · 2026-10-08
DRAWN
BS
FINISH
All faces, including the back