webpack.mix.js example

Commands

npm run dev npm run watch

1 2	npm run dev npm run watch

Example

JavaScript

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/');

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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/');