examples.md

Examples

Compile Modern JavaScript

mix.js('src/app.js', 'js');

Compile Sass

mix.sass('src/app.scss', 'css');

Compile JavaScript and Sass

mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css');

Compile JavaScript and Set the Output Base Directory

mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css')
   .setPublicPath('dist');

Compile CSS With PostCSS Plugins

mix.postCss('src/app.css', 'dist', [
    require('postcss-custom-properties')
]);

Compile JavaScript With File Versioning

mix.js('src/app.js', 'js')
   .version();

Once compiled, the hash can be retrieved from your mix-manifest.json file.

Compile JavaScript With Support for Vue Single File Components

mix.js('src/app.js', 'js')
   .vue();

Compile JavaScript and Set an Explicit Vue Version

mix.js('src/app.js', 'js')
   .vue({ version: 3 });

Extract Vue Single File Component CSS to its Own File

mix.js('src/app.js', 'js')
   .vue({ extractStyles: true });

Extract Vue Single File Component CSS to a named File

mix.js('src/app.js', 'js')
   .vue({ extractStyles: 'css/vue-styles.css' });

Compile JavaScript With Support for React

mix.js('src/app.js', 'js')
   .react();

Compile JavaScript and Extract Lodash to its Own File

mix.js('src/app.js', 'js')
   .extract(['lodash']);

Compile JavaScript and Extract All Vendor Dependencies

mix.js('src/app.js', 'js')
   .extract();

Enable Source Maps

mix.js('src/app.js', 'js')
   .sourceMaps();

Make jQuery Available to Every Module

mix.js('src/app.js', 'js')
   .autoload({
       jquery: ['$', 'window.jQuery']
    });

Trigger Browsersync Page Refreshes When in Watch Mode

mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css')
   .browserSync('http://your-app.test');

Then run npx mix watch.

Load an Environment File Key

// .env
MIX_SOME_KEY=yourpublickey

Only keys in your .env file that begin with "MIX_" will be loaded.

// webpack.mix.js
mix.js('src/app.js', 'js')

// src/app.js
console.log(
    process.env.MIX_SOME_KEY
); // yourpublickey