Prinsip Pengoperasian Pembundar Webpack dalam JavaScript

Biasanya, semasa pembangunan, kita mempunyai banyak fail JavaScript, yang mengandungi pelbagai bahagian 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 melambatkan kelajuan memuat tapak. Oleh itu, untuk mempercepatkan muat turun, semua kod perlu digabungkan menjadi 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 menggunakan pembundar digabungkan menjadi satu fail umum, yang disambungkan ke fail HTML.

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

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

Pembundar masuk ke titik kemasukan, melihat modul mana yang disambungkan kepadanya. Modul-modul ini juga mungkin disambungkan kepada modul lain. Pembundar mengikuti semua sambungan dan mengumpul semua kod menjadi satu fail. Fail ini dipanggil bundle.

Biasanya, kod yang ditulis oleh pengatur cara terletak dalam folder src, dan kod yang telah dibundarkan diletakkan dalam folder dist.

Pembundar juga membolehkan pengawalan mod pembundaran. Mod 'development' adalah untuk proses pembangunan. Ia membundarkan kod dengan cara yang selesa untuk pembangunan. Mod 'production' adalah untuk kod akhir yang akan dinaikkan untuk digunakan. Dalam mod ini kod akan diminimumkan, untuk mengurangkan saiznya dan meningkatkan kelajuan muat turun.