Pierwsze kroki z Webpack [With Example Project]

Pakiet internetowy jest pakiet modułów co ułatwia budowanie złożonych aplikacji JavaScript. Zdobył poważną trakcję, ponieważ społeczność React wybrała go jako główne narzędzie do budowania. Pakiet internetowy jest ani kierownik pakietu, ani biegacz zadań ponieważ używa innego (bardziej zaawansowanego) podejścia, ale jego celem jest również skonfigurować dynamiczny proces budowania.

Pakiet Webpack działa z JavaScriptem waniliowym. Możesz go użyć spakuj statyczne zasoby aplikacji, takie jak obrazy, czcionki, arkusze stylów, skrypty w jednym pliku dbanie o wszystkie zależności.

Nie będziesz potrzebował pakietu internetowego, aby stworzyć prostą aplikację lub stronę internetową, na przykład taką, która ma tylko jeden plik JavaScript i jeden plik CSS oraz kilka obrazów, ale może być ratunkiem dla życia bardziej złożona aplikacja z kilkoma zasobami i zależnościami.

Webpack vs. run runners vs. Browserify

W jaki sposób układa się pakiet Webpack w porównaniu do innych narzędzi do budowania takie jak Grunt, Gulp lub Browserify?

Grunt i Gulp to biegacze zadań. W ich pliku konfiguracyjnym określ zadania, a biegacz zadania je wykonuje. The przepływ pracy biegacza zadania w zasadzie wygląda tak:

Jednak Webpack to pakiet modułów który analizuje cały projekt, ustawia drzewo zależności, i tworzy dołączony plik JavaScript że służy do przeglądarki.

Browserify jest bliżej Webpack niż biegaczy zadań, jak również tworzy wykres zależności ale robi to tylko dla modułów JavaScript. Pakiet internetowy idzie o krok dalej i nie tylko łączy kod źródłowy, ale także inne aktywa takie jak obrazy, arkusze stylów, czcionki itp.

Jeśli chcesz wiedzieć więcej na temat jak Webpack porównuje się z innymi narzędziami do budowania, Polecam ci dwa artykuły:

Andrew Ray's Pakiet internetowy: kiedy i dlaczego na swoim blogu
Cory House's Browserify vs Webpack na freeCodeCamp (z niesamowitymi ilustracjami)

Dwie powyższe ilustracje pochodzą z Materiały do pakowania podręcznika Pro React, inny zasób, który warto zobaczyć.

Cztery podstawowe pojęcia Webpack

Webpack ma cztery główne opcje konfiguracji zwane “podstawowe pojęcia” musisz zdefiniować w procesie rozwoju:

Wejście - punkt wyjścia wykresu zależności (jeden lub więcej plików JavaScript).
Wydajność - plik, w którym chcesz wyjście do dołączenia (jeden plik JavaScript).
Ładowarki - przekształcenia aktywów przekształć je w moduły Webpack żeby mogli być dodano do wykresu zależności. Na przykład, css-loader służy do importowania plików CSS.
Wtyczki - niestandardowe akcje i funkcje wykonane na pakiecie. Na przykład wtyczka i18n-webpack osadza lokalizację w pakiecie.

Ładowarki działają na podstawie poszczególnych plików przed kompilacją. Wtyczki są wykonywane na dołączonym kodzie, na końcu procesu kompilacji.

Zainstaluj pakiet internetowy

Do zainstaluj pakiet Webpack, otwórz wiersz polecenia, przejdź do folderu projektu i uruchom następujące polecenie:

 npm init

Jeśli nie chcesz samodzielnie konfigurować, możesz zrobić npm zaludniać package.json plik z wartościami domyślnymi za pomocą następującego polecenia:

 npm init -y

Następnie zainstaluj pakiet Webpack:

 npm zainstaluj webpack --save-dev

Jeśli używałeś wartości domyślnych, tak właśnie wyglądasz package.json plik powinien wyglądać jak teraz (właściwości mogą być w innej kolejności):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo "Błąd: brak określonego testu" && exit 1 "," słowa kluczowe „: [],„ autor ”:„ ”,„ licencja ”:„ ISC ”

Utwórz plik konfiguracyjny

Musisz utworzyć webpack.config.js plik w folderze głównym projektu. Ten plik konfiguracyjny ma centralną rolę, ponieważ właśnie tam będziesz zdefiniuj cztery podstawowe pojęcia (punkty wejścia, wyjścia, ładowarki, wtyczki).

The webpack.config.js plik przechowuje obiekt konfiguracyjny z jakich właściwości musisz określić. W tym artykule określimy cztery właściwości odpowiadają czterem podstawowym pojęciom (wejście, wydajność, moduł, i podłącz), ale obiekt config ma również inne właściwości.

1. Utwórz punkty wejścia

Możesz mieć jeden lub więcej punktów wejścia. Musisz je zdefiniować w wejście własność.

Wstaw następujący fragment kodu do webpack.config.js plik. To określa jeden punkt wejścia:

 module.exports = entry: "./src/script.js";

Aby określić więcej niż jeden punkt wejścia, którego możesz użyć albo składnia, albo składnia obiektu.

W folderze projektu, Stwórz nowy src teczka i a script.js plik wewnątrz. To będzie twoje Punkt wejścia. Do celów testowych tylko umieść sznurek w środku tego. Użyłem następującego (jednak możesz również użyć bardziej interesującego):

 const greeting = "Cześć. Jestem projektem startowym pakietu Webpack."; document.write (powitanie);

2. Zdefiniuj wyjście

Możesz mieć tylko jeden plik wyjściowy. Webpack łączy wszystkie zasoby w ten plik. Musisz skonfigurować wydajność własność w następujący sposób:

 const path = require („ścieżka”); module.exports = entry: "./src/script.js", output: filename: "bundle.js", ścieżka: path.resolve (__ dirname, 'dist');

The Nazwa pliku właściwość definiuje nazwa dołączonego pliku, podczas, gdy ścieżka własność określa nazwę katalogu. Powyższy przykład utworzy /dist/bundle.js plik.

Chociaż nie jest to obowiązkowe, lepiej jest Użyj path.resolve () metoda kiedy definiujesz ścieżka własność, jak to zapewnia dokładną rozdzielczość modułu (ścieżka bezwzględna wyjścia jest tworzona zgodnie z różnymi regułami w różnych środowiskach, rozdzielczość modułu rozwiązuje tę rozbieżność). Jeśli użyjesz path.resolve, musisz wymagać ścieżka Moduł węzła na górze webpack.config.js plik.

3. Dodaj ładowarki

Do dodaj ładowarki, musisz zdefiniować moduł własność. Poniżej dodajemy babel-loader to pozwala bezpiecznie używaj funkcji ECMAScript 6 w twoich plikach JS:

 const path = require („ścieżka”); module.exports = entry: "./src/script.js", output: filename: "bundle.js", ścieżka: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, użyj: loader: "babel-loader", options: presets: ["env"]];

Konfiguracja może wydawać się trudna, ale jest po prostu wklejona Dokumentacja ładowarki Babel. Większość ładowarek jest dostarczana z plikiem readme lub z jakąś dokumentacją, więc możesz (prawie) zawsze wiedzieć, jak je poprawnie skonfigurować. Dokumenty pakietu Webpack zawierają również stronę, która wyjaśnia jak skonfigurować moduł.rules.

Możesz dodać tyle ładowarek, ile potrzebujesz, Oto pełna lista. Pamiętaj, że musisz także zainstaluj każdy program ładujący z npm sprawić, by działały. W przypadku programu ładującego Babel musisz zainstalować niezbędne pakiety Node z npm:

 npm install --save-dev babel-loader pakiet internetowy babel-core babel-preset-env

Jeśli spojrzysz na swoje package.json plik, zobaczysz npm dodano trzy pakiety związane z Babel devDependencies własność, zajmą się kompilacją ES6.

4. Dodaj wtyczki

Do dodaj wtyczki, musisz określić wtyczki własność. Plus, musisz także wymagać wtyczki jedna po drugiej, ponieważ są to moduły zewnętrzne.

W naszym przykładzie dodajemy dwie wtyczki Webpack: the Wtyczka HTML Webpack i Wtyczka Preload Webpack. Pakiet internetowy ma ładny ekosystem wtyczek, możesz przeglądać pełną listę tutaj.

Aby wymagać wtyczek jako modułów Node, utwórz dwie nowe stałe: HtmlWebpackPlugin i PreloadWebpackPlugin i Użyj wymagać() funkcjonować.

 const path = require („ścieżka”); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require („preload-webpack-plugin”); module.exports = entry: "./src/script.js", output: filename: "bundle.js", ścieżka: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, użyj: loader: "babel-loader", opcje: presets: ["env"]], wtyczki: [nowy HtmlWebpackPlugin (), nowy PreloadWebpackPlugin ()];

Podobnie jak w przypadku ładowarek, musisz także zainstaluj wtyczki Webpack z npm. Aby zainstalować dwie wtyczki w przykładzie, uruchom następujące dwa polecenia w linii poleceń:

 npm install html-webpack-plugin --save-dev npm install --save-dev preload-webpack-plugin

Jeśli sprawdzisz swoje package.json plik, zobaczysz npm dodałem dwie wtyczki do devDependencies własność.

Uruchom Webpack

Do utwórz drzewo zależności i wypisz pakiet, uruchom następujące polecenie w linii poleceń:

 pakiet internetowy

Zwykle trwa jedną lub dwie minuty na pakiet internetowy do budowy projektu. Po zakończeniu zobaczysz podobny komunikat w CLI:

Jeśli wszystko poszło dobrze Webpack stworzył dist teczka w katalogu głównym projektu i umieścił dwa dołączone pliki (bundle.js i index.html) w środku tego.

Repo Github

Jeśli chcesz sprawdzić, pobrać lub rozwidlić cały projekt, zajrzyj do naszego repozytorium Github.