Menggunakan Laravel Mix tanpa Laravel

Laravel Mix

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.

Compile Assets

Meng-compile assets untuk keperluan production (dengan minify, ukuran file jadi lebih kecil)

npm run prod

compile assets untuk development mode (tanpa minify namun proses lebih cepat)

npm run dev

Compile assets ketika anda mengubah suatu file, ini favorit saya ketika tahap development

npm run watch

bagi yang pakai docker atau vagrant, jika perintah diatas tidak meng-compile otomatis anda dapat menggunakan perintah watch-poll

npm run watch-poll
Seorang Web Developer di Denpasar Bali. Nulis blog hanya sekedar iseng dan berbagi pengalaman.

Eksplorasi konten lain dari Kadek Jayak

Langganan sekarang agar bisa terus membaca dan mendapatkan akses ke semua arsip.

Lanjutkan membaca