Webpack to bundler, czyli narzędzie, które analizuje zależności między modułami JavaScript oraz zasobami, takimi jak style i obrazy, i łączy je w zoptymalizowane pliki dla przeglądarki. Przez lata był standardem w projektach frontendowych i nadal działa w wielu istniejących aplikacjach.
Jak działa Webpack?
Zaczyna od pliku wejściowego, rekurencyjnie śledzi importy i buduje graf zależności. Loadery przetwarzają różne typy plików, np. TypeScript, Sass czy obrazy, a wtyczki dodają kolejne operacje, takie jak minifikacja i generowanie plików HTML.
Mocne i słabe strony
Mocną stroną jest ogromna elastyczność i ekosystem wtyczek. Słabą rozbudowana konfiguracja oraz wolniejsze uruchamianie dużych projektów w porównaniu z narzędziami nowszej generacji, takimi jak Vite.
Kiedy się z niego korzysta?
Najczęściej w istniejących aplikacjach i w frameworkach, które używają go wewnętrznie. W nowym projekcie zaczyna się dziś zwykle od prostszych narzędzi, chyba że potrzebne są jego zaawansowane funkcje.
Na etapie budowania kodu można też włączyć zaciemnianie kodu JavaScript, choć w większości projektów wystarcza minifikacja.
Zobacz w praktyce
Jak zaciemnić kod JavaScript i kiedy to ma sens 
Refaktoryzacja JavaScript – jak poprawić Interaction to Next Paint (INP) 
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP)