Laravel Mix 4.x standalone installation instructions

laravel_mix_setup.md

First make sure you are using the latest stable version of Node.js. These intructions were tested with 11.9.0.

Setup a new project with Laravel Mix:

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./

Take a look at webpack.mix.js and see if you want to change any of the paths to your src and dist. Then create some initial source files:

mkdir src && touch src/app.{js,scss}

Run an initial compile and check that your build files are created as expected:

node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js

As that's a bit verbose for everyday use, add these workflow scripts to package.json:

"scripts": {
  "dev": "npm run development",   
  "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",   
  "prod": "npm run production",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

You need the cross-env module to be installed to use the scripts above. To install globally:

sudo npm install --global cross-env

Now run your desired workflow, e.g.:

npm run dev