npx mix
Installation Stand-Alone Projects Laravel Projects 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! ads via Carbon Your new development career awaits. Check out the latest listings. ADS VIA CARBON edit this page