- 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- konfiguracja i automatyzacja kodu na start.
W poprzednim tygodniu omawiałem pierwsze narzędzie do automatyzacji programowania we Front-Endzie czyli GULP. Dzisiaj skupię się na Webpacku czyli jak zainstalować i skonfigurować środowisko do pracy z użyciem Webpack. Zapraszam do lektury 🙂
Czym jest Webpack?
Webpack jest narzędziem programistycznym określanym jako Bundler i w odróżnieniu od Task Runnerów (np. Gulp) jego możliwości są nieco większe. Więcej na ten temat napiszę w oddzielnym artykule. Dla naszych potrzeb Webpack może z powodzeniem zastąpić Gulpa gdyż wykonuje większość podstawowych czynności.
Automatyzacja pisania kodu.
Po co co w ogóle używać takich zabawek przy programowaniu? Ułatwiają i przyśpieszają znacząco naszą pracę. Nie wykonujemy manualnie tzw. czynności pobocznych np. przeładowanie przeglądarki. Pisałem na ten temat trochę więcej w poprzednim wpisie o Gulpie.
Konfiguracja Webpack’a.
Bez przesadnego wstępu przejdę do konfiguracji Webpacka. Jak ktoś czytał (wiem wiem znowu ten sam link) wpis o Gulpie to będzie mu łatwiej poradzić sobie z Webpackiem. Teraz jak zwykle wyjaśnię wszystko krok po kroku 🙂
1. Zainstaluj NodeJS.
Tradycyjnie zanim zabierzemy się za cokolwiek potrzebny nam Node Package Manager czyli npm. Instalujemy do tego NodeJS ze strony poniżej:
Następnie stwórz folder z projektem i dostań się tam w terminalu przy użyciu komendy:
cd twoj/folder/z/projektem
2. Stwórz plik package.json
W folderze głównym projektu stwórz plik package.json przy użyciu komendy:
npm init -y
W odróżnieniu od Gulpa przy Webpacku będziemy edytować ten plik.
3. Zainstaluj Webpacka.
Zrób to przez wpisanie komendy:
npm install webpack --save-dev
Po zakończeniu zobaczysz folder node_modules. Tam są wszystkie domyślne moduły/pluginy jak i te które będziesz później instalować.
4. Stwórz strukturę folderów projektu.
Czyli porządek w naszym projekcie. Wszystko będzie dokładnie w tym miejscu gdzie chcemy. Trzymajny prostej się np. takiej konwencji:
—/build – w tym folderze piszemy nasze CSSy i JSy
—/sass
-styles.scss – główny plik w Sassie, jeśli używasz np. BEM to importuj do niego wszystkie pliki, stwórz plik manualnie
– index.js – w tym pliku piszemy JSy, podobnie z importem innych plików .js, stwórz plik manualnie
—/app – w tym folderze będzie nasza aplikacja
– index.html – tu piszemy nasz html, stwórz plik manualnie
– bundle.js – kod JS skompilowany przez Webpacka, to się tworzy automatycznie
– main.bundle.css – ten plik stworzy się automatycznie po konwersji z formatu .scss
—/node_modules – tego nie ruszać bez potrzeby
– package.json – plik konfiguracyjny pakietów projektu, będziemy go edytować
– webpack.config.js – plik konfiguracyjny Webpack, stwórz go manualnie
5. Uruchomienie Webpacka.
Skoro mamy już projekt z grubsza uporządkowany zajmijmy się odpaleniem Webpacka. Aby to zrobić należy wyedytować 2 pliki tzn. package.json i webpack.config.js który przed chwilą stworzyliśmy (lub robimy to teraz w głównym folderze projektu).
Najpierw dodajemy następujący kod do webpack.config.js:
module.exports = { entry: ['./app/index.js'], output: { path: 'C://sciezka/do/twojego/projektu/build', filename: 'bundle.js' } }
Powyższy kod jest prosty. Definiujesz który plik ma być konwertowany i gdzie ma się zapisać czyli definiujesz input i output. W inpucie mogą być importy z wielu innych plików, webpack powinien sobie poradzić z tym. Output to po prostu ścieżka bezpośrednia do folderu z twoim projektem i nazwa pliku wyjścia.
To teraz wyedytujmy package.json, dodaj do niego coś takiego:
"scripts": { "build": "webpack" }
Po dodaniu tego kodu wpisz w terminalu:
npm run build
Twój plik bundle.js powinien się wygenerować. Tworzysz dodatkowo plik index.html i oczywiście linkujesz ten plik.
6. Dodawanie tasków.
Tutaj tak samo jak w Gulpie dodajemy funkcjonalności do Webpacka. Skupię się tutaj tylko na tych najważniejszych do pisania kodu czyli automatyczne przeładowanie przeglądarki, obsługa ES6 i preprocesora CSS jakim jest np. SASS. Każdą funkcjonalność omówię osobno a potem wkleję kompletny kod. Tak dla leniwych 🙂
Przeładowanie przeglądarki.
W tym celu dodajemy serwer lokalny. Zainstaluj plugin:
npm install webpack-dev-server --save-dev
Dodaj kod do webpack.config.js:
module.exports = { devServer: { port: 3000, contentBase: './build', inline: true //automatyczny update } }
Co się tu stało? Ustaliliśmy port serwera na 3000, wskazaliśmy folder źródłowy no i na koniec ustawiliśmy automatyczne odświeżanie.
Teraz dodaj do package.json:
"scripts": { "build": "webpack", "start": "webpack-dev-server" }
Jak w przeglądarce wpiszesz http://localhost:3000/ i masz uruchomionego Webpacka w terminalu powinna być widoczna Twoja aplikacja. Webpacka uruchamiasz za pomocą komendy:
npm start
SASS
Aby ułatwić pisanie kodu CSS dodamy do tego SASSa. Najpierw zainstaluj potrzebne moduły za pomocą komendy:
npm install css-loader node-sass sass-loader extract-text-webpack-plugin
Standardowo dodaj do webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: ['./app/index.js', './app/sass/style.scss'], module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract({ loader: 'css-loader?importLoaders=1', }), }, { test: /\.(sass|scss)$/, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) }] }, plugins: [ new ExtractTextPlugin({ filename: './[name].bundle.css', allChunks: true, }) ], }
Powyższa sentencja po prostu zbiera wszystkie pliki .scss (w tym wypadku jeden) ze wskazanego folderu, konwertuje na .css i w końcu łączy w jeden plik.
W pliku package.json nic nie zmieniamy.
Wpisz komendę:
npm run build
Jeśli wszystko zostało zrobione poprawnie to powinien się wygenerować plik.css który podpinamy pod nasz plik .html
Uff… Przerwa na ciastko 🙂
Obsługa ES6
Pisanie w nowej wersji JavaScript to już dzisiaj standard więc dobrze gdyby Webpack obsługiwał to składnię. Dzieje się tak za pomocą modułu Babel. Instalujemy go za pomocą komendy:
npm install babel-core babel-loader babel-preset-es2015 babel-polyfill --save-dev
Następnie dodajemy do pliku webpack.config.js:
module.exports = { module: { loaders: [{ loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ }] } }
Ten kod mówi aby konwertować ES6 ze wszystkich plików .js w projekcie poza folderem node_modules gdzie jest ich cała masa i na nich zasadniczo nie pracujemy.
Czas na plik package.json, dodaj:
"babel": { "presets": [ "es2015" ] }
I to by było w zasadzie na tyle jeśli chodzi o ES6.
Wszystkie kawałki razem wzięte.
No to teraz tak powinnny wyglądać pliki konfiguracyjne po wykonaniu wszystkich kroków:
webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: ['./app/index.js', './app/sass/style.scss'], output: { path: 'C://sciezka/do/twojego/projektu/build', filename: 'bundle.js' }, module: { loaders: [{ loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ }, { test: /\.css$/, loader: ExtractTextPlugin.extract({ loader: 'css-loader?importLoaders=1', }), }, { test: /\.(sass|scss)$/, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) } ]}, plugins: [ new ExtractTextPlugin({ filename: './[name].bundle.css', allChunks: true, }) ], devServer: { port: 3000, contentBase: './build', inline: true //automatyczny update } }
package.json
{ "name": "Webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "start": "webpack-dev-server" }, "babel": { "presets": [ "es2015" ] }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.1.0", "babel-polyfill": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^2.1.2", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "webpack": "^3.0.0", "webpack-dev-server": "^2.5.0" } }
Oczywiście wersje poszczególnych modułów mogą się różnić jednak chodzi mi tutaj o strukturę 🙂 Odpalasz wszystko komendą:
npm start
Tak właśnie wygląda podstawowa konfiguracja Webpacka która wystarczy do pracy z czystym JSem. Oczywiście do tego można dodać o wiele więcej jednak to innym razem.
Webpack vs. Gulp
Jak widać obydwa narzędzia wykonują podobne czynności. Które mi się bardziej podoba?
Webpack wydaje mi się łatwiejszy w konfiguracji. Subiektywna ocena ale coś w tym jest.
Webpack nie wysypuje się po popełnieniu błędu w kodzie tak jak Gulp.
Webpack jest lepszy w debugowaniu bo daje mi wyraźne komunikaty co i gdzie jest źle. W Gulpie komunikaty błędów są takie klasyczne…
Te trzy proste kwestie przemawiają za tym, że wolę pracować z Webpackiem poza tym jest on niezbędny (chyba?) jeśli chcemy pracować z Reactem i na nim opiera się też Angular. Gulp może być dodatkiem ale warto znać Webpacka.
Podsumowanie.
Mam nadzieję, że dzisiejszy wpis pomógł Ci postawić pierwsze kroki z Webpackiem. Jeśli planujesz swoją karierę jako Web Dev to jeszcze napewno poznacie się nieco lepiej 😛
W następnym artykule z tej serii o automatyzacji napiszę co nieco o Webpacku 2 i będzie recenzja kursu na ten temat który wpadł mi w ręce 🙂
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?