Czym jest Webpack?<\/h2>\n

Webpack to bundler, czyli narz\u0119dzie, kt\u00f3re potrafi spakowa\u0107 wiele r\u00f3\u017cnych format\u00f3w do jednego pliku JavaScript. Nada mu rozszerzenie .js, a zrobi to poprzez przekszta\u0142cenie i minifikacj\u0119 niepotrzebnego kodu.<\/p>\n

Czy go potrzebujesz?<\/h2>\n

Je\u015bli jeste\u015b w trakcie budowy du\u017cej aplikacji ze skomplikowanym frontendem, kt\u00f3ra posiada wiele obraz\u00f3w, font\u00f3w, element\u00f3w CSS, to Webpack znacznie u\u0142atwi Ci prac\u0119. Je\u015bli jednak aplikacja, nad kt\u00f3r\u0105 pracujesz, jest ma\u0142a, czyli opiera\u0107 si\u0119 b\u0119dzie na jednym pliku JavaScript, bez obraz\u00f3w, to Webpack mo\u017ce tylko komplikowa\u0107 prac\u0119.<\/p>\n

Czym jest dependency graph?<\/h2>\n

Webpack tworzy dla Ciebie dependency graph. Jest to zasada matematyczna, w kt\u00f3rej zale\u017cno\u015bci obiekt\u00f3w r\u00f3\u017cnego pochodzenia l\u0105cz\u0105 si\u0119.<\/p>\n

W praktyce kodowania oznacza to lepsze rozwi\u0105zanie ni\u017c te stosowane dawniej. Kiedy\u015b zale\u017cno\u015bci JavaScriptu uk\u0142ada\u0142o si\u0119 w okre\u015blonej kolejno\u015bci. Kolejn\u0105 metod\u0105 by\u0142o sprz\u0119ganie i minifikacja skrypt\u00f3w poleceniem build. Rozwi\u0105zanie wci\u0105\u017c dalekie od idealnego, poniewa\u017c w dalszym ci\u0105gu polega ono na r\u0119cznym ustalaniu kolejno\u015bci \u0142\u0105czonych plik\u00f3w. Co wi\u0119cej, z tego powodu kod m\u00f3g\u0142 komunikowa\u0107 si\u0119 tylko przez zmienne globalne.<\/p>\n

Teraz jednak mo\u017cna u\u017cywa\u0107 modu\u0142\u00f3w CommonJS lub ES6, aby stworzy\u0107 wy\u017cej wymieniony dependency graph. U\u017cywa si\u0119 ma\u0142ych plik\u00f3w, kt\u00f3re same okre\u015blaj\u0105 swoje potrzeby. Przegl\u0105darka, kt\u00f3ra nie wspiera polecenia require() wykorzysta plik po spakowaniu przez Webpacka i b\u0119dzie w stanie z nim wsp\u00f3\u0142pracowa\u0107.<\/p>\n

Istniej\u0105 oczywi\u015bcie narz\u0119dzia takie, jak Browserify, kt\u00f3re rozwi\u0105zuj\u0105 ten problem. W czym jednak lepszy b\u0119dzie Webpack?<\/p>\n

Czym zajmuje si\u0119 Webpack?<\/h2>\n

Webpack pozwala u\u017cywa\u0107 polecenia require() w lokalnych zasobach sta\u0142ych, czyli w plikach, kt\u00f3re nie s\u0105 JavaScript. Je\u015bli u\u017cyjesz Webpacka, wyszuka on w kodzie wszystkie wezwania require() i wy\u015ble je do fileloadera. Ten z kolei zamieni require() na URL. Mo\u017cesz skonfigurowa\u0107 w Webpacku rodzaj URL-a, \u00a0jaki ma powsta\u0107. Opr\u00f3cz tego fileloader za\u0142aduje plik do ustalonego folderu. Po wgraniu zawarto\u015bci folderu do CDNa (Content Delivery Network) i po uruchomieniu kodu, obraz z pewno\u015bci\u0105 za\u0142aduje si\u0119 na stronie www.<\/p>\n

Co wa\u017cne Webpack nie tylko stworzy plik JavaScirpt. Mo\u017ce r\u00f3wnie\u017c stworzy\u0107 kopie zasob\u00f3w sta\u0142ych na okre\u015blon\u0105 przez Ciebie lokalizacj\u0119 zewn\u0119trzn\u0105. Opr\u00f3cz tego Webpack stworzy plik JavaScript w taki spos\u00f3b, aby require() nigdy nie musia\u0142o by\u0107 u\u017cyte w przegl\u0105darce. Zamieni polecenie na skrypt Javascript i dopiero on zostanie wykorzystany.<\/p>\n

W czym Webpack jest lepszy od Grunt, Gulp czy Browserify?<\/h2>\n

Grunt i Gulp to narz\u0119dzia do pracy z plikami i nie maj\u0105 zdolno\u015bci tworzenia prawdziwego dependency graph. Browserify z kolei to narz\u0119dzie do przekszta\u0142cania require() do polece\u0144 wywo\u0142ania dzia\u0142aj\u0105cych w przegl\u0105darce. Tworzy on dependency graph jedynie dla kodu \u017ar\u00f3d\u0142owego. Webpack \u0142\u0105czy te cechy.<\/p>\n

Jakie s\u0105 zalety Webpacka?<\/h2>\n

\n
1. \u00a0Usuwa niepotrzebne zasoby sta\u0142e. Ogromna zaleta dla u\u017cytkownik\u00f3w CSS. U\u017cywasz obraz\u00f3w i CSS w folderze dist\/, kt\u00f3re fatycznie s\u0105 Ci potrzebne.<\/li>\n
2. \u0141atwiejsze dzielenie kodu. Webpack stworzy dla Ciebie konkretny plik .css, kt\u00f3ry zmniejszy rozmiar pliku .js.<\/li>\n
3. Kontrolujesz spos\u00f3b, w jaki zasoby s\u0105 przetwarzane. Je\u015bli obraz jest poni\u017cej okre\u015blonej wagi, mo\u017cesz u\u017cywa\u0107 kodu base64 i wprowadzi\u0107 go bezpo\u015brednio do JavaScript. Je\u015bli plik JSON jest za du\u017cy, mo\u017cesz za\u0142adowa\u0107 go z URL.<\/li>\n
4. Stabilna praca. Nie b\u0119dziesz w stanie przypadkowo wprowadzi\u0107 kodu bez obrazu.<\/li>\n
5. Webpack z pewno\u015bci\u0105 na pocz\u0105tku Ci\u0119 spowolni, ale u\u017cywany poprawnie przyspieszy prac\u0119 w przysz\u0142o\u015bci.<\/li>\n<\/ol>\n

   Jakie s\u0105 wady Webpacka?<\/h2>\n

   Nie ma sensu ukrywa\u0107, \u017ce rozwi\u0105zanie to ma swoje wady.<\/p>\n

   \n
   1. Dokumentacja jest napisana skomplikowanym j\u0119zykiem.<\/li>\n
   2. Kod \u017ar\u00f3d\u0142owy jest trudny w opanowaniu, szczeg\u00f3lnie dla pocz\u0105tkuj\u0105cych.<\/li>\n
   3. Konfiguracja Webpacka jest trudna dla niezaawansowanych u\u017cytkownik\u00f3w. Lepiej wi\u0119c spojrze\u0107 na gotowe przyk\u0142ady.<\/li>\n
   4. Trudna sk\u0142adnia w kodzie, kt\u00f3ra wyst\u0119puje w ca\u0142ej dokumentacji, a nie posiada wielu wyja\u015bnie\u0144.<\/li>\n<\/ol>\n

      Czym jest dev server?<\/h2>\n

      Dev server to wbudowana aplikacja dla kodowania lokalnego. Umo\u017cliwia ona podgl\u0105d zmian w kodzie w czasie rzeczywistym, za darmo. W przypadku du\u017cych projekt\u00f3w taka pomoc jest nieoceniona.<\/p>\n

      Tradycyjne programowanie na frontendzie polega jedynie na zmiennych globalnych. Regu\u0142y CSS istniej\u0105 w globalnej przestrzeni nazw. Ich stosowanie polega na r\u0119cznym ustawianiu selektor\u00f3w. Bardzo trudno si\u0119 nie pomyli\u0107 w przypadku globalnie definiowanych regu\u0142 lub obraz\u00f3w. Dependency graph przychodzi z pomoc\u0105 w formie Webpacka. Automatyzacja tego procesu w przypadku du\u017cego projektu mo\u017ce okaza\u0107 si\u0119 ogromn\u0105 oszcz\u0119dno\u015bci\u0105 czasow\u0105, nawet je\u015bli wymaga wcze\u015bniejszej konfiguracji.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Czym jest Webpack? Webpack to bundler, czyli narz\u0119dzie, kt\u00f3re potrafi spakowa\u0107 wiele r\u00f3\u017cnych format\u00f3w do jednego pliku JavaScript. Nada mu rozszerzenie .js, a zrobi to poprzez przekszta\u0142cenie i minifikacj\u0119 niepotrzebnego kodu. Czy go potrzebujesz? Je\u015bli jeste\u015b w trakcie budowy du\u017cej aplikacji ze skomplikowanym frontendem, kt\u00f3ra posiada wiele obraz\u00f3w, font\u00f3w, element\u00f3w CSS, to Webpack znacznie u\u0142atwi […]<\/p>\n","protected":false},"author":7,"featured_media":4283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[197],"tags":[18,10],"yoast_head":"\n