Webpack: Korzystanie z modułów bez importu

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

Idea Webpacka

Tworzenie nowoczesnego workflow

Zaawansowanie użycie Webpacka

Dla kogo jest ten kurs?