Czym jest Webpack i kiedy warto go używać?

Czym jest Webpack?

Webpack to bundler, czyli narzędzie, które potrafi spakować wiele różnych formatów do jednego pliku JavaScript. Nada mu rozszerzenie .js, a zrobi to poprzez przekształcenie i minifikację niepotrzebnego kodu.

Czy go potrzebujesz?

Jeśli jesteś w trakcie budowy dużej aplikacji ze skomplikowanym frontendem, która posiada wiele obrazów, fontów, elementów CSS, to Webpack znacznie ułatwi Ci pracę. Jeśli jednak aplikacja, nad którą pracujesz, jest mała, czyli opierać się będzie na jednym pliku JavaScript, bez obrazów, to Webpack może tylko komplikować pracę.

Czym jest dependency graph?

Webpack tworzy dla Ciebie dependency graph. Jest to zasada matematyczna, w której zależności obiektów różnego pochodzenia lączą się.

W praktyce kodowania oznacza to lepsze rozwiązanie niż te stosowane dawniej. Kiedyś zależności JavaScriptu układało się w określonej kolejności. Kolejną metodą było sprzęganie i minifikacja skryptów poleceniem build. Rozwiązanie wciąż dalekie od idealnego, ponieważ w dalszym ciągu polega ono na ręcznym ustalaniu kolejności łączonych plików. Co więcej, z tego powodu kod mógł komunikować się tylko przez zmienne globalne.

Teraz jednak można używać modułów CommonJS lub ES6, aby stworzyć wyżej wymieniony dependency graph. Używa się małych plików, które same określają swoje potrzeby. Przeglądarka, która nie wspiera polecenia require() wykorzysta plik po spakowaniu przez Webpacka i będzie w stanie z nim współpracować.

Istnieją oczywiście narzędzia takie, jak Browserify, które rozwiązują ten problem. W czym jednak lepszy będzie Webpack?

Czym zajmuje się Webpack?

Webpack pozwala używać polecenia require() w lokalnych zasobach stałych, czyli w plikach, które nie są JavaScript. Jeśli użyjesz Webpacka, wyszuka on w kodzie wszystkie wezwania require() i wyśle je do fileloadera. Ten z kolei zamieni require() na URL. Możesz skonfigurować w Webpacku rodzaj URL-a,  jaki ma powstać. Oprócz tego fileloader załaduje plik do ustalonego folderu. Po wgraniu zawartości folderu do CDNa (Content Delivery Network) i po uruchomieniu kodu, obraz z pewnością załaduje się na stronie www.

Co ważne Webpack nie tylko stworzy plik JavaScirpt. Może również stworzyć kopie zasobów stałych na określoną przez Ciebie lokalizację zewnętrzną. Oprócz tego Webpack stworzy plik JavaScript w taki sposób, aby require() nigdy nie musiało być użyte w przeglądarce. Zamieni polecenie na skrypt Javascript i dopiero on zostanie wykorzystany.

W czym Webpack jest lepszy od Grunt, Gulp czy Browserify?

Grunt i Gulp to narzędzia do pracy z plikami i nie mają zdolności tworzenia prawdziwego dependency graph. Browserify z kolei to narzędzie do przekształcania require() do poleceń wywołania działających w przeglądarce. Tworzy on dependency graph jedynie dla kodu źródłowego. Webpack łączy te cechy.

Jakie są zalety Webpacka? 

1.  Usuwa niepotrzebne zasoby stałe. Ogromna zaleta dla użytkowników CSS. Używasz obrazów i CSS w folderze dist/, które fatycznie są Ci potrzebne.
2. Łatwiejsze dzielenie kodu. Webpack stworzy dla Ciebie konkretny plik .css, który zmniejszy rozmiar pliku .js.
3. Kontrolujesz sposób, w jaki zasoby są przetwarzane. Jeśli obraz jest poniżej określonej wagi, możesz używać kodu base64 i wprowadzić go bezpośrednio do JavaScript. Jeśli plik JSON jest za duży, możesz załadować go z URL.
4. Stabilna praca. Nie będziesz w stanie przypadkowo wprowadzić kodu bez obrazu.
5. Webpack z pewnością na początku Cię spowolni, ale używany poprawnie przyspieszy pracę w przyszłości.

Jakie są wady Webpacka? 

Nie ma sensu ukrywać, że rozwiązanie to ma swoje wady.

1. Dokumentacja jest napisana skomplikowanym językiem.
2. Kod źródłowy jest trudny w opanowaniu, szczególnie dla początkujących.
3. Konfiguracja Webpacka jest trudna dla niezaawansowanych użytkowników. Lepiej więc spojrzeć na gotowe przykłady.
4. Trudna składnia w kodzie, która występuje w całej dokumentacji, a nie posiada wielu wyjaśnień.

Czym jest dev server?

Dev server to wbudowana aplikacja dla kodowania lokalnego. Umożliwia ona podgląd zmian w kodzie w czasie rzeczywistym, za darmo. W przypadku dużych projektów taka pomoc jest nieoceniona.

Tradycyjne programowanie na frontendzie polega jedynie na zmiennych globalnych. Reguły CSS istnieją w globalnej przestrzeni nazw. Ich stosowanie polega na ręcznym ustawianiu selektorów. Bardzo trudno się nie pomylić w przypadku globalnie definiowanych reguł lub obrazów. Dependency graph przychodzi z pomocą w formie Webpacka. Automatyzacja tego procesu w przypadku dużego projektu może okazać się ogromną oszczędnością czasową, nawet jeśli wymaga wcześniejszej konfiguracji.