Webpack - okładka

Webpack – szybki start i pierwsza konfiguracja

Czym jest Webpack?

Webpack jest to module bundler dla naszych aplikacji Javascript. Prościej mówiąc – Webpack pozwala nam wykonywać operacje na plikach. Jakie operacje? Już tłumaczę.

Spektrum możliwości Webpacka tak naprawdę zależy tylko od naszych zachcianek i dostępnych pluginów oraz loaderów (o tym będzie później). Przykładowymi zadaniami, do których wykorzystamy Webpacka może być minifikacja plików (usuwanie zbędnych białych znaków), kompilacja plików .scss na .css, kompilowanie plików .vue do pliku .js, czy też połączenie wielu plików w jeden.

Wpis ten dotyczy Webpacka w wersji 4, także jeśli korzystasz z wersji wcześniejszej, bądź późniejszej weź pod uwagę to, że artykuł może być nieaktualny.

Jak zacząć korzystać z Webpacka?

Na sam początek należy stworzyć nowy projekt. Gdy już mamy nowy projekt należy zainstalować niezbędne paczki: npm install webpack webpack-cli --save-dev. Mając zainstalowane paczki możemy przejść do stworzenia pliku webpack.config.js, w którym skonfigurujemy naszego Webpacka!

Importy

Na samym początku pliku powinniśmy dodać moduły, których będziemy używać. Tutaj też dodajemy pluginy, które potrzebujemy. Pluginy i loadery należy pobrać z repozytorium NPM/Yarn. W moim przypadku są to trzy pluginy oraz moduł path, którego nie potrzeba doinstalowywać.

Webpack - moduły

Następnie tworzymy obiekt module.exports, w którym znajdzie się nasza właściwa konfiguracja.

Entry

W entry podajemy plik/pliki, które stanowią nasze wejście. Stąd Webpack zaczyna swoją drogę po plikach projektu.

Webpack - Entry

Nazwa właściwości może być dowolna, ja nazwałem ją main. Gdy ładujemy tylko 1 plik możemy napisać po prostu: entry:'./path/to/my/entry/file.js', aczkolwiek, gdy chcemy załadować więcej niż jeden plik, skorzystajmy z obiektu.

Wykorzystałem tutaj moduł path, dzięki któremu możemy dynamicznie dołączyć ścieżkę do naszego pliku wejściowego. Użyłem też tutaj __dirname, które wskazuje na katalog, gdzie zamieściliśmy naszą konfigurację.

Output

W tym obiekcie podajemy lokalizację oraz nazwę naszych plików wyjściowych. Takie pliki są plikami, które możemy wrzucić bezpośrednio na serwer i uruchomić naszą aplikację, bądź stronę internetową.

Webpack - Output

W właściwości filename podajemy oczywiście nazwę pliku, którą możemy stworzyć też dynamicznie! Do stworzenia takiego pliku możemy posłużyć się następującą składnią: [name].[hash].js. W miejsce name zostanie wstawiona nazwa właściwości z obiektu entry (w naszym przypadku jest to main), zaś w miejsce hash zostanie wygenerowany hash, który sprawi, że nazwa naszego pliku będzie unikalna! Plik wyjściowy może wyglądać na przykład tak: main.cc544c2a7f8fc593a127.js.

Module

To tutaj zaczyna się właściwa część konfiguracji. W tym obiekcie obsługujemy wszystkie pliki i przyporządkowujemy im odpowiednie loadery! Loadery są to paczki, które sprawiają, że Webpack jest w stanie pracować z plikami innymi niż pliki o rozszerzeniu .js. Do obiektu module przekazujemy tablicę rules, zawierającą reguły, dzięki którym znajdziemy w naszym projekcie pliki w odpowiednich formatach. Mogą to być pliki .jpg, .png, .txt, .css, .scss, tak naprawdę jakiekolwiek, jakie posiadają loader!

Do tablicy rules wpisujemy w obiektach kolejne reguły. Pierwszą właściwością jest test. Test jest wyrażeniem regularnym, które pomaga znaleźć plik z odpowiednim rozszerzeniem.  Drugą właściwością jest use. Tutaj możemy dodać jakiś loader, bądź też plugin. Najprostsza reguła może wyglądać w ten sposób: { test: /\.txt$/, use: 'raw-loader' }. Jest to prosta reguła, która wyszuka pliki z rozszerzeniem .txt. Możemy też tak jak już wspomniałem użyć pluginów. Poniżej zamieszczam przykład:

Webpack - Modules

W tym przykładzie obsłużyłem pliki z rozszerzeniem .scss, a ponadto wyeksportowałem je do osobnego pliku .css. Co ważne, loadery, które podajemy wykonywane są w kolejności od prawej do lewej, od ostatniego elementu w tablicy do pierwszego!

Pluginy

Webpack oferuje programistom ogromną liczbę pluginów. Pluginy odpowiadają za czynności takie jak minifikacja plików, operacje na plikach i katalogach itp. Pluginy podajemy w tablicy jako elementy tej tablicy, korzystając ze słówka new oraz nazwy pluginu. Pluginy musimy, tak jak tez loadery, pobrać za pomocą NPM/Yarn. W celu optymalizacji stworzyłem dwie tablice i w zależności od mode ładuję jedną, bądź też dwie.

Mode

Mode jest to inaczej tryb, w jakim pracuje nasza aplikacja. Dokumentacja Webpacka mówi nam o trzech trybach: production, development, oraz none. Tryb production tworzy wersję produkcyjną aplikacji, czyli taka, która ostatecznie ląduje na serwerze, natomiast tryb development tworzy wersję developerską, czyli taką, z którą pracuje programista. W moim przypadku stworzyłem dwie tablice z pluginami, z czego jedna to rozszerzenia, które ładujemy zawsze, natomiast druga zawiera pluginy, które wykorzystuję tylko w wersji produkcyjnej.

Webpack - Pluginy

Zmienna devMode zwraca true w przypadku, gdy zmienna środowiskowa process.env.NODE_ENV ma wartość ‘development’. Potem znajdują się dwie tablice z rozszerzeniami. Do niektórych pluginów możemy też dodać argumenty. W naszym przypadku w pluginie CleanWebpackPlugin podajemy ścieżkę do katalogu, który ma zostać opróżniony z plików. Natomiast plugin ExtractTextPlugin* jako parametr otrzymuję nazwę pliku css, który zostanie stworzony. Następnie wracamy do naszego obiektu module.exports, gdzie dołączamy nasze pluginy.

 

*Edit 22.07.2018

Jak słusznie zauważył jeden z czytelników ExtractTextPlugin nie jest zalecany dla Webpacka w wersji 4. Zamiast niego należy użyć mini-css-extract-plugin.
Webpack - dołączanie pluginów

W zależności od trybu dołączamy odpowiednie pluginy, skorzystałem tutaj z alternatywnego zapisu if.

Plik wynikowy

Mamy już omówione wszystkie cztery aspekty budowania naszej konfiguracji webpacka. Plik wynikowy powinien wyglądać mniej więcej tak:

Webpack - konfiguracja

Jest to naprawdę podstawowa konfiguracja Webpacka, która jednak pozwoli ci na komfortową pracę!

package.json

Ostatnim krokiem jest dodanie odpowiednich poleceń do pliku package.json. W scripts dodajemy dwa polecenia. Jedno z nich odpowiada za uruchomienie projektu w wersji developerskiej, zaś drugie w wersji produkcyjnej. Ponadto wersja developerska obsługuje dynamiczny podgląd zmian w plikut, przez co po zapisie pliku od razu możemy obserwować zmiany w naszym projekcie!

Webpack - package.json

Teraz uruchamiając polecenie npm run dev lub npm run build nasz webpack będzie działał poprawnie!

Jako zadanie domowe, dodaj do tej konfiguracji plugin minifikujący wynikowy plik CSS oraz obsługę plików w formatach .jpg , .gif oraz .png.

Jeśli masz jakieś pytania, bądź zauważyłem jakieś błędy napisz mi o tym w komentarzu!

Linki:

Plik konfiguracyjny webpack z tego artykułu: TUTAJ

Oficjalna dokumentacja Webpack: TUTAJ