Zasada działania bundlera Webpack

Zazwyczaj 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 znacznik script.

To nie jest zbyt dobrze, ponieważ wiele podłączonych plików spowalnia prędkość ładowania strony. Dlatego dla przyspieszenia ładowania konieczne jest złożenie całego kodu do jednego pliku.

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 jest zbierany do jednego wspólnego pliku, 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 są podłączane 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 do jednego pliku. Ten plik nazywa się bundle.

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