Začínáme s Webpack [S příkladem projektu]
Webpack je modul který usnadňuje vytváření komplexních JavaScript aplikací. Získal vážnou trakci, protože komunita React si ji vybrala jako svůj hlavní nástroj pro budování. Webpack je ani správce balíčků ani běžec úloh používá jiný (pokročilejší) přístup, ale jeho cílem je také nastavit dynamický proces sestavování.
Webpack pracuje s vanilkovým JavaScriptem. Můžete ji použít svázat statická aktiva aplikace, například obrázky, fonty, styly, skripty do jednoho souboru péče o všechny závislosti.
Nebudete potřebovat Webpack k vytvoření jednoduché aplikace nebo webové stránky, například ten, který má pouze jeden JavaScript a jeden soubor CSS a několik obrázků, ale může to být záchranář života složitější aplikace s několika aktivy a závislostmi.
Webpack vs. úloha běžců vs. Browserify
Tak, jak se Webpack stohovat ve srovnání s jinými stavebními nástroji například Grunt, Gulp nebo Browserify?
Grunt a Gulp jsou běžci úkolů. Ve svém konfiguračním souboru specifikovat úkoly, a běžec úlohy je provede. pracovního postupu běžce úlohy vypadá v podstatě takto:
Webpack je však modul analyzuje celý projekt, nastaví strom závislostí, a vytvoří soubor JavaScriptu slouží prohlížeči.
Browserify je blíže k Webpack než běžcům úkolů, jak to také vytvoří graf závislosti ale jen tak pro moduly JavaScript. Webpack jde ještě o krok dál, a to nejen svazek zdrojového kódu, ale i ostatní aktiva jako jsou obrázky, styly, písma atd.
Pokud se chcete dozvědět více jak se Webpack porovnává s jinými nástroji pro tvorbu, Doporučuji vám dva články:
- Andrew Ray je Webpack: Kdy použít a proč na svém vlastním blogu
- Cory House je Browserify vs Webpack na freeCodeCamp (s úžasnými ilustracemi)
Dvě výše uvedené ilustrace jsou od Materiály Webpack příručky Pro React, Další zdroj, který stojí za to podívat.
Čtyři základní pojmy Webpack
Webpack má volány čtyři hlavní možnosti konfigurace “základní pojmy” které budete muset definovat v procesu vývoje:
- Vstup - výchozí bod grafu závislosti (jeden nebo více souborů JavaScriptu).
- Výstup - soubor, kam chcete výstup do svazku (jeden soubor JavaScriptu).
- Nakladače - transformace aktiv, která přeměnit na moduly Webpack tak, aby mohly být přidán do grafu závislosti. Například,
css-loaderslouží k importu CSS souborů. - Pluginy - vlastní akce a funkce na svazku. Například
i18n-webpack-pluginvloží lokalizaci do svazku.
Nakladače pracují na bázi souborů před kompilací. Zásuvné moduly jsou prováděny na svazkovém kódu, na konci procesu kompilace.
Nainstalujte Webpack
Na nainstalovat Webpack, otevřete příkazový řádek, přejděte do složky projektu a spusťte následující příkaz:
npm init
Pokud nechcete provést konfiguraci sami, můžete provést npm naplnit package.json souboru s výchozími hodnotami s následujícím příkazem:
npm init -y
Dále nainstalujte Webpack:
npm install webpack --save-dev
Pokud jste použili výchozí hodnoty, postupujte takto package.json soubor by měl vypadat nyní (vlastnosti mohou být v jiném pořadí):
"name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skripty ": " test ":" echo "Chyba: není zadán žádný test" && exit 1 "," klíčová slova ": []," autor ":" "," licence ":" ISC "
Vytvořte konfigurační soubor
Musíte vytvořit webpack.config.js soubor v kořenové složce projektu. Tento konfigurační soubor má centrální roli, protože právě zde budete definovat čtyři základní pojmy (vstupní body, výstup, zavaděče, pluginy).
webpack.config.js soubor uchovává objekt konfigurace vlastností, které musíte specifikovat. V tomto článku budeme specifikovat čtyři vlastnosti, které čtyři základní pojmy (vstup, výstup, modul, a zapojit), ale objekt config má také jiné vlastnosti.
1. Vytvořte vstupní body
Můžeš mít jeden nebo více vstupních bodů. Musíte je definovat v vstup vlastnictví.
Vložte následující úryvek kódu do webpack.config.js soubor. To určuje jeden vstupní bod:
module.exports = položka: "./src/script.js";
Chcete-li zadat více než jeden vstupní bod, můžete použít pole nebo syntaxe objektu.
Ve složce projektu, Vytvoř nový src složky a script.js soubor uvnitř. To bude vaše Vstupní bod. Pro zkušební účely umístěte řetězec uvnitř toho. Použil jsem následující (ale můžete použít i zajímavější):
const greeting = "Ahoj. Jsem startovací projekt Webpack."; document.write (pozdrav);
2. Definujte výstup
Můžeš mít pouze jeden výstupní soubor. Webpack svazuje všechna aktiva do tohoto souboru. Musíte nakonfigurovat výstup vlastnictví následujícím způsobem:
const path = vyžadují ("cesta"); module.exports = položka: "./src/script.js", výstup: filename: "bundle.js", cesta: path.resolve (__ dirname, 'dist'); název souboru vlastnost definuje název balíku, zatímco cesta vlastnictví Určuje název adresáře. Výše uvedený příklad vytvoří /dist/bundle.js soubor.
Ačkoli to není povinné, je lepší používat path.resolve () metoda když definujete cesta majetku zajišťuje přesné rozlišení modulu (absolutní cesta výstupu je vytvořena podle různých pravidel v různých prostředích, rozlišení modulu řeší tento nesoulad). Pokud používáte path.resolve, musíš vyžadovat cesta Modul uzlu v horní části webpack.config.js soubor.
3. Přidejte nakladače
Na přidejte nakladače, musíte definovat modul vlastnictví. Níže přidáme babel-nakladač , která vám umožní bezpečně používat funkce ECMAScript 6 ve vašich souborech JS:
const path = vyžadují ("cesta"); module.exports = položka: "./src/script.js", výstup: filename: "bundle.js", cesta: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, použijte: loader: "babel-loader", volby: presets: ["env"]; Konfigurace se může zdát obtížná, ale je z ní jen kopírována Dokumentace nakladače Babel. Většina zavaděčů je dodávána buď se souborem readme nebo s nějakou dokumentací, takže můžete (téměř) vždy vědět, jak je správně konfigurovat. Dokumenty Webpack mají také stránku, která vysvětluje jak konfigurovat module.rules.
Můžeš přidat tolik nakladačů, kolik potřebujete, zde je úplný seznam. Všimněte si, že také potřebujete instalovat každý nakladač s npm aby fungovaly. Pro zavaděč Babel musíte nainstalovat potřebné balíčky uzlů s npm:
npm install --save-dev babel-loader babel-core babel-preset-env webpack
Pokud se podíváte na svůj package.json soubor, uvidíte, že npm přidal tři balíčky související s Babel devDependencies vlastnictví, ty se postarají o kompilaci ES6.
4. Přidejte pluginy
Na přidejte pluginy, musíte specifikovat pluginy vlastnictví. Navíc musíte také vyžadovat jeden po druhém, jako externí moduly.
V našem příkladu přidáme dva pluginy Webpack: HTML Webpack plugin a Předinstalovat plugin Webpack. Webpack má pěkný plugin ekosystém, zde můžete procházet celý seznam.
Požadovat pluginy jako moduly uzlů, vytvořit dvě nové konstanty: HtmlWebpackPlugin a PreloadWebpackPlugin a používat vyžadovat() funkce.
const path = vyžadují ("cesta"); const HtmlWebpackPlugin = vyžadují ("html-webpack-plugin"); const PreloadWebpackPlugin = vyžadují ("preload-webpack-plugin"); module.exports = položka: "./src/script.js", výstup: filename: "bundle.js", cesta: path.resolve (__ dirname, 'dist'), modul: rules: [test : // (), nový PreloadWebpackPlugin ()]; Stejně jako u nakladačů, musíte také nainstalovat pluginy Webpack s npm. Chcete-li nainstalovat dva pluginy v příkladu, spusťte v příkazovém řádku následující dva příkazy:
npm install html-webpack-plugin --save-dev npm install --save-dev preload-webpack-plugin
Pokud si zkontrolujete package.json soubor, uvidíte, že npm přidal dva pluginy do. \ t devDependencies vlastnictví.
Spusťte Webpack
Na vytvořit strom závislostí a výstupu svazku, spusťte následující příkaz v příkazovém řádku:
webpack
Obvykle trvá jednu nebo dvě minuty pro Webpack vybudovat projekt. Po dokončení se ve vašem CLI zobrazí podobná zpráva:
Pokud všechno šlo správně Webpack vytvořeno a dist složky v kořenech vašeho projektu a umístili dva soubory (bundle.js a index.html) uvnitř toho.
Github repo
Pokud se chcete podívat na celý projekt, stáhněte si jej nebo vidličku, podívejte se na náš repertoár Github.
