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.

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?