webpack jest kompilatorem modułów JavaScript. Czwartą wersję udostępniono na początku 2018 roku i od tego czasu wydawane były wyłącznie aktualizacje tej wersji. Twórcy publikowali przede wszystkim nowe funkcje, bez przełomowych zmian. Jednak nadszedł czas wprowadzenia nowej głównej wersji – webpack 5.0. Zawiera ona poprawki w budowie narzędzia oraz funkcje, których nie można zaimplementować bez nich.

Znaczenie webpack 5.0

Wydanie głównej wersji jest okazją do zmiany domyślnych ustawień oraz dostosowania ich do nadchodzących usprawnień. Wiele funkcji pojawi się w kolejnych wydaniach, nowa wersja nie jest jeszcze kompletna. Jest to wyłącznie wprowadzenie niezbędnych, przełomowych zmian.

Ogólne zmiany

Nowa wersja skupia się przede wszystkim na poprawie wydajności kompilowania. Jest to możliwe dzięki trwałemu buforowaniu. Poprawiono także długotrwałe buforowanie, korzystając z lepszych algorytmów i wartości domyślnych. webpack 5.0 zapewnia także zgodność z platformami internetowymi. Jednak co najważniejsze – wyczyszczono wewnętrzne struktury, które podczas wprowadzania funkcji w wersji webpack 4, pozostały niedopracowane.

Długoterminowe buforowanie w webpack 5.0

Narzędzie wprowadziło kompromis między rozmiarem pakietu a długoterminowym buforowaniem. Do nowego wydania dodano nowe algorytmy, przypisujące krótkie identyfikatory numeryczne do modułów i fragmentów. Przypisują również dwuznakowe nazwy do eksportu w sposób deterministyczny.

Inna funkcja – moduleIds/chunkIds/mangleExports: false – wyłącza domyślne zachowanie, przez co zapewnia się niestandardowy algorytm za pośrednictwem wtyczki.

Teraz webpack korzysta z prawdziwego skrótu zawartości pliku podczas używania [contenthash]. Wcześniej używał wyłącznie skrótu wewnętrznej struktury. Ma to pozytywny wpływ na długoterminowe buforowanie, ponieważ zmieniane są tylko komentarze lub zmienne.

Optymalizacja webpack 5.0

Jednym z kolejnych ulepszeń jest usprawnienie akcji treeshaking podczas ponownego eksportowania obiektów przestrzeni nazw. Webpack śledzi teraz dostęp do zagnieżdżonych właściwości eksportu. W poniższym przykładzie eksport b można usunąć w trybie produkcyjnym.

// inner.js
export const a = 1;
export const b = 2;

// module.js
export * as inner from './inner';
// or import * as inner from './inner'; export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

Kolejną przeprowadzoną optymalizacją jest analiza symboli w module, aby ustalić zależności od eksportu do importu. Jest to możliwe dzięki opcji optimization.innerGraph, włączonej w trybie produkcyjnym.

Wsparcie rozwoju

Jeden z nowych algorytmów – identyfikator fragmentu, nadaje nazwom plików i fragmentom czytelne nazwy. Określany jest on na podstawie ścieżki względem pliku context. Kolejną funkcją jest „Federacja modułów”. Dzięki niej możliwe jest współdziałanie wielu kompilacji pakietu internetowego.

Nowe funkcje platformy internetowej

Pierwszą zmianą jest zgodność modułów JSON z propozycją. Moduły przekazują teraz ostrzeżenie, jeśli używany jest eksport inny niż domyślny. Dla modułów aktywów webpack posiada teraz natywne wsparcie. Emitują one plik do folderu wyjściowego.

Podsumowanie

Nie jest to wszystko o nowej wersji webpack 5.0. Pełna dokumentacja jest także dostępna na oficjalnym blogu narzędzia. Aby ułatwić migrację z wersji 4 do najnowszej, wydano także przewodnik po migracji.