Laravel Mix

One of the downsides of Webpack is that configuring it is arduous. To make thing easier, Laravel includes a module called Mix that takes the most commonly-used Webpack options and puts them behind a simple API.

The Mix configuration file can be found in the root of the project directory. Mix configuration involves chaining methods to the mix object that declare the basic build steps of your app. For example, the js method takes two arguments, the entry file and the output directory, and the Babel loader is applied by default. The sass method works in an equivalent way.

webpack.mix.js:

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