Yossi Abramov
A Short Guide To Laravel Mix

A Short Guide To Laravel Mix

Published: 7/3/20204 min read
Laravel
webpack
JS
SCSS

Laravel Mix is a powerful Webpack wrapper that allows you to manage your app's styles and scripts. You can use Laravel Mix in your Laravel project as well as setting it up in other environments. I've also been using Laravel Mix in Wordpress projects (and it's great!) . The Laravel Mix API is very easy and intuitive and will save you a lot of Webpack configuration time.
👉 Before getting started with Laravel Mix make sure you have npm installed.

Laravel and Laravel Mix

To get started with Laravel Mix in your Laravel project simply run npm install to get all your project's node_modules installed. Then, a good starting point will be the webpack.mix.js file in your Laravel project root folder. It should look like this:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

As you can see, we can chain methods to our mix const. Let's check some basic use cases for mixing our assets.

CSS Pre-processors

You can write Sass, Less, Stylus and PostCss without a hassle. Here is an example with Scss. First, lets set the needed method in our webpack.mix.js:

const mix = require("laravel-mix");
mix.sass("resources/sass/app.scss", "public/css");

Now we can run npm run watch and Laravel Mix will listen for changes in resources/sass/app.scss and will compile them to public/css/app.scss. For the moment, the compiled result is not minified or production ready. In order to make it production ready, simply run npm run prod. If you do not work with a CSS Preprocessor and only want to concatenate and minify your css files there is a Laravel Mix way of doing it.
For all Laravel Mix CSS, and CSS Pre-processors options see:
👉 https://laravel-mix.com/docs/5.0/css-preprocessors
👉 https://laravel.com/docs/7.x/mix#working-with-stylesheets

JS

Working with JS files is similar to the above example - you have a source file/s and a compiled target file. However, you have more Laravel Mix JS methods and different ways of setting up and configuring them. Let's see some basic examples and explore our Laravel Mix JS methods.
The most basic Laravel Mix JS method is mix.js(src | [src], output) this innocent looking method gives you, among others, these features:

  • ES2017 + modules compilation
  • Build and compile .vue components (via vue-loader)
  • Hot module replacement

This means you can write modern JS and it will be compiled, minifed and concatenated (if you are using multiple sources for your target file) elegantly after running npm run prod.
Here is an example of using mix.js():

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

// 1. A single source file
mix.js(
  "resources/js/app.js",
  "public/js",
);

// 2. An array of source files
mix.js(
  ["resources/js/bootstrap.js", "resources/js/app.js"],
  "public/js/app.js",
);

There are many more useful Laravel Mix js methods like mix.ts() for TypeScript support and much more! For more Laravel Mix js options see:
👉 https://laravel-mix.com/docs/5.0/mixjs
👉 https://laravel.com/docs/7.x/mix#working-with-scripts

Hot Reloading With BrowserSync

Running BrowserSync with Laravel Mix allows you to hot reload your scripts, styles and blade files! This makes developing extremely fast! Using BrowserSync with Laravel Mix is very straight forward:

const mix = require("laravel-mix");
mix.browserSync("http://127.0.0.1:8000");

Simply run npm run watch after setting up the browserSync method and make something great!

Including Assets and Versioning

Laravel Mix makes asset versioning very easy. Instead of manually adding some-kind of hash to your assets, you can include assets with the mix() method in your blade file:

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

After running npm run prod, the resulting compiled href will look something like this:

<link rel="stylesheet" href="/css/app.css?id=58852bd94d48b8bf5cb6">

Now, this is amazing for cache busting ✊
In order to enable versioning, add this line to your webpack.mix.js:

const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js");
mix.sass("resources/sass/app.scss", "public/css");
mix.browserSync("http://127.0.0.1:8000");
mix.version();

In order to use this last code snippet, make sure to run php artisan serve and then npm run watch.
Here is a list of all available Mix methods:
👉 https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.mix.js
I hope this short guide helps you and May The Mix Be With You ✊