Druhá časť série o Webpacku, modernom pomocníkovi pre front-end developera.
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.