Webpack, czyli transpilator JS do tworzenia aplikacji

Webpack to transpilator JavaScript, pomagający przy budowie dużych aplikacji ze skomplikowanymi komponentami front-end. Jego głównym celem jest tworzenie pakietów uwzględniających zależności pomiędzy modułami i klasami, znacząco poprawiając przy tym wydajność. 

Webpack wspiera formaty modułów ES2015, CommonJS, MJS i AMD. Dostępna jest również obsługa WebAssembly, nowego sposobu uruchamiania kodu niskopoziomowego w przeglądarce. Mechanizm ładowania działa również dla CSS, z obsługą @import i url() przez css-loader. Możesz znaleźć wtyczki do określonych zadań, takich jak minifikacja, internacjonalizacja, czy HMRj, a dzięki użyciu narzędzia Browserity możliwe jest zastosowanie składni importowania modułów ustandaryzowanej w ramach ECMAScript.

Sposób działania WEBPAC

Najmniejszy projekt, który można połączyć z pakietem internetowym, składa się z danych wejściowych i wyjściowych. Proces łączenia rozpoczyna się od wpisów zdefiniowanych przez użytkownika. Same wpisy są modułami i mogą wskazywać na inne moduły poprzez import.

Gdy łączysz projekt za pomocą pakietu webpack, pobiera on zależności z poszczególnych plików, konstruując dla nich graf zależności, a następnie generuje dane wyjściowe na podstawie konfiguracji. Dzięki temu, przy tworzeniu aplikacji możliwe jest zastosowanie podejścia modułowego, z jednoczesnym utworzeniem jednego, zwartego pliku wynikowego. Dodatkowo możliwe jest zdefiniowanie punktów podziału, aby utworzyć oddzielne pakiety w samym kodzie projektu.