MerixGames

15 grudnia 2015

/ code & tools

Chcesz zachować porządek w swoim kodzie JavaScript? Zaprzyjaźnij się z Webpackiem!

Dominik Łochyński

W ciągu ostatnich kilku lat strony internetowe są skutecznie wypierane przez aplikacje internetowe, co spowodowało znaczny wzrost ilości kodu JavaScript wysyłanego do przeglądarki. Rzeczą szczególnie ważną dla developera jest utrzymanie porządku w projekcie - jest to często wyznacznikm czytelności kodu. Jedną z najlepszych metod zachowania ładu w kodzie JavaScript jest rozbicie go na mniejsze moduły, w czym pomaga Webpack.

Czym jest Webpack?

Webpack to narzędzie, które rozwiązuje problem dzielenia kodu na moduły i pozwala łatwo zarządzać zależnościami występującymi między nimi. Dzięki temu developer może traktować swoją aplikację jako zbiór niezależnych modułów, które potem zostaną skompilowane i dostarczone do przeglądarki.

Główne założenia:

  • utrzymanie krótkiego czasu ładowania strony (szczególnie ważne dla dużych projektów);
  • podzielenie kodu na małe części, które później są ładowane na żądanie;
  • łatwość konfiguracji praktycznie każdej części narzędzia.

Jak działa Webpack?

Zdaniem Webpacka jest wychwycenie zależności w projekcie i stworzenie dla nich statycznych „paczek” z kodem, które potem są ładowane na żądanie.
Główne elementy Webpacka:

  • loaders - wykorzystywane do preprocesowania plików. Pozwalają scalić każde statyczne zasoby. Można dodawać własne loadery napisane w Node.js;
  • code splitting - pozwala na rozbijanie kodu na wiele części, które są ładowane asynchronicznie podczas działania aplikacji;
  • optimization - optymalizacja to ważny element WebpackA, pozwala zmniejszyć rozmiar pliku Javascript poprzez minifikację, czyli usunięcie duplikatów. Umożliwia również przystosowanie plików do cachowania poprzez użycie haszy.

Podstawowe polecenia

webpack

 Wykonuje wszystkie polecenia zawarte w pliku config przez programistę. Tworzy wersję plików, na których pracuje developer.

webpack -p

Wykonuje polecenia zawarte w pliku config. Tworzy paczkę plików gotową do użycia na serwerze produkcyjnym.

webpack –watch

Projekt jest budowany przy każdej zapisanej zmianie.

webpack-dev-server

Serwuje pliki z aktualnego katalogu

Instalacja Webpacka

Webpack instalowany jest z poziomu npm (Node Package Manger).
Aby zacząć korzystać z webpack należy:

  • zainstalować webpack globalnie:
npm install webpack -g
  • w folderze projektu stworzyć plik package.json:
npm init
  •  dodać Webpack do pliku zależności package.json:
npm install webpack -- save-dev
  • stworzyć plik konfiguracyjny (webpack.config.js), dla przykładu:
module.exports = { entry: './file.js', output: { path: __dirname, filename: 'bundle.js' } };

Po wykonaniu powyższych czynności Webpack jest zainstalowany i gotowy do użycia.

Przykłady

Stworzymy prosty projekt, który będzie budował aplikację i udostępniał ją na lokalnym IP poprzez localhost.

  1. Tworzymy folder na aplikację i wykonujemy kroki opisane w poprzednim podpunkcie dotyczącym instalacji
  2. Tworzymy plik index.html z pustym szablonem strony
  3. Do utworzonego przed chwilą pliku index.html dołączamy plik bundle.js poprzez <script src="bundle.js"></script>
    • Tworzymy plik styles.css i wpisujemy testowy styl, na przykład:
      body {
          background-color: #d97d34
      }
    • Dodajemy plik JavaScript content.js, gdzie wpisujemy:
      function Content() {
          console.log('Merixstudio');
      }
      
      module.exports = Content;
    • Dodajemy główny plik JavaScript main.js, gdzie będziemy dołączać zależności i wpisujemy:
      require("./style.css");
      var Content = require("./content.js");
      var content = new Content();
    • W pliku konfiguracyjnym webpack.config.js zmieniamy treść na:
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      module.exports = {
          entry: "./main.js",
          output: {
              path: __dirname,
              filename: "bundle.js"
          },
          module: {
              loaders: [{
                  test: /\.css$/,
                  loader: "style!css"
              }]
          },
          plugins: [
          new OpenBrowserPlugin({
              url: 'http://localhost:8080'
          })
          ]
      };
    • Instalujemy moduł open-browser-webpack-plugin, który jest odpowiedzialny za automatyczne otwieranie zbudowanej aplikacji w przeglądarce:
      npm install  open-browser-webpack-plugin --save-dev
    • Uruchamiamy konsolę w folderze projektu i wpisujemy:
      webpack-dev-server

Alternatywne narzędzia

Gulp  i Grunt

Najbardziej znane narzędzia, które mogą zastąpić Webpack to przede wszystkim Gulp i Grunt, o których przeczytać możecie w artykule „Gulp.js – co to jest i z czym to się je?”

Browserify

Browserify pozwala na używanie modułów CommonJS w przeglądarce. Pracując z tym narzędziem programista definiuje zależności, a Browserify je grupuje i składa w jeden plik JavaScript.

Definicja zależności wewnątrz projektu polega na użyciu require('./yourJsFile.js'). W ten sam sposób można również dołączać moduły z node_modules, które zostały  pobrane poprzez npm.

RequireJS

RequireJS to narzędzie wykorzystujące JavaScirpt, które odpowiedzialne jest za ładowanie modułów. Framework jest stworzony z myślą o przeglądarkach, jednak może być również używany w innych środowiskach (np. Node.js)  Używanie takiego narzędzia znacznie skraca czas ładowania strony oraz poprawia jakość kodu.

  RequireJS Browserify Webpack
Preprocesowanie TAK TAK TAK
Minifikacja TAK TAK TAK
Ładowanie paczek kodu na żądanie TAK NIE TAK
Spore użycie RAM NIE TAK TAK
Pluginy TAK TAK TAK

 

Podsumowanie

Webpack to doskonałe narzędzie do zarządzania zależnościami i grupowania ich w moduły - jest łatwy w konfigurowaniu i szybki w działaniu. Problemu też nie sprawy integracja różnych standardów definiowania modułów lub kompilowania innych języków (np. TypeScript) do kodu JavaScript. Jego głównym obszarem działania są przeglądarki lecz może on być wykorzystany również na innych płaszczyznach. Jest to doskonałe narzędzie ułatwiające pracę programiście, które sam bardzo polecam

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.