Principiul de funcționare al bundler-ului Webpack în JavaScript

De regulă, în dezvoltare avem multe fișiere JavaScript, care conțin 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 asamblat într-un 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, de asemenea, 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 folderul src, iar codul asamblat este plasat în folderul dist.

Bundler-ul permite, de asemenea, reglarea modului de asamblare. Modul 'development' este destinat procesului de dezvoltare. Asamblează codul într-un mod convenabil pentru dezvoltare. Modul 'production' este destinat codului final, care va fi pus în funcțiune. În acest mod codul va fi minificat, pentru a reduce dimensiunea acestuia și a crește viteza de încărcare.