Introduction to Laravel Mix

Laravel Mix is an elegant wrapper around Webpack for the Laravel framework. It simplifies many build steps involved in modern web development and allows you to get up and running with minimal configuration.

Getting Started

To install Laravel Mix, you need to have Node.js and NPM installed on your computer. Then, you can install Laravel Mix with:

 npm install laravel-mix --save-dev

Basic Usage

Laravel Mix configuration is defined in the webpack.mix.js file at the root of your project. Here’s a basic example:

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

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

Compiling JavaScript and CSS

You can easily compile JavaScript and Sass or Less files, and even extract vendor libraries into separate files:

 
mix.js('resources/js/app.js', 'public/js')
   .extract(['vue']);

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

Versioning and Cache Busting

Laravel Mix can handle file versioning, which means appending a unique hash to filenames to solve browser cache issues:

 mix.version();

Minifying Files

To minify your CSS and JavaScript files for production:

 mix.minify('public/css/app.css').minify('public/js/app.js');

Compiling Vue Components

If you are using Vue, you can enable Vue support easily:

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

Browser Sync

Laravel Mix allows you to use BrowserSync for live-reloading while you develop:

 
mix.browserSync('your-local-domain.test');
 

Specific Example

Here’s an application example combining multiple Laravel Mix APIs:

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

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .sass('resources/sass/app.scss', 'public/css')
   .browserSync('your-local-domain.test')
   .version()
   .minify('public/js/app.js')
   .minify('public/css/app.css');
 

By following this approach, you can streamline your asset compilation process and easily manage front-end dependencies in a Laravel project.

Hash: cb5feca3d158f332127ec1669557238c5fd3954c550b415e5596a47ec462caa9