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?
Cześć jestem Bartek.
Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.