Vite Integration

Chapter sebelumnya menutup dengan janji satu directive untuk semua kebutuhan aset. Sekarang kita tepati janji itu: menghubungkan Vite ke Blade lewat @vite, menjalankan mode pengembangan yang memungkinkan hot reload, dan menghasilkan build produksi yang ter-minifikasi dengan nama berkas ter-hash. Semua contoh pada chapter ini dijalankan pada aplikasi Laravel 13 segar — berkas konfigurasi yang kita bedah adalah berkas asli bawaan, bukan tulisan tangan.

Tiga Berkas yang Menghubungkan Semuanya #

Aplikasi baru Laravel sudah memasang Vite dan menyiapkan tiga titik sambung. Pertama, package.json berisi script npm:

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@tailwindcss/vite": "^4.0.0",
        "laravel-vite-plugin": "^3.1",
        "tailwindcss": "^4.0.0",
        "vite": "^8.0.0"
    }
}

Kedua, vite.config.js mendaftarkan plugin laravel-vite-plugin beserta entry point aset aplikasi (kita potong blok fonts bawaan agar fokus — ia hanya mengunduh font untuk halaman selamat datang):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

Plugin laravel di sinilah jembatannya: opsi input mendaftarkan berkas sumber mana yang boleh jadi entry point, sedangkan refresh: true memuat ulang halaman Blade penuh saat berkas di sisi server berubah. Ketiga, layout Blade memanggil directive @vite dengan path yang sama persis seperti di input:

{{-- resources/views/latihan-vite.blade.php --}}
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Latihan Vite</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <h1>Halo dari Blade</h1>
</body>
</html>

Kita daftarkan route Route::view('/latihan-vite', 'latihan-vite');, lalu render halamannya lewat feature test untuk melihat HTML yang benar-benar dikirim ke browser.

Mode Dev: Server Lokal dengan HMR #

Selama pengembangan kita menjalankan npm run dev. Perintah ini menyalakan dev server Vite di http://localhost:5173 dan menulis penanda bernama hot file di public/hot. Selama hot file itu ada, directive @vite mengarahkan semua tag aset ke dev server alih-alih folder public/build. Berikut bagian <head> halaman kita saat hot file sedang aktif — ditangkap dari response GET /latihan-vite:

<link rel="stylesheet" href="http://localhost:5173/resources/css/app.css" />
<script type="module" src="http://localhost:5173/resources/js/app.js"></script>

Perhatikan URL-nya memakai path sumber (resources/css/app.css), bukan berkas hasil olahan. Inilah dasar kecepatan Vite: browser meminta tiap modul langsung dari dev server, dan ketika kita menyimpan berkas, HMR menukar modul itu di browser tanpa memuat ulang halaman. Ubah warna di app.css, dan halaman berubah seketika tanpa sentuhan F5. Saat npm run dev dihentikan, hot file terhapus otomatis dan Laravel kembali mencari build produksi.

Build Produksi: manifest dan Nama Ter-hash #

Saat rilis, kita menjalankan npm run build. Ini output nyatanya dari aplikasi segar tersebut:

> build
> vite build

vite v8.3.4 building client environment for production...
transforming chunks...
public/build/manifest.json                                      1.47 kB │ gzip:  0.33 kB
public/build/assets/fonts-C9MNnjVw.css                          2.35 kB │ gzip:  0.38 kB
public/build/assets/app-n8mIr9Kk.css                           93.28 kB │ gzip: 18.26 kB
public/build/assets/app-BvRk9kiK.js                             0.00 kB │ gzip:  0.02 kB

✓ built in 1.70s

Semua hasil dimasukkan ke public/build/ dengan nama yang mengandung content hash — app-n8mIr9Kk.css misalnya. Ganti satu karakter di app.css, jalankan build lagi, dan hash-nya berubah: cache busting selesai tanpa query string manual. Berikut potongan public/build/manifest.json yang ikut dihasilkan:

{
  "resources/css/app.css": {
    "file": "assets/app-n8mIr9Kk.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.js": {
    "file": "assets/app-BvRk9kiK.js",
    "src": "resources/js/app.js",
    "isEntry": true
  }
}

Manifest inilah kamus yang dibaca directive @vite: Blade menyebut path sumber, Laravel mencari padanan file di manifest, lalu menghasilkan tag HTML final. Setelah build di atas, bagian <head> halaman /latihan-vite berubah menjadi:

<link rel="preload" as="style" href="http://localhost:8000/build/assets/app-n8mIr9Kk.css" />
<link rel="modulepreload" as="script" href="http://localhost:8000/build/assets/app-BvRk9kiK.js" />
<link rel="stylesheet" href="http://localhost:8000/build/assets/app-n8mIr9Kk.css" />
<script type="module" src="http://localhost:8000/build/assets/app-BvRk9kiK.js"></script>

Tag preload dan modulepreload membantu browser mengunduh aset lebih awal, dan type="module" membuat JS kita berjalan sebagai ES module di browser. Jika @vite tidak menemukan hot file maupun build/manifest.json, halaman gagal dengan error 500 — kami memverifikasinya dengan memindahkan manifest sesaat: exception yang muncul adalah ViteManifestNotFoundException dengan pesan Vite manifest not found at: .../public/build/manifest.json.

@vite atau asset()? #

Sumber rinci tentang hot reload, konfigurasi entry point, dan blade directive tersedia di dokumentasi resmi Vite Laravel . Dengan rel Blade-Vite yang sudah tersambung ini, kita bisa mulai mengisi resources/css dan resources/js dengan kode nyata — mulai dari struktur modul ES6 sampai pemakaian package npm, bahasan chapter CSS dan JavaScript .