Wprowadzenie

Kurs, który masz przed soba, wprowadzi Cie od podstaw w swiat nowoczesnego podejscia do pracy z kodem JavaScript. Poznasz potezne narzedzie, jakim jest webpack 2. Umiejetnosc sprawnego wykorzystania webpacka pozwoli Ci pracowac z technologiami front-endowymi duzo sprawiej, wygodniej i przyjemniej. Byc moze miales juz do czynienia z tzw. automatorami zadan. Do najpopularniejszych naleza Gulp.js i Grunt.js. To swietne narzedzia, które odpowiednio skonfigurowane, pozwalaja znacznie uproscic prace nad rozwojem aplikacji internetowych. W ich przypadku, istotny jest jednak sposób, w jaki operuja one na plikach. Dzieje sie to bowiem w sposób liniowy, gdzie pewien zestaw plików, przepuszczamy przez kolejne transformacje. Dobrym przykladem moze byc kompilacja plików “.scss” do kodu CSS, a takze pózniejsza minifikacja tego kodu. Na poczatku wskazujemy pliki wejsciowe, nastepnie konfigurujemy odpowiedni plugin, który zajmie sie kompilacja Sass, a na koncu kolejny plugin, który zminifikuje kod. Innym przykladem moze byc laczenie wielu plików JavaScript w jeden czy optymalizacja obrazków. I choc automatory zadan sa wciaz bardzo przydatne, to my, jako programisci, powinnismy zawsze wybierac odpowiednie narzedzie, do odpowiedniego zadania. Do jakich zatem zadan przydatny bedzie webpack i czym rózni sie od wspomnianych automatorów zadan?

Idea Webpacka

Choć można by powiedzieć, że webpack jest kolejnym automatorem zadań, to główna idea jego działania jest nieco inna, a samo narzędzie określane jest jako "module bundler". Oznacza to, że głównym zadaniem webpacka jest tworzenie tzw. "bundli" kodu, a więc jednego lub wielu plików wynikowych. Co ciekawe, webpackowi wystarczy podać na starcie wyłącznie jeden plik, a narzędzie to zbuduje na jego podstawie tzw. drzewo zależności i połączy inne pliki w jeden. Skąd jednak webpack wie, jakie pliki dołączyć do modułu wynikowego? Odpowiedź na to pytanie jest prosta - z importów, które znajdują się wewnątrz pliku wejściowego i kolejnych plików, które będą analizowane. Mowa tutaj o importach w kilku standardach. Narzędzie to rozumie wiele różnych zapisów, np. CommonJS, AMD czy syntax wprowadzony do języka JavaScript wraz ze standardem ES6 (EcmaScript 2015). I najczęściej pracuje się właśnie z tym ostatnim. Możliwość korzystania z modułów, to niezwykle przydatna cecha dowolnego języka 2 programowania, który taki zapis wspiera. Dzięki niemu możemy podzielić kod na wiele plików (modułów), a następnie z każdego z nich wyeksportować jedną lub wiele funkcjonalności, które możliwe będą do zaimportowania w innym module. I choć wraz ze standardem ES6, do specyfikacji języka wprowadzone zostały moduły, to dopiero niedawno zaczęły być one implementowane w przeglądarkach internetowych. Niestety minie jeszcze wiele czasu, nim będą one na tyle szeroko wspierane, by móc z nich korzystać bez dodatkowych transformacji kodu.I tutaj właśnie pojawia się webpack, który rozumie zapis modułów i pozwala na ich podstawie zbudować jeden lub kilka plików w taki sposób, aby po uruchomieniu aplikacji, wszystko działało poprawnie. Dzięki temu mamy możliwość tworzenia modułowego kodu, który automatycznie zostanie "poskładany" w odpowiednie pliki, które następnie uruchomimy np. w przeglądarce internetowej. I choć praca z modułami to główne zadanie webpacka, to jego możliwości sięgają dużo dalej, co jeszcze bardziej przemawia za potrzebą wykorzystania tego narzędzia w codziennej pracy Web Developera.

Tworzenie nowoczesnego workflow

W kursie tym poznasz webpacka od podstaw. Zobaczysz jak zainstalować to narzędzie, a także jak stworzyć niezależny plik konfiguracyjny. Wraz z każdą następną lekcją, w pliku tym dodawać będziemy kolejne elementy nowoczesnego workflow. Zajmiemy się między innymi kompilacją kodu ES6 do kodu w standardzie ES5 z użyciem Babel, co pozwoli na uruchomienie naszej aplikacji również w starszych przeglądarkach internetowych. Następnie dowiesz się jak korzystać z lokalnego serwera, który po zmianie czegokolwiek w plikach źródłowych, automatycznie wykona nowy build i odświeży okno przeglądarki. Dzięki temu praca będzie dużo szybsza i przyjemniejsza. Dowiesz się również jak instalować moduły z użyciem npm, a także jak korzystać z tzw. "npm scripts". Pracować będziemy również z tzw. "loaderami", które pozwolą na przetwarzanie różnych typów plików, nie tylko tych z rozszerzeniem ".js". W tym celu do prostej aplikacji dodamy możliwość wykorzystania templatingu Handlebars.js, co pozwoli nam na tworzenie szablonów w zupełnie oddzielnych plikach, a następnie ich importowanie w kodzie JavaScript, w dowolnym module naszej aplikacji. Oprócz pracy z kodem JavaScript, zobaczysz również jak pracować z kodem Sass. Dzięki temu pliki z rozszerzeniem ".scss" imprtować będziemy mogli jak dowolny inny moduł naszej aplikacji. Kod zostanie wówczas automatycznie przekompilowany do CSS, a dzięki odpowiedniej konfiguracji również automatycznie wstawiony do pliku "index.html".

Zaawansowanie użycie Webpacka

W kursie tym poznasz również bardziej zaawansowane techniki pracy z webpackiem. Zobaczysz między innymi jak tworzyć wiele "bundli" jednocześnie czy jak asynchronicznie ładować moduły tylko wtedy, gdy użytkownik Twojej aplikacji podejmie jakąś akcję. Omówimy również koncepcję "tree shaking" czyli eliminowania kodu, który nie został nigdzie użyty, a także wykorzystamy tzw. "sourcemapy", które ułatwią debugowanie przetranspilowanego kodu. Jedną z lekcji poświęcimy na przygotowanie workflow pod pracę nad biblioteką JavaScript. Zobaczysz w jaki sposób dodać do swojego kodu odpowiednie polyfille, aby zadziałał on również w starszych przeglądarkach internetowych, a także dowiesz się, jak wyeksportować bibliotekę w standardzie UMD, aby mogła być umieszczana bezpośrednio na stronie lub importowana jako moduł gdzieś indziej. Webpack świetnie nadaje się do pracy z biblioteką React, dlatego w jednej z lekcji zobaczysz, jak przygotować ciekawy workflow do pracy z tą technologią. Dowiesz się jak transpilować kod JSX, a także jak pracować z modułami CSS. Na zakończenie kursu omówimy również współpracę webpacka z automatorem zadań Gulp.js. Jeśli zatem masz przy wybranej aplikacji już swój własny workflow, stworzony z użyciem Gulpa, ale dodatkowo chcesz wykorzystać potencjał webpacka np. do tworzenia bundli kodu z wielu modułów - jak najbardziej możesz to zrobić. Webpack w ostatnich miesiącach zyskał ogromne uznanie, czego dowodem jest jego wykorzystanie przez twórców frameworka Angular czy biblioteki React. I choć webpack świetnie nada się do pracy z tymi technologiami, to możesz go również dowolnie skonfigurować pod swoją własną aplikację i zdobycie takiej wiedzy jest właśnie celem tego kursu. Być może się również domyślasz, że wpisanie do CV takiej umiejętności, będzie bardzo mile widziane przez potencjalnych pracodawców.

Dla kogo jest ten kurs?

Kurs ten jest dla wszystkich osób, które mają już doświadczenie w tworzeniu stron i aplikacji internetowych z użyciem HTML, CSS i JavaScript. Mile widziana, acz nieobowiązkowa, będzie róznież znajomość preprocesora Sass czy podstaw standardu ES6. Jeśli zatem chciałbyć zacząć pracować z tymi technologiami w sposób nowoczesny, skupiając się na budowaniu aplikacji i wykorzystując przy tym nowy zapis ES6 oraz możliwość korzystania z modułów - webpack jest na pewno narzędziem, którego szukasz!

Dlaczego wybrać właśnie ten kurs?

1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.