Kurs Webpack
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?
23 lekcji
3h 4min
5 (4 oceny)
Webpack - Wydajna praca z JavaScript
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!
Czego się nauczysz?
-
Omówienie koncepcji kryjacych sie za webpackiem
-
Instalacja i konfiguracja narzedzia
-
Praca z tzw. loaderami
-
Techniki transpilowania kodu ES6 do ES5
-
Tworzenie workflow pod budowe bibliotek
-
Praca z kodem Sass i CSS
-
Przykladowy workflow dla pracy z React
-
Wspólpraca webpacka z Gulp.js
Zawartość
Webpack
4 rozdziały 23 lekcji 3h 4min
-
Wstęp do kursu
20min
Omówienie testowego projektu
7min
-
Podstawy pracy z webpackiem
1h 12min
Instalacja webpacka
5min
Plik konfiguracyjny
8min
Transpilacja ES6 do ES5
9min
Korzystanie z webpack-dev-server
6min
Importowanie modułów z npm
5min
Praca z Handlebars
11min
Kompilacja Sass do CSS
8min
Praca z obrazkami w CSS
13min
Korzystanie z pluginów
7min
-
Zaawansowane techniki pracy
1h 29min
Automatyczne wstawianie styli i skryptów
5min
Tworzenie wielu bundli
14min
Prosty serwer do podglądu builda
2min
Asynchroniczne ładowanie modułów
11min
Tree shaking
3min
Korzystanie z modułów bez importu
3min
Tworzenie bibliotek
17min
Workflow z React
16min
Współpraca z Gulp.js
12min
-
Zakończenie
3min
Podsumowanie
3min
Autor kursu
Piotr Palarz
Web Developer
Średnia ocen autora: 5
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Bartosz
7 lipca 2021
Dominik Mendlikowski
8 lipca 2021
Adrian Kalinowski
15 listopada 2021
Adam Wasik
15 czerwca 2022
Kurs Webpack
-
23 lekcji wideo
-
3h 4min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
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!
Wiedza ekspertów
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.
Praktyczne przykłady
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ń.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w Webpack
-
23 lekcji wideo
-
3h 4min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowoczesny React
Michał Jabłoński
Podstawy pracy z Cursor IDE
Adam Gospodarczyk
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk