Principiul de funcționare al bundler-ului Webpack

De regulă, în dezvoltare ajungem cu multe fișiere JavaScript, conținând diverse fragmente de cod. Acestea pot fi părți din codul nostru, sau biblioteci externe. Rezultă că fiecare astfel de fișier trebuie să-l conectăm la fișierul HTML prin tag-ul script.

Aceasta nu este foarte bine, deoarece multe fișiere conectate încetinesc viteza de încărcare a site-ului. Prin urmare, pentru a accelera încărcarea este necesar să punem tot codul într-un singur fișier.

Cu toate acestea, nici dezvoltarea codului într-un singur fișier comun nu este foarte convenabilă. De aceea în prezent se practică următoarea abordare: codul este dezvoltat în fișiere separate, iar apoi cu ajutorul unui bundler este colectat într-un singur fișier comun, care este conectat la fișierul HTML.

Fișierele separate reprezintă module ES. Aceste module sunt conectate la alte fișiere prin comanda import.

De obicei se creează un fel de fișier principal, la care sunt conectate restul fișierelor. Acest fișier se numește punct de intrare.

Bundler-ul intră în punctul de intrare, se uită ce module sunt conectate la el. La aceste module pot fi, la rândul lor, conectate alte module. Bundler-ul urmărește toate conexiunile și adună tot codul într-un singur fișier. Acest fișier se numește bundle.

De regulă, codul pe care îl scrie programatorul, este localizat în directorul src, iar codul colectat este plasat în directorul dist.