Combine assets with Laravel Mix

What's Laravel Mix?

Laravel Mix is a simple API built around Webpack to facilitate compiling of assets using several CSS and JS pre-processors.

By default, your Laravel project's webpack.mix.js contains the following code.

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

What if you want to chain your included files along with that?

Well there's a simple solution to this using mix.combine method.

For CSS files

mix.combine([
    'resources/assets/css/styles.min.js',
    'resources/assets/css/main.min.js',
    'resources/assets/css/responsive.min.js',
], 'public/css/app.js');

For JS files

mix.combine([
    'resources/assets/js/libs/jquery-3.2.1.min.js',
    'resources/assets/js/libs/sweet_alert.min.js',
    'resources/assets/js/libs/main.js',
    'resources/assets/js/libs/functions.js'
], 'public/js/all.js');

Well that's it. Give it a try and see if that works out for you.

If you have any queries regarding this blog, leave us a comment below. You can also follow us on Twitter.