Laravel Mix - a simple and powerful wrapper around Webpack

Laravel Mix

We will talk about Laravel Mix. To better understand it, we will start by explaining what Webpack is.

Webpack is an incredibly powerful module bundler that prepares your JavaScript and assets for the browser and therefore Mix is a thin layer on top of webpack which serves for dynamically constructing your Webpack configuration. Though Laravel mix was originally built for Laravel projects it of course may be used for any type of application.

Overview

The latest version of Laravel Mix is version 6 and requires dependencies that are compatible with Webpack 5 or PostCSS 8. It is a free tool that automatically optimises and minifies your assets when building for production with the npx mix --production command, which we will talk about later.

Laravel Mix also ships with basic typescript and View support, and to assist with long-term caching, mix provides the mix.version() method. With versioning enabled, a unique query string ID will be appended to your assets every time your code is compiled, and upon compilation, we will see the hashed names in the mix-manifest.json file. Another great benefit of the mix API is that we can isolate or extract vendor libraries into their own files, which will of course result in a significantly smaller app.js file. With hot module replacement, we can exchange, add, or remove modules while an application is running without a full reload, and all we should do is run from the command line npx mix watch --hot to boot up a node server and monitor our bundle for changes.

Mix provides the mix.css() command for basic CSS compilation and the iPostCSS plugin ecosystem as part of our compilation, and we also have options for Sass and Less compilation. By default, Mix will pipe all of our CSS through the popular Autoprefixer PostCSS plugin. As such, we are free to use the latest CSS 3 syntax with the understanding that any necessary browser-prefixes will be applied automatically. One key concept to understand is that Mix and Webpack will rewrite any URLs with relative paths within our stylesheets, but the absolute paths will always be excluded from URL rewriting.

Installation steps

Here we can see how to install and set up Laravel Mix.

First, we should install Mix either through npm or yarn.

npm install laravel-mix --save-dev

yarn add laravel-mix

The second step is to create a mix configuration file named webpack.mix.js

touch webpack.mix.js

Then we define our compilation there. In this example, we are setting our public path and using the mix sass compilation.

const mix = require('laravel-mix');
mix.setPublicPath(`dist`);
mix.sass(‘resources/scss/app.scss’, `dist/css`);
mix.js('resources/js/app.js', 'dist/js')
 

Finally, all we have to do is run an npx mix command to trigger the appropriate Webpack build.

Useful CLI commands

• Compiling in a Local Environment

  npm mix

• Watch Assets for Changes

  npx mix watch

• Polling

  npx mix watch--watch-options-poll

• Hot Module Replacement

  npx mix watch --hot

• Compiling for Production

  npx mix --production

• Customize the Mix Configuration Path

  npx mix --mix-config=build/webpack.mix.js –production

Useful features

• Mix provides some other useful features for example if we have vendor libraries that need to remain separate from our core webpack bundle we can use mix.combine() to merge or concatenate multiple files into a single file called for example merged.js.
• Another interesting feature is browsersync that will automatically monitor our files for changes and inject any changes into the browser all without requiring a manual refresh.
• In certain cases, it may prove easier to drop down a level and override the underlining webpack configuration directly and mix provides the mix.webpackConfig() command to allow us to do this.
• Now let's look at the event hooks. In some scenarios we may need to execute a piece of logic before the compilation begins. For example if we need to copy a directory or move a file the mix.before() function allows this, and Mix will not begin its compilation until all hooks have been fully resolved. On the other hand, we can execute a piece of logic after Webpack has completed its compilation with mix.after() method. For example if you want to log a list of all compiled assets.

For more information, you can visit the official documentation of Laravel Mix.