webpack.mix.js example

Commands

npm run dev
npm run watch

Example

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.
 |
 */

//Run npm watch

mix.sass('resources/sass/admin_custom.scss', 'public/assets/admin/css');


mix.sass('resources/postcss/style.scss', 'public/assets/front/css').options({
    postCss: [
        require('precss')(),
        require('postcss-color-function')(),
        require('postcss-color-alpha')(),
        require('lost')()
    ],
    processCssUrls: false
});

mix.scripts([
    'resources/js/libs/jquery-2.1.4.min/*.js',
    'resources/js/libs/blazy.min/*.js',
    'resources/js/libs/mustache.min/*.js',
    'resources/js/libs/packery.pkgd.min/*.js',
    'resources/js/libs/imagesloaded.pkgd.min/*.js',
    'resources/js/libs/slick.min/*.js',
    'resources/js/libs/sly.min/*.js',
    'resources/js/plugins/*.js'
], 'resources/js/plugins.concat.js');

mix.scripts([
    'resources/js/plugins.concat.js',
    'resources/js/order/init.js',
    'resources/js/order/matchmedia.js',
    'resources/js/global/*',
    'resources/js/main/*',
], 'public/assets/front/js/all.js');

mix.copyDirectory('resources/images/', 'public/assets/front/images/');
mix.copyDirectory('resources/fonts/', 'public/assets/front/fonts/');