📄 Panduan index.html dalam Vite: Apa yang Boleh, Tidak Boleh, dan Rekomendasinya

Vite adalah build tool modern yang menggabungkan simplicity HTML + kekuatan ESM + performa super cepat. Salah satu bagian penting dari proyek Vite adalah file index.html.

Tapi, apakah kamu tahu bahwa index.html di Vite bukan file HTML biasa?

---

🧠 Apa Itu index.html di Vite?

Berbeda dari proyek frontend tradisional, Vite memproses index.html secara spesial:

• Sebagai entry point utama aplikasi.

• Mendukung template injection seperti %-style atau env variables.

• Bisa menyertakan <script type="module"> yang menjadi entry ESM.

---

✅ Apa yang Boleh Dilakukan pada index.html

Berikut hal-hal yang boleh dan didukung secara resmi:

1. ✅ Ditempatkan di Root Project

/project-root/
├── index.html    ✅ default dan direkomendasikan
├── vite.config.ts
├── src/
│   └── main.ts

Vite akan otomatis mendeteksi dan menjalankan file ini saat vite dev.

---

2. ✅ Menggunakan <script type="module" src="/main.ts">

<script type="module" src="/main.ts"></script>

Vite akan membaca file ini dan menggunakannya sebagai entry point module bundling.

---

3. ✅ Inject env dan base secara otomatis

<script type="module">
  console.log(import.meta.env.BASE_URL)
</script>

---

4. ✅ Multi-page support (jika dikonfigurasi di vite.config.ts)

Kamu bisa punya banyak file HTML seperti about.html, dashboard.html, dll — asalkan ditentukan di rollupOptions.input.

---

❌ Apa yang Tidak Boleh / Tidak Disarankan

1. ❌ Meletakkan index.html di Dalam src/ Tanpa Konfigurasi

/project-root/
├── src/
│   ├── index.html ❌ tidak akan dikenali tanpa config

Tanpa konfigurasi root dan rollupOptions, Vite tidak akan tahu ini adalah entry.

2. ❌ Menggunakan Syntax HTML yang Tidak Valid atau Conflict dengan ESM

Misalnya, script biasa tanpa type="module":

<!-- ⚠️ Ini tidak akan digunakan sebagai ESM entry -->
<script src="/main.js"></script>

3. ❌ Menambahkan Script Build Tools Langsung di HTML

Vite tidak mengizinkan eksekusi script non-browser (Node.js tools) langsung dari HTML seperti:

<script src="node_modules/..."> <!-- ❌ Tidak jalan -->

---

⚙️ Jika Harus Pindahkan ke src/?

Kamu boleh saja pindahkan index.html ke dalam src/, asal kamu tahu konsekuensinya dan mengubah config Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: resolve(__dirname, 'src/index.html'),
    },
  },
})

Tapi ini tidak disarankan untuk pemula, karena akan merusak konvensi default dan menambah kompleksitas tidak perlu.

---

🧭 Rekomendasi Terbaik

---

📌 Kesimpulan

• index.html adalah file spesial di Vite yang menjadi entry utama aplikasi.

• Harus diletakkan di root project agar dideteksi otomatis.

• Tidak perlu plugin tambahan untuk menggunakannya.

• Boleh dipindahkan ke src/, tapi harus mengatur vite.config.ts secara eksplisit.

• Untuk pengalaman terbaik: ikuti konvensi default Vite.