Prinsip Pengoperasian Pemplat Webpack

Biasanya, semasa pembangunan, kita mempunyai banyak fail JavaScript, yang mengandungi pelbagai cebisan kod. Ini boleh jadi bahagian kod kita, ataupun pustaka pihak ketiga. Ini bermakna setiap fail sedemikian perlu kita sambungkan ke fail HTML melalui tag script.

Ini tidak begitu baik, kerana banyak fail yang disambungkan memperlahankan kelajuan memuat tapak. Oleh itu, untuk mempercepatkan muat turun, semua kod perlu diletakkan dalam satu fail.

Walau bagaimanapun, membangunkan kod dalam satu fail umum juga tidak begitu selesa. Oleh itu, pada masa kini, pendekatan berikut diamalkan: kod dibangunkan dalam fail berasingan, dan kemudian dengan bantuan pemplat ia dikumpulkan dalam satu fail umum, yang disambungkan ke fail HTML.

Fail berasingan mewakili ES modul. Modul-modul ini disambungkan ke fail lain melalui arahan import.

Biasanya, satu fail utama dicipta, di mana fail lain disambungkan. Fail ini dipanggil titik kemasukan.

Pemplat masuk ke titik kemasukan, melihat modul mana yang disambungkan kepadanya. Modul-modul ini juga mungkin mempunyai modul lain yang disambungkan. Pemplat mengikuti semua sambungan dan mengumpulkan semua kod dalam satu fail. Fail ini dipanggil bundle.

Biasanya, kod yang ditulis oleh pengaturcara, terletak di dalam folder src, dan kod yang dikumpulkan diletakkan di dalam folder dist.