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.

https://webpack.github.io/

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:

https://nodejs.org/en/

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 🙂

Bartek Cis

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?