Apa itu laravel mix

Laravel dirilis dengan modul laravel-mix yang terinstal secara langsung.
Laravel Mix adalah modul seperti Webpack yang berfungsi untuk menyederhanakan proses kompilasi aset pada web Anda.

Mengatur project anda

Mari ambil contoh semisal kita memulai project dari nol, kita harus menginisialisasi direktori npm kita dengan cara

1
npm init

Install laravel mix

Selanjutnya, kita harus menginstall node packages berikut ini: laravel-mix, webpack dan cross-env dengan cara.

1
npm install laravel-mix cross-env

Proses ini membutuhkan waktu beberapa saat untuk menginstall dan men-compile semua dependensi yang diperlukan.

Buat file webpack.mix.js

Selanjutnya, buat file webpack.mix.js dan paste code dibawah ini di dalamnya:

1
2
3
4
let mix = require('laravel-mix');

mix.sass('assets/style.scss', 'dist')
   .js('assets/app.js', 'dist');

Code tersebut akan men-compile asset SCSS (style.scss) ke format CSS (style.css)
dan menaruhnya didalam folder dist, sama halnya dengan file javascript.

Menambahkan perintah npm ke dalam file packages.json

Taruh kode dibawah ini di dalam file packages.json

1
2
3
4
5
6
7
8
9
"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"
},

Men-compile assets

Sekarang kamu dapat men-compile file assets dengan cara (tidak di minify namun prosesnya lebih cepat):

1
npm run development

atau dengan command production (di minify namun sedikit lambat)

1
npm run production