Though Laravel Mix was originally built for Laravel projects, it of course may be used for any type of application.

Stand-Alone Projects

Step 1. Install Mix

Begin by installing Laravel Mix through NPM or Yarn.

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev

Step 2. Create a Mix Configuration File

Next, create a Mix configuration file within the root of your new project.

touch webpack.mix.js

You should now have the following directory structure:

  • node_modules/
  • package.json
  • webpack.mix.js

webpack.mix.js is your configuration layer on top of webpack. Most of your time will be spent here.

Step 3. Define Your Compilation

Open webpack.mix.js and add the following code:

// webpack.mix.js

let mix = require('laravel-mix');

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

At its core, Mix is an opinionated, fluent API on top of webpack. In the example above, we've instructed Mix to compile src/app.js and save it to the dist/ directory. If you're working along, create src/app.js now, and populate it with a simple alert:

// src/app.js
alert('hello world');

Of course this is only a placeholder for your actual JavaScript code.

Step 4. Compile

We're now ready to bundle up our assets. Mix provides a command-line program called mix which triggers the appropriate webpack build. Give it a run now.

npx mix

Congrats! You've created your first bundle. Create an HTML file, load your script, and you'll see an alert when the page loads.

Laravel Projects

Laravel ships with everything you need to get started. Simply:

  • Install Laravel (laravel new app)
  • Run npm install
  • Visit your webpack.mix.js file, and get started!