Prinsip Kerja Pembundel Webpack di JavaScript

Biasanya, selama pengembangan, kita memiliki banyak file JavaScript yang berisi berbagai potongan kode. Ini bisa berupa bagian dari kode kita, atau library pihak ketiga. Artinya, setiap file tersebut harus kita sambungkan ke file HTML melalui tag script.

Ini tidak terlalu baik, karena banyaknya file yang terhubung memperlambat kecepatan pemuatan situs. Oleh karena itu, untuk mempercepat pemuatan, semua kode harus disatukan menjadi satu file.

Namun, mengembangkan kode dalam satu file umum juga tidak terlalu nyaman. Jadi, saat ini pendekatan berikut ini dipraktikkan: kode dikembangkan dalam file terpisah, dan kemudian menggunakan pembundel digabungkan menjadi satu file umum, yang kemudian disambungkan ke file HTML.

File-file terpisah adalah modul ES. Modul-modul ini disambungkan ke file lain melalui perintah import.

Biasanya dibuat file utama tertentu, di mana file-file lainnya disambungkan. File ini disebut titik masuk.

Pembundel masuk ke titik masuk, melihat modul mana yang disambungkan ke sana. Modul-modul ini juga mungkin disambungkan ke modul lain. Pembundel mengikuti semua sambungan dan mengumpulkan semua kode menjadi satu file. File ini disebut bundle.

Biasanya, kode yang ditulis oleh programmer, terletak di folder src, dan kode yang sudah dibundel ditempatkan di folder dist.

Pembundel juga memungkinkan pengaturan mode pembundelan. Mode 'development' diperuntukkan bagi proses pengembangan. Mode ini membundel kode dengan cara yang nyaman untuk pengembangan. Mode 'production' diperuntukkan bagi kode final, yang akan diterapkan ke produksi. Dalam mode ini, kode akan diminifikasi, untuk mengurangi ukurannya dan meningkatkan kecepatan pemuatan.