Though Laravel Mix was originally built for Laravel projects, it of course may be used for any type of application.
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.
You should now have the following directory structure:
webpack.mix.js is your configuration layer on top of webpack. Most of your time will be spent here.
Step 3. Define Your Compilation
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');
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.
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 ships with everything you need to get started. Simply:
- Install Laravel (
laravel new app)
- Visit your
webpack.mix.js file, and get started!