Začíname s Webpackom [s príkladom projektu]

Webpack je a modul zväzok ktorý uľahčuje vytváranie komplexných aplikácií JavaScriptu. Získala vážnu trakciu, keďže komunita React si ju vybrala ako svoj hlavný nástroj na budovanie. Webpack je ani správca balíkov, ani úloha pretože používa iný (pokročilejší) prístup, ale jeho cieľom je tiež nastaviť dynamický proces vytvárania.

Webpack pracuje s Java vanilkami. Môžete ho použiť zbaliť statické aktíva aplikácie, ako sú obrázky, písma, šablóny so štýlmi, skripty do jedného súboru starať sa o všetky závislosti.

Webpack nebudete potrebovať na vytvorenie jednoduchej aplikácie alebo webovej lokality, napríklad webovú stránku, ktorá má iba jeden JavaScript a jeden súbor CSS a niekoľko obrázkov, ale môže to byť život zachránca pre zložitejšie aplikácie s viacerými aktívami a závislosťami.

Webpack vs. úloha bežiaci verzus Browserify

Takže, ako sa Webpack zhromažďuje v porovnaní s inými nástrojmi na vytváranie ako napríklad Grunt, Gulp alebo Browserify?

Grunt a Gulp sú bežci. Vo svojom konfiguračnom súbore vy zadajte úlohy, a spúšťač úloh ich vykoná. pracovný tok úlohy v podstate vyzerá takto:

Webpack je však modul zväzok ktorá analyzuje celý projekt, nastaví strom závislostí, a vytvára zväzok súboru JavaScript že slúži pre prehliadač.

Prehliadanie je bližšie k Webpacku ako úloha, ako aj vytvára graf závislosti ale robí to len pre moduly JavaScript. Webpack ide ešte o krok ďalej, a nie len zväzok zdrojového kódu, ale aj iné aktíva ako sú obrázky, šablóny so štýlmi, písma atď.

Ak chcete vedieť viac o ako sa Webpack porovnáva s ďalšími nástrojmi na vytváranie, Odporúčam vám dva články:

Andrew Ray je Webpack: kedy používať a prečo na svojom vlastnom blogu
Cory House's Prehliadajte vs Webpack na freeCodeCamp (s úžasnými ilustráciami)

Dve uvedené obrázky sú z Materiály Webpack v príručke Pro React, ďalší zdroj, ktorý stojí za pohľad.

Štyri základné koncepty Webpack

Webpack má štyri hlavné konfiguračné voľby “základné pojmy” že v procese vývoja budete musieť definovať:

vstup - štartovací bod grafu závislosti (jeden alebo viac súborov JavaScript).
Výkon - súbor, kde chcete výstup, ktorý sa má zväzovať (jeden súbor JavaScript).
nakladače - premeny na aktíva, ktoré premeniť ich na moduly Webpack aby mohli byť pridané do grafu závislostí. Napríklad, css-nakladače sa používa na import súborov CSS.
plugins - vlastné akcie a funkcie vykonávané na zväzku. Napríklad i18n-WebPack-plugin vloží lokalizáciu do zväzku.

Nakladače pracujú na základe súborov pred kompilaciou. Pluginy sa vykonávajú na zväzku kódov, na konci procesu kompilácie.

Inštalovať Webpack

na nainštalujte Webpack, otvorte príkazový riadok, prejdite do priečinka projektu a spustite nasledujúci príkaz:

 npm init

Ak nechcete urobiť konfiguráciu sami, môžete vytvoriť npm naplniť package.json súbor s predvolenými hodnotami s nasledujúcim príkazom:

 npm init -y

Potom nainštalujte Webpack:

 npm inštalovať webový balík - save-dev

Ak ste použili predvolené hodnoty, tak toto je vaše package.json súbor by mal vyzerať ako teraz (vlastnosti môžu byť v inom poradí):

 "name": "_tests", "verzia": "1.0.0", "popis": "", "main": "webpack.config.js" .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Chyba: ": []," autor ":" "," licencia ":" ISC "

Vytvorte konfiguračný súbor

Musíte vytvoriť webpack.config.js súbor v hlavnom priečinku projektu. Tento konfiguračný súbor má ústrednú úlohu, pretože tu práve ide definovať štyri základné koncepty (vstupné body, výstup, nakladače, pluginy).

webpack.config.js súbor uchováva konfiguračný objekt ktorých vlastnosti je potrebné špecifikovať. V tomto článku špecifikujeme štyri vlastnosti zodpovedajú štyrom základným konceptom (vstup, výkon, modul, a zapojiť), ale konfiguračný objekt má aj iné vlastnosti.

1. Vytvorte vstupné body

Môžeš mať jeden alebo viac vstupných bodov. Musíte ich definovať v vstup vlastnosť.

Vložte nasledujúci útržok kódu do priečinka webpack.config.js súboru. to určuje jeden vstupný bod:

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

Určiť viac ako jeden vstupný bod, ktorý môžete použiť buď pole alebo syntax objektu.

Vo vašom priečinku projektu, vytvoriť nový src zložka a a script.js súbor v nej. Toto bude vaše vstupný bod. Na účely testovania len umiestnite reťazec vnútri. Použil som nasledujúci (môžete však použiť aj zaujímavý):

 const greeting = "Ahoj, som spustený projekt Webpack."; document.write (pozdrav);

2. Definujte výstup

Môžeš mať iba jeden výstupný súbor. Služba Webpack vkladá do tohto súboru všetky aktíva. Musíte nakonfigurovať výkon nehnuteľnosti nasledujúcim spôsobom:

 const path = vyžaduje ("cesta"); module.exports = entry: "./src/script.js", výstup: názov súboru: "bundle.js", cesta: path.resolve (__ dirname, 'dist');

názov súboru Vlastnosť definuje názov pribaleného súboru, kým cesta vlastnosť určuje názov adresára. Vyššie uvedený príklad vytvorí /dist/bundle.js súbor.

Aj keď to nie je povinné, je lepšie Použi path.resolve () metóda keď definujete cesta majetok, ako to zabezpečuje presné rozlíšenie modulu (absolútna cesta výstupu je vytvorená podľa rôznych pravidiel v rôznych prostrediach, rozlíšenie modulu rieši tento rozdiel). Ak používate path.resolve, musíte to urobiť vyžadovať cesta Modul uzla v hornej časti webpack.config.js súbor.

3. Pridajte nakladače

na pridajte nakladače, musíte definovať modul vlastnosť. Nižšie pridáme babel-nakladače to vám umožní bezpečne používať funkcie ECMAScript 6 vo vašich súboroch JS:

 const path = vyžaduje ("cesta"); module.exports = entry: "./src/script.js", výstup: filename: "bundle.js", cesta: path.resolve (__dirname, 'dist'), modul: rules: [ : /\.js$/, vylúčiť: / (node_modules | bower_components) /, použite: loader: "babel-loader", možnosti: prednastavenia: ["env"]];

Konfigurácia sa môže zdať ťažké, ale je to len kopírovanie Babelova dokumentácia nakladača. Väčšina nakladačov je vybavená súborom readme alebo nejakou dokumentáciou, takže môžete takmer vždy vedieť, ako ich správne nakonfigurovať. Dokumenty Webpack majú tiež stránku, ktorá vysvetľuje ako nakonfigurovať module.rules.

Môžete pridať ako mnoho nakladačov, ako potrebujete, Tu je celý zoznam. Upozorňujeme, že je tiež potrebné nainštalujte každý nakladač s npm aby ich fungovali. Pre nakladač Babel potrebujete nainštalovať potrebné balíky uzlov s npm:

 npm nainštalovať --save-dev babel-loader babel-core babel-preset-env webpack

Ak sa pozriete na svoje package.json súbor, uvidíte, že npm pridali tri balíčky súvisiace s balíkom Babel devDependencies vlastnosť, tieto sa postarajú o kompiláciu ES6.

4. Pridajte doplnky

na pridajte doplnky, musíte zadať plugins vlastnosť. Okrem toho musíte tiež vyžadovať zásuvné moduly jeden po druhom, pretože sú externými modulmi.

V našom príklade pridáme dva pluginy Webpack: HTML Webpack plugin a Preload Webpack plugin. Webpack má nice ecosystem plugin, Tu môžete prezerať celý zoznam.

Požadovať doplnky ako moduly uzlov, vytvorte dve nové konštanty: HtmlWebpackPlugin a PreloadWebpackPlugin a Použi vyžadujú () funkcie.

 const path = vyžaduje ("cesta"); const HtmlWebpackPlugin = vyžadovať ("html-webpack-plugin"); const PreloadWebpackPlugin = vyžaduje ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", výstup: filename: "bundle.js", cesta: path.resolve (__dirname, 'dist'), modul: rules: [ : / / node_modules | bower_components), použite: loader: "babel-loader", možnosti: presets: ["env"], pluginy: [new HtmlWebpackPlugin (), nový PreloadWebpackPlugin ()];

Rovnako ako v prípade nakladačov, musíte tiež inštalujte pluginy Webpack s npm. Ak chcete nainštalovať dva pluginy v príklade, spustite nasledovné dva príkazy vo vašom príkazovom riadku:

 npm nainštalovať html-webpack-plugin -save-dev npm nainštalovať --save-dev preload-webpack-plugin

Ak skontrolujete svoje package.json súbor teraz, uvidíte, že npm pridali dva doplnky do priečinka devDependencies vlastnosť.

Spustite Webpack

na vytvorte strom závislostí a výstup zväzku, spusťte na príkazovom riadku nasledujúci príkaz:

 WebPack

Zvyčajne trvá jednu alebo dve minúty Webpack na vybudovanie projektu. Keď skončíte, u CLI sa zobrazí podobná správa:

Ak všetko šlo správne Webpack vytvoril a dist zložka v koreni vášho projektu a umiestnili dve zväzky súborov (bundle.js a index.html) vnútri.

Github repo

Ak chcete odhlásiť, prevziať alebo rozdeliť celý projekt, pozrite si naše repo Github.