Zasada działania bundlera Webpack w JavaScript

Z reguły podczas rozwoju mamy wielo plików JavaScript, zawierających różne fragmenty kodu. Mogą to być części naszego kodu, lub biblioteki stron trzecich. Okazuje się, że każdy taki plik musimy podłączyć do pliku HTML przez tag script.

To nie jest zbyt dobre, ponieważ wiele podłączonych plików spowalnia prędkość ładowania strony. Dlatego aby przyspieszyć ładowanie konieczne jest złożenie całego kodu w jeden plik.

Jednakże, rozwijać kod w jednym wspólnym pliku też nie jest zbyt wygodnie. Dlatego obecnie praktykuje się następujące podejście: kod jest rozwijany w oddzielnych plikach, a następnie za pomocą bundlera zbierany jest w jeden wspólny plik, który jest podłączany do pliku HTML.

Oddzielne pliki reprezentują moduły ES. Te moduły są podłączane do innych plików przez polecenie import.

Zwykle tworzy się pewien główny plik, do którego podłączane są pozostałe pliki. Ten plik nazywa się punkt wejścia.

Bundler wchodzi do punktu wejścia, patrzy jakie moduły są podłączone do niego. Do tych modułów również mogą być podłączone inne moduły. Bundler podąża za wszystkimi połączeniami i zbiera cały kod w jeden plik. Ten plik nazywa się bundle (paczką).

Z reguły kod, który pisze programista, znajduje się w folderze src, a zebrany kod jest umieszczany w folderze dist.

Bundler również pozwala regulować tryb budowania. Tryb 'development' przeznaczony jest dla procesu rozwoju. Zbiera kod w sposób wygodny dla rozwoju. Tryb 'production' przeznaczony dla końcowego kodu, który będzie wystawiony do pracy. W tym trybie kod będzie zminimalizowany, aby zmniejszyć jego rozmiar i zwiększyć prędkość ładowania.