Prinsip Kerja Pembundler Webpack

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, seluruh kode harus digabungkan menjadi satu file.

Namun, mengembangkan kode dalam satu file umum juga tidak terlalu nyaman. Oleh karena itu, saat ini pendekatan berikut dipraktikkan: kode dikembangkan dalam file terpisah, lalu dengan menggunakan pembundler digabungkan menjadi satu file umum, yang kemudian disambungkan ke file HTML.

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

Biasanya, dibuat sebuah file utama tertentu, di mana file-file lainnya disambungkan. File ini disebut entry point (titik masuk).

Pembundler masuk ke entry point, melihat modul mana yang disambungkan ke sana. Modul-modul ini juga mungkin disambungkan ke modul lainnya. Pembundler mengikuti semua sambungan dan mengumpulkan semua kode menjadi satu file. File ini disebut bundle.

Biasanya, kode yang ditulis oleh programmer, terletak di folder src, sedangkan kode yang sudah dibundle ditempatkan di folder dist.