V minulom článku sme sa zoznámili s pojmom Webpack ako takým a jeho použitím. Dnes si tohoto pomocníka nainštalujeme. Medzičasom od vydania prvého článku už stihla vyjsť aj verzia 3.3.0, na ktorú sa v tomto článku aj zameriame Postup by ale viac-menej mal fungovať pre väčšinu verzií.

Jednou z mnoha vecí, ktoré robia Webpack výnimočným, a tak používaným je technológia, na ktorej je postavený. Na svoj beh používa node.js, čo je vlastne JavaScript s nadstavbou umožňujúcou jeho fungovanie na serveri. A keďže veľa webových stránok je postavených práve na tejto platforme, je výhodné použiť webpack na spájanie jednotlivých súborov skriptov, obrázkov, atď…, do celkov vytvorených na mieru pre daného návštevníka. Vo výsledku návštevník príjme od servera len to, čo naozaj využije, a to má za následok zrýchlenie načítavania a vykresľovania webovej stránky.

Inštalácia závislostí

Prvou vecou, ktorú je potrebné nainštalovať je Node. Ak používate Windows, alebo Mac OS, na stránke https://nodejs.org/en/download si stiahnite inštalátor a podľa pokynov nainštalujte na svoj server alebo počítač. Ak máte Linux s apt, inštalácia bude ešte o krok jednoduchšia. Stačí napísať do terminálu:

sudo apt install nodejs

Aby sme ale mohli do node.js pridávať moduly, pluginy a rôzne iné vychytávky ako Webpack, musíme doinštalovať systém na správu repozitárov npm (Node package manager). Ak ste Node inštalovali pomocou inštalátora z oficiálnej stránky, tento už npm obsahuje. Ak nie (napríklad v prípade Linuxu), npm si doinštalujete týmto príkazom:

sudo apt install npm

npm je vo svete najpoužívanejším správcom repozitárov pre node.js. Obsahuje neuveriteľné množstvo knižníc, pluginov a iných užitočných nástrojov, ktoré Vám uľahčia tvorbu nielen webov. Jeho použitie vrelo odporúčam aj pri ne-Node projektoch.

To, či sa Node spolu s npm nainštalovali správne vyskúšame pomocou príkazov:

node -v
npm -v

Ak sa programy nainštalovali správne, zobrazí sa číslo verzie, ktorú sme pridali. Ak sa nič nezobrazí, niekde pravdepodobne nastala chyba a skúste to znova.

npm je dobré po inštalácii aj nastaviť. Počiatočné nastavenie spustíme príkazom:

npm init

Vyplňte všetky údaje o ktoré Vás npm požiada a všetko je pripravené na inštaláciu samotného Webpacku!

Inštalácia Webpacku

Webpack sa inštaluje pomocou npm zadaním príkazu:

npm install webpack -g

Možno bude potrebné na niektorých systémoch použíť aj sudo.

Ak chcete nainštalovať Webpack len lokálne, to znamená len pre daný projekt, do príkazu pridajte --save-dev. Táto vlastnosť tiež pridá Webpack do súboru package.json ako závislosť.

Tak a sme na konci. Webpack úšpešne nainštalovaný a my sme pripravení začať ho používať. Na základy používania sa pozrieme v ďalšej časti.