Sebelum ini, semua contoh kode program yang saya berikan masih menggunakan file vue.js yang diunduh ke local development atau ditautkan via CDN. Tapi untuk materi-materi selanjutnya, kita akan beralih Webpack. Oya sebagai referensi, saya sudah sedikit membahas tentang Vue-CLI yang “sebenarnya” berjalan di atas Webpack di materi Cara Instalasi Vue.js.

Sekilas Tentang Webpack dan Vue-CLI

Webpack adalah sebuah module bundler, digunakan untuk menggabungkan seluruh modul project aplikasi berupa file Javascript, HTML, CSS, gambar dan lain-lain menjadi satu file (tipe yang sama). Sedangkan Vue-CLI adalah perkakas standar dari ekosistem Vue yang berjalan di atas Webpack, digunakan untuk memudahkan setup / pembuatan aplikasi Vue baru. Disebut “memudahkan” karena dengan memanfaatkan Vue-CLI, kita tidak perlu direpotkan lagi dengan berbagai persoalan terkait file dependencies.

menggunakan webpack dan vue-cli

Di pengembangan aplikasi web sesungguhnya, kita mungkin akan membutuhkan fitur seperti : hot reloading, linting, CSS pre-preprocessors dan lain-lain. Nah, ketimbang menghabiskan banyak waktu untuk menyiapkan semua modul yang dibutuhkan oleh fitur tersebut, install dan konfigurasi ini itu secara manual, sebagai gantinya, Vue-CLI memiliki template standar yang di dalamnya telah tersedia beberapa fitur bawaan penting. Cukup ketik vue create namaproject, semua pun siap dalam waktu singkat.

Struktur Aplikasi Vue-CLI

Jika Anda membuka project belajarvue yang telah dibuat sebelumnya dengan @vue/cli 4.1.2, struktur project akan terdiri dari beberapa folder dan file, seperti yang terlihat pada gambar berikut :

menggunakan webpack dan vue-cli
editor menggunakan Visual Studio Code
  • Folder node_modules/
    Berisi semua package / modul node yang di-install dan digunakan dalam project.

  • File index.html
    File yang pertama kali diakses oleh web browser.

  • Folder src/
    Tempat menulis kode Vue.

  • Folder src/assets/
    Berisi file-file asset static seperti gambar, klip video dan lain-lain. File di dalam folder ini tidak ikut diproses oleh Webpack.

  • Folder components/
    Tempat komponen Vue.

  • File App.vue
    Komponen top-level / paling utama dari aplikasi.

  • File main.js
    File js yang dimuat pertama kali setelah index.html diakses.

  • File babel.config.js
    Javascript compiler yang akan mengkonversi kode Javascript terkini ke versi sebelumnya agar dapat diterjemahkan oleh browser lawas. Tujuannya, agar user tidak harus selalu menggunakan browser dengan versi terbaru untuk menggunakan aplikasi web yang kita buat.

  • File package.json
    Berisi semua dependencies yang digunakan oleh project / aplikasi Vue. Menambah atau membuang modul / package dapat dilakukan dengan mengedit file ini.

Sedikit mengulang materi Dasar Pembuatan Aplikasi Vue.js, di dalam file index.html terdapat <div id="app"></div> yang menjadi target elemen dari $mount('#app') ketika instance Vue dibuat new Vue() di file main.js.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Di dalam inisiasi Vue terdapat baris render: h => h(App) yang berarti Vue akan memanggil dan me-render komponen utama App dari file App.vue. Kemudian di dalam template komponen App.vue, terdapat komponen lainnya (child component) yaitu HelloWorld yang di-import dari file HelloWorld.vue.

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

Agar komponen HelloWorld dapat digunakan setelah di-import, nama komponen wajib ditulis di option components:{}. Penulisan nama komponen harus persis sama antara yang di-import dengan yang ada di dalam option components:{}.

Fitur Hot Reloading

Salah satu fitur menarik (bahkan keren – menurut saya) yang dimiliki oleh Webpack adalah Hot Reloading. Dengan memanfaatkan Hot Reloading, halaman aplikasi tidak perlu di-refresh lagi agar dapat menampilkan hasil dari perubahan file Vue. Untuk mencoba fitur ini, masuk ke project belajarvue terlebih dahulu, kemudian jalankan project / aplikasi dengan perintah npm run serve.

menggunakan webpack dan vue-cli

Aplikasi Vue belajarvue dapat diakses di web browser melalui url http://localhost:8080/. Setelah aplikasi Vue terbuka di browser, edit file HelloWorld.vue seperti gambar di bawah, lalu save / simpan, tampilan browser seketika berubah tanpa harus me-refresh halaman lagi.

menggunakan webpack dan vue-cli