Kurs Webpack

Wprowadzenie

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

15 ocen

Lubię to! 336

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?

  1. Omówienie koncepcji kryjacych sie za webpackiem
  2. Instalacja i konfiguracja narzedzia
  3. Praca z tzw. loaderami
  4. Techniki transpilowania kodu ES6 do ES5
  5. Tworzenie workflow pod budowe bibliotek
  6. Praca z kodem Sass i CSS
  7. Przykladowy workflow dla pracy z React
  8. Wspólpraca webpacka z Gulp.js

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ń.

Recenzje Kurs Webpack

5

15 dodanych ocen

2017-06-26

Świetny kurs. Szybko, jasno i systematycznie. Polecam serdecznie.

Jakub Przetocki

2017-06-26

polecam

Lukasz Zolnik

2017-06-27

Super kurs dla osób rozpoczynających przygodę z webpack, opis instalacji jak i podstawowych poleceń jest bez zarzutów :). Polecam.

Marcin Ciszek

2017-07-03

Bardzo dobry kurs, chodź trochę mi zabrakło omówienia opcji kopiowania assetów statycznych w taki sposób by zachować hierarchię katalogów, oraz kilku opcji na dev-servera jak --hot czy --inline

Piotr Stachurski

2017-07-17

Dobre, po prostu dobre wprowadzenie do Webpacka. Byłoby bardzo dobre, gdyby nie zabrakło wątku z testowaniem. Uważam, że dodatkowe 15-20 minut poświęcone porządnej konfiguracji do testów uczyniłoby cenę adekwatną. Dogranie do kursu materiału uzupełniającego byłoby nieoczekiwaną acz bardzo miłą niespodzianką.

Jakub Szlenk

2017-07-18

Bardzo dobry kurs. Dzięki! Czekam na kolejne.

Grzegorz Szymkowiak

2017-07-30

Bardzo ciekawy kurs!

Lukasz S Pierwola

2017-09-08

Bardzo dobry i przemyślany kurs. Chociaż tak jak wspomniało już kilka osób brakuje paru drobnych elementów, które warto dograć do tego kursu aby był kompletny. Chyba, że powstanie kolejna część. Może ktoś z eduweb odpowie ?

Tomek Duralek

2017-10-16

Miałem kilka podejść do Webpacka, no ale w końcu udało mi się zrozumieć to, dzięki temu kursowi. Teraz tylko wejść na poziom wyżej, żeby wszystko mi się zautomatyzowało :)

Mikołaj Lewandowski

2017-10-27

Kurs jak najbardziej oceniam na 5. Polecam!!!

Tomasz Jasionkowski

2018-05-30

Proponuję uaktualnić kurs, albo chociaż kilka części. Dużo się zmieniło od Webpacka 2 :)

Szymon Krysztofiak

2018-11-16

Pewne rzeczy już są nieaktualne, niemniej kurs dalej warty obejrzenia

Damian Sowinski

2019-03-28

Kurs bardzo dobry, można sporo się dowiedzieć :)

Mateusz Mączyński

2019-09-15

Świetny, kompaktowy materiał idealny na rozpoczęcie przygody z Webpack. Polecam

Róża Lewińska-Kuchta

2019-11-14

Świetne wprowadzenie do Webpacka! Polecam

Ernest Sadowski

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Piotr Palarz

Czas: 3 godziny

Wersja:

  • Pliki źródłowe
  • Certyfikat Ukończenia
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół

Wstęp do kursu

  • Wprowadzenie

  • Czym jest webpack?

  • Omówienie testowego projektu

Podstawy pracy z webpackiem

  • Instalacja webpacka

  • Plik konfiguracyjny

  • Transpilacja ES6 do ES5

  • Korzystanie z webpack-dev-server

  • Importowanie modułów z npm

  • Praca z Handlebars

  • Kompilacja Sass do CSS

  • Praca z obrazkami w CSS

  • Korzystanie z pluginów

Zaawansowane techniki pracy

  • Automatyczne wstawianie styli i skryptów

  • Tworzenie wielu bundli

  • Prosty serwer do podglądu builda

  • Asynchroniczne ładowanie modułów

  • Tree shaking

  • Korzystanie z sourcemap

  • Korzystanie z modułów bez importu

  • Tworzenie bibliotek

  • Workflow z React

  • Współpraca z Gulp.js

Zakończenie

  • Podsumowanie