- Styczeń 2021
- Marzec 2020
- Luty 2020
- Styczeń 2020
- Wrzesień 2019
- Sierpień 2019
- Lipiec 2019
- Czerwiec 2019
- Maj 2019
- Kwiecień 2019
- Marzec 2019
- Luty 2019
- Styczeń 2019
- Grudzień 2018
- Listopad 2018
- Październik 2018
- Wrzesień 2018
- Sierpień 2018
- Lipiec 2018
- Czerwiec 2018
- Maj 2018
- Kwiecień 2018
- Marzec 2018
- Luty 2018
- Styczeń 2018
- Listopad 2017
- Październik 2017
- Wrzesień 2017
- Sierpień 2017
- Lipiec 2017
- Czerwiec 2017
- Maj 2017
- Kwiecień 2017
- Marzec 2017
- Luty 2017
Webpack 4 – Jak go skonfigurować i zacząć pracę?
javascript webpack
3/2/2019
Bartek Cis
W tym artykule dowiesz się jak skonfigurować Webpacka w najnowszej odsłonie i zacząć pracę nad aplikacją webową.
Czego się dzisiaj dowiesz?
Pokażę jak skonfigurować Webpacka 4. Będzie to podstawowa konfiguracja. Funkcje jakie będzie spełniał to:
- Babel czyli obsługa JS ES6+
- Obsługa fetch w JS
- Obsługa SASS
- Użycie PostCSS
- Autoprefixer w CSS
- Minifikacja JS i CSS
- Uglifikacja JS
Czyli to co najważniejsze.
Webpack 4
Jeśli interesujesz się Front-Endem od niedawna możesz się zapytać czym jest Webpack i po Ci on. Jest to bardzo przydatne narzędzie które wykonuje wiele zadań za Ciebie. Napisałem o tym trochę więcej przy okazji mojego wpisu o Webpack 1.
W tych czasach królują frameworki/biblioteki czyli Angular, React i Vue. Mają one swoje CLI które po zainstalowaniu nie wymaga większej konfiguracji. Jeśli jednak pracujesz w jakiejś innej technologii np. WordPress lub czysty JS to Webpack jest przydatny.
Co nowego?
W zasadzie to wypowiem się w stosunku do ostatniego mojego wpisu czyli wersji 1 🙂
Cała konfiguracja wydaje się jakby łatwiejsza? Webpack ma swoje CLI które już zawiera kilka opcji które wcześniej należało manualnie instalować.
Domyślnie pliki CSS/SASS są importowane do JS’a i na końcu tworzy się jeden bundle który zawiera wszystko. Można to jednak później rozdzielić na CSS i JS (ta konfiguracja to uwzględni).
Hehe tyle na pierwszy rzut oka 🙂
Jak zacząć konfigurację?
Na początku zainstaluj (jeśli jeszcze go nie masz) globalnie Yarna. To program do obsługi pakietów Node’a. Jest odpowiednikiem npm jednak jest stabilny i nie wywala głupich błędów…
Następnie pobierz z mojego repozytorium na Githubie konfigurację Webpacka. Umieść w odpowiednim folderze na Twoim komputerze.
Będąc w folderze projektu w terminalu uruchom komendę yarn install by zainstalować wszystkie potrzebne pakiety.
Zanim uruchomisz Webpacka to przeczytaj ten wpis do końca bo wytłumaczę dalej co i jak.
Struktura plików
Jeśli Webpack to dla Ciebie nowość to wiedz:
I. Wszystkie pakiety są zdefiniowane w pliku package.json.
Na jego podstawie Yarn instaluje co trzeba. Tam też definiujesz komendy którymi będziesz uruchamiać Webpacka:
"scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production --watch" },
II. Webpack jest konfigurowany w pliku webpack.config.js
III. PostCSS wymaga oddzielnego pliku konfiguracyjnego postcss.config.js
IV. Babel wymaga z kolei pliku .babelrc
V. Zasoby z Twoim kodem JS i SASS są kompilowane do plików wykorzystywanych przez index.html
Konfiguracja
Jeżeli przeczytasz mój stary wpis i posiadasz podstawową wiedzę o Webpacku to potrzebujesz tylko wytłumaczenia najważniejszych elementów na temat konfiguracji. A więc:
package.json
Wspomniałem już o komendach uruchomieniowych:
"scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production --watch" },
Dzięki temu można uruchomić Webpacka na 4 sposoby:
Pojedyncze uruchomienie
W trybie development czyli bez minifikacji i uglifikacji JS. To ułatwia debugowanie
yarn dev
Lub w trybie builda czyli wyjściowy plik JS jest nieczytelny i trudniej debugować
yarn build
Uruchomienie ciągłe
Czyli Webpack będzie tworzył nowego builda za każdym razem gdy dokonamy zmiany w JS lub CSS
yarn dev --watch yarn build --watch
Dla jasności te build’y o których mówię to pliki main.bundle.js i style.bundle.css.
postcss.config.js
PostCSS jest mega. Posiada masę narzędzi usprawniających pracę z CSS. Jeśli chcesz dodać jakiś konkretny moduł po prostu dodaj go do pliku konfiguracyjnego:
module.exports = { plugins: [ require('autoprefixer'), require('cssnano') ] }
A potem jeszcze zainstaluj odpowiedni pakiet np.
yarn add autoprefixer
Foldery z plikami
Zanim jeszcze zaczniesz konfigurować Webpacka pod siebie to pamiętaj o strukturze plików. Zmiana w pliku konfiguracyjnym Webpacka jest prosta ale po prostu to zaplanuj 🙂
Style z SASS’a są ładowane do JS’a za pomocą importu:
import '../sass/style.scss';
webpack.config.js
Poniżej opiszę najważniejsze fragmenty a na koniec cały plik z kodem:
Plik wejściowy
Tak podajesz ścieżkę do głównego pliku JS gdzie piszesz kod:
entry: [ './js/main.js' ]
Wyjściowy plik JS
Nazwa pliku jest chyba oczywista jednak argument w (__dirname, ‚dist’) sprawi, że pliki wyjściowe będą w katalogu dist tzn. dist/main.bundle.js. Plik CSS też tam wyląduje.
output: { path: path.resolve(__dirname, ''), filename: 'main.bundle.js' },
Linki w CSS
W stylach podajesz linki do obrazów lub czcionek. Webpack może modyfikować te linki co nie zawsze wychodzi mu najlepiej. Ja wolę po prostu powiedzieć mu, żeby zostawił te linki w spokoju…
loader: 'css-loader', options: { url: false, },
Czyszczenie folderu
Jeśli Twoje pliki wyjściowe lądują np. w folderze dist to zanim nastąpi nowa kompilacja zawartość tego folderu jest czyszczona (przydatne jeśli używasz mechanizm anti-cache i za każdym razem plik wyjściowy ma inną nazwę).
new CleanWebpackPlugin('dist', {} ),
Plik wyjściowy CSS
new MiniCssExtractPlugin({ filename: 'style.bundle.css', })
No to tak wygląda cały plik:
require('babel-polyfill'); require('whatwg-fetch'); const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: [ 'babel-polyfill', 'whatwg-fetch', './js/main.js' ], output: { path: path.resolve(__dirname, ''), filename: 'main.bundle.js' }, target: 'node', module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.scss$/, use: [ 'style-loader', MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, }, }, 'postcss-loader', 'sass-loader'] } ] }, plugins: [ new CleanWebpackPlugin('dist', {} ), new MiniCssExtractPlugin({ filename: 'style.bundle.css', }) ] };
Co więcej?
Jeśli używasz konfiguracji z mojego repo i wiesz co się tam dzieje, to praca z Webpackiem powinna pójść gładko.
Jak potrzebujesz więcej wypasionych funkcji Webpacka to możesz zacząć swoje poszukiwania od tego wpisu. Był filarem na którym oparłem własną pracę.
Podsumowanie
Dzisiaj dowiedziałeś/aś się jak skonfigurować Webpacka 4. Wiesz gdzie znaleźć kod konfiguracyjny i wiesz na które elementy zwrócić szczególną uwagę.
Ja widać Webpack żyje i ma się dobrze. Jeśli Twój aktualny projekt nie jest oparty na którymś z popularnych frameworków to warto skierować wzrok w stronę Webpacka.
Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?