Menggunakan Laravel Mix tanpa Laravel

Laravel Mix merupakan wrapper webpack yang sangat membantu dalam proses meng-compile assets web. Package laravel-mix selalu disertakan dalam framework Laravel, berikut tutorial untuk memasang laravel-mix pada project anda tanpa menyertakan framework Laravel (stand-alone).

Buat Project Baru

Ketik perintah dibawah ini untuk membuat project baru, jika anda telah memiliki project sebelum nya lanjutkan ke langkah berikutnya.

npm init

masukan informasi yang diminta, sehingga file package.json dibuat.

Install Laravel Mix

Selanjutnya install package laravel-mix dan cross-env

npm install laravel-mix cross-env --save-dev

Buat file webpack.mix.js

file webpack.mix.js dapat anda dapatkan dari framework laravel, atau anda buat sendiri dengan konfigurasi yang anda inginkan, contohnya:

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

mix.sass('src/sass/app.scss', 'assets/css')
   .js('src/js/app.js', 'assets/js');

kode diatas akan meng-complie scss dan js ke folder assets,

Tambahkan script ke package.json

Buka file package.json kemudian tambahkan kode dibawah ini:

 "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",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

Sampai disini laravel-mix seharusnya sudah dapat mengcompile assets anda jika dikonfigurasi dengan benar.