Aug
3
2018

Laravel Mix is an abstraction on top of Webpack and aims to make Webpack super simple in 80% of use cases. It uses a simple syntax to compile SASS to CSS, minify JavaScript, compile from ES2016 to older JavaScript syntax, compile TypeScript and bundle files.

Installation:-

Laravel 5.4 comes with pre-installation with webpack but you must have nodejs and npm install on your machine.

Standalone:-

From the root of your application, run following commands.

->npm run -y
->npm install laravel-mix --save-dev
->cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

Running Mix:-

To run all mix task :- npm run dev

To run all mix task and minify output :- npm run production

Compiling Stylesheet:-

Less :- less() method use to compile less in css.
open webpack.mix.js
write mix.less(‘Original file path’,’compile file path’);

Example :- mix.less('resources/assets/less/app.less', 'public/css');

Plain Css:-

If you want to concat some plain css into single file you can use :- style() method.
mix.style([
  'path of file 1’,
  'path of file 2’,
  'n num of file’
],'path of concat css file’ );

Example :-
mix.styles([
  'public/css/vendor/normalize.css',
  'public/css/vendor/videojs.css'
],'public/css/all.css');

Working with javascript:-

Mix provides several features to help you work with your JavaScript files, such as compiling ECMAScript 2015, module bundling, minification, and concatenating plain JavaScript files.

Example :- mix.js('resources/assets/js/app.js', 'public/js');

Vanilla js:-

Similar to combining stylesheet using mix.style() you can combine javascript using mix.script() method.

Example :-
mix.scripts([
  'public/js/admin.js',
  'public/js/dashboard.js'
], 'public/js/all.js');

Autoloading:-

Webpack offers the necessary facilities to make a module available as a variable in every other module required by webpack. If you’re working with a particular plugin or library that depends upon a global variable, such as jQuery, mix.autoload() may prove useful to you.

Consider the following example:
mix.autoload({
         jquery: ['$', 'window.jQuery']
});

This snippet specifies that webpack should prepend var $ = require('jquery') to every location that it encounters either the global $ identifier, or window.jQuery. Nifty!

Event Hooks:-

It’s possible that you may need to listen for each time webpack has finished compiling. Perhaps you want to manually apply some bit of logic that is appropriate for your application. If so, you may use the mix.then() method to register any callback function.

Here’s an example:
mix.js('resources/assets/js/app.js', 'public/js').then(() => {
    console.log('web pack has finished building!');
});

Hot Module Replacement :-

Hot Module Replacement (or Hot Reloading) allows you to, not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser. As an example, consider a simple counter component. When you press a button, the count goes up. Imagine that you click this button a number of times, and then update the component file. Once you do, the webpage will refresh to reflect your change, but the count will remain the same. It won’t reset. This is the beauty of hot reloading!

Versioning :-

To assist with long-term caching, Laravel Mix provides the mix.version() method, which enables file hashing such as app.js?id=8e5c48eadbfdd5458ec6. This is useful for cache-busting. Imagine that your server automatically caches scripts for a year, to improve performance. With versioning enabled, each time your code changes, a new hashed query string file will be generated. Consider the following webpack.mix.js file.

Example :-
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.sass', 'public/css').version();

Above code generate different hash named file each time so you must use global mix() method in your views.

Example :-