Jak dobýt Webpack 4 a vytvořit sladkou aplikaci React

Tento článek byl zastaralý s novým vydáním pro babela, laskavě si přečtěte aktualizovaný článek „Jak zkombinovat Webpack 4 a Babel 7 a vytvořit fantastickou aplikaci React“, naposledy aktualizované 13. října 2018
Obrazové kredity http://pexels.com Porapak Apichodilok

V tomto článku se podívám, jak nastavit aplikaci React pomocí Webpack 4. Na konci tohoto tutoriálu budete vědět, jak hot reload vaší aplikace pokaždé, když stisknete ctrl + s v editoru výběru .

Používám kód Visual Studio (VS kód) a mám ho rád. Je to nízká hmotnost, flexibilní a nejlepší část je zdarma. Miluji zdarma. Pokud jste to ještě nezkusili, zkuste to.

Náš cíl

Naším cílem tohoto tutoriálu je vytvořit aplikaci React s některými skvělými funkcemi, jako je async / čekat. V tomto tutoriálu nebudu používat reakční router verze 4, protože se hlavně chci soustředit na to, jak hrát s Webpackem.

Na konci tohoto článku tedy budete dobře:

  • Nastavení vývojového prostředí s horkým opětovným načtením pomocí webpack-dev-serveru
  • Přidání podpory SCSS a HTML do vašeho kódu pomocí webpacku
  • Přidání podpory pro funkce jako try / catch, async / await and rest operator
  • Vytvoření výrobní sestavy - optimalizované a připravené k nasazení
  • Nastavení různých prostředí ve vašem kódu, jako je fáze, demo a produkce

Kluci, říkám vám, že pokud se Webpack bude jevit trochu těžce, nebude to už tak.

Vývojové prostředí

Vytvořte složku

Vytvořte složku nazvanou tutorial v adresáři.

Vytvořte balíček.json

Otevřete svůj terminál a přejděte do složky tutoriálu.

Typ:

npm init -y

Tím vytvoříte soubor package.json ve složce tutoriálu.

Soubor bude vypadat asi takto:

Takto bude váš soubor package.json zpočátku vypadat. Používám VS kód pro účely tohoto tutoriálu

Vytvořte soubor index.js

Ve své složce s tutoriály vytvořím složku s názvem src.

Ve složce src vytvořím soubor s názvem index.js.

a jo, během tohoto tutoriálu budu používat citace hvězdných treků, protože JE DŮLEŽITÉ: D

Sbalte kód

Vím, že to není moc, ale mějte se mnou. Věci se brzy stanou zajímavými.

Nyní, abychom mohli sjednotit náš kód, musíme nastavit některé konfigurace, aby Webpack věděl, odkud je kód spojen. K tomu musíme nainstalovat některé závislosti.

Začněme tedy psát:

npm i - save-dev webpack webpack-cli webpack-dev-server @ babel / core @ babel / preset-env @ babel / preset-response @ babel / preset-stage-2 babel-loader@^8.0.0-beta

WOW! Vím, že to bylo hodně závislostí. Shrnume, proč jsme je v první řadě potřebovali.

webpack: K propojení našeho kódu potřebujeme Webpack.

webpack-cli: Budeme používat některé funkce CLI pro Webpack, abychom usnadnili náš život při psaní některých skriptů.

webpack-dev-server: Vytvořím server pomocí balíčku webpack-dev-server. To je zamýšleno pouze pro použití ve vývojovém prostředí a ne pro výrobu. To znamená, že při vývoji a práci na mém kódu nepotřebuji samostatný server, jako je Node.js.

@ babel / preset-env: Tento balíček se chová úplně stejně jako @ babel / preset-latest (nebo @ babel / preset-es2015, @ babel / preset-es2016 a @ babel / preset-es2017 dohromady). Super jo?

@ babel / preset-reagovat: Název balíčku zní jasně - to přidá podporu pro reakci, zatímco svazujeme náš kód.

@ babel / preset-stage-2: Tím se přidá funkce 2. fáze návrhu Ecma TC39. Více se o tom dočtete zde.

@ babel / loader: Toto je závislost Webpacku. Umožňuje transplantaci Babel pomocí Webpack.

@ babel / core: Toto je závislost na samotném @ babel / loader.

Takže teď víte něco o tom, co jsme nainstalovali a proč.

Váš soubor package.json by měl vypadat asi takto:

Právě teď by měl váš soubor package.json vypadat.

Vytvořte soubor Babel

Musíme také přidat nový soubor s názvem .babelrc, takže ho vytvoříme také.

V hlavním adresáři složky vytvořte soubor .babelrc a následující fragment kódu. To pomůže Webpacku při sdružování kódu a převodu těch kódů Sassy, ​​které napíšeme.

Nastavte webpack 4

Dobře, takže nudná část byla hotová. Pojďme se přesunout k hlavní části tohoto tutoriálu: nastavení Webpack 4.

Citovat z Star Trek:

Má za úkol. On mě zadává; a budu ho mít. Než ho vzdám, pronásleduji ho kolem měsíců Nibie a kolem Maarstromu Antares a kolem Periciných plamenů.

Vytvořme tedy novou složku s názvem config a uvnitř této složky vytvoříme soubor s názvem webpack.base.config.js.

Důvod, proč nazývám tento soubor .base, je ten, že obsahuje všechny běžné funkce, které budeme používat v našem vývojovém a odlišném výrobním prostředí. Změny v tomto jednom souboru se projeví ve všech prostředích. Pokud to teď nedává smysl, kluci, mějte se mnou ještě pár minut. Začne to dávat smysl.

Bez dalšího čekání napište do svého souboru config / webpack.base.config.js tyto řádky kódu:

Module.rules definuje sadu pravidel, která bude Webpack aplikovat na určité přípony souborů.

V našem poli pravidel definujeme test, který řekne Webpacku, jaké rozšíření použít. Tady říkám Webpacku, aby aplikoval určité pravidlo pouze na soubory založené na .js.

Další přijde vyloučit. Během svazku nechci, aby Webpack všechno transponoval. Bude to velmi pomalé, zejména když přidám také složku node_modules.

Vyloučím to pomocí vlastnosti vylučovat v sadě pravidel. Poslední, který je nejdůležitější, je vlastnost use.loader. Zde mu dávám hodnotu babel-loader. To, co dělá babel-loader, je použití našich definovaných předvoleb, které jsme definovali v našem souboru .babelrc, k transponování všech souborů s příponou .js.

Zatím tak dobře, jo? Jsme tam více než na půl cesty…

I profesor Snape vás omlouvá. Úžasní chlapi, jsme skoro tam.

A ještě jedna věc: Webpack 4 nastaví složku src jako výchozí vstupní bod a složku dist jako výchozí výstupní bod seskupeného výsledku. Super, že?

Přejděte do složky tutoriálu a spusťte tento skript. Tím se spojí veškerý váš kód a tento kód se spustí v prohlížeči:

Adeel @ Frodo MINGW64 ~ / Desktop / article / tutorial
$ node_modules / .bin / webpack-dev-server - vývoj módu --config config / webpack.base.config.js --open --hot --history-api-fallback

Základem tohoto skriptu je, že kombinuje celý náš kód v adresáři src a spustí jej v prohlížeči na této adrese:

http: // localhost: 8080 /
Hmm! To je jiné. To dává chybu: Nelze GET /

HTML

Když jsme tedy spustili skript, zkompilovali se a otevřeli prohlížeč. Nyní měl kód, který jsme napsali v našem souboru index.js, ale neměl soubor .html, ve kterém by jej mohl spustit.

Musíme přidat html-webpack-plugin do našeho souboru webpack.base.config.js a soubor index.html v našem adresáři src.

Nejprve nainstalujte závislost pro převádění HTML pomocí Webpack:

npm i --save-dev html-webpack-plugin

Váš soubor package.json by měl vypadat takto:

Nyní přidáme soubor HTML do našeho adresáře src a pojmenujeme ho index.html:

Náš adresář projektu by nyní měl vypadat takto:

Náš adresář projektu by měl vypadat asi takto

Zatímco jsme u toho, přidejte tento html-webpack-plugin do našeho souboru webpack.base.config.js.

Do našeho konfiguračního souboru webpack jsme přidali něco nového - všimli jste si? Jen si s tebou hrávám. Vím, že jsi to udělal.

Dobrá práce, už jsme skoro hotovi.

Co teď tento plugin dělá? Je to velmi jednoduché. Pluginy, jednoduše řečeno, přidejte do svého webového balíčku schopnosti. Více se o nich můžete dočíst zde.

Nyní jsem přidal právě tento plugin s názvem html-webpack-plugin. Účel tohoto pluginu je velmi jednoduchý: vytváří soubory HTML, které slouží vašim souborům.

Dobře, pojďme tedy ten skript spustit znovu (prsty zkřížené). "Doufám, že tentokrát žádné chyby," řekl jednou každý vývojář.

Adeel @ Frodo MINGW64 ~ / Desktop / article / tutorial
$ node_modules / .bin / webpack-dev-server - vývoj módu --config config / webpack.base.config.js --open --hot --history-api-fallback

Tím se zkompiluje a otevře prohlížeč v dostupném výchozím portu. Můj je:

http: // localhost: 8080 /
Jednoduše jsem kliknul na ctrl + shift + i, čímž se otevřel prvek Inspect v mém prohlížeči Chrome

Modrá část: Modrá část je jednoduše místo, kam jsem vložil své metaznačky a definoval název aplikace.

Žlutá část: Žlutá zvýrazněná část je pevně zakódovanou částí, kterou jsme napsali v našem souboru index.html. Zde se bude nacházet naše budoucí aplikace React.

Červená část: Nejzajímavější částí je část, kterou jsem podtrhl červeně. Nikdy jsme to nenapsali do našeho index.html souboru, tak odkud to přišlo?

Webpack je velmi chytrý. Tento soubor vzal do vašeho index.js, pěkně ho spojil a do úhledného souboru přidal main.js. Poté ji vložil do našeho souboru index.html. Super Boží!

Přidat reakci

Přidejme React a necháme párty chodit. K tomu musíme nainstalovat některé závislosti.

Začněme s:

npm i Reaguj rea-dom - uložit

Nyní přejděte do svého souboru index.js a napište:

Spusťte tento skript znovu:

Adeel @ Frodo MINGW64 ~ / Desktop / article / tutorial
$ node_modules / .bin / webpack-dev-server - vývoj módu --config config / webpack.base.config.js --open --hot --history-api-fallback

Tím se zkompiluje a otevře prohlížeč ve výchozím portu. Můj je:

http: // localhost: 8080 /

Páni, viděli jste, co se otevře v prohlížeči? Ano! Ty jsi udělal! Vaše první webpack nakonfigurovaná aplikace React.

Teď je tu ještě spousta věcí. Ale člověče, člověče. Dobrá práce!

Toto je naše reagující aplikace, běží Yayyyy! :)

Nyní je tu zábavná část. Přejděte do souboru index.js a změňte název na cokoli podle svého výběru. Stiskněte ctrl + s a zkontrolujte svůj prohlížeč. Automaticky aktualizoval váš obsah.

Super, že?

Pojďme shrnout

Přidali jsme vývojové prostředí. Přidali jsme horké doplňování modulů. Přidali jsme podporu pro soubory .js s kódem React. V další části přidáme podporu SCSS do našeho webpacku.

SCSS

Pro podporu SCSS musíme přidat další závislosti do našeho souboru package.json.

Nainstalujte následující balíčky:

npm i - save-dev style-loader css-loader sass-loader node-sass extract-text-webpack-plugin@^4.0.0-beta.0

sass-loader: Tento plugin nám pomůže kompilovat SCSS do CSS.

node-sass: Sass-loader vyžadoval uzel-sass jako vzájemnou závislost.

css-loader: Zavaděč CSS interpretuje @import a url () jako import / request () a vyřeší je.

style-loader: Přidá CSS do DOMu vložením značky stylu.

extract-text-webpack-plugin: Přesune všechny požadované moduly .css do samostatného souboru CSS.

Takže vaše styly již nejsou vloženy do balíčku JavaScriptu, ale jsou v samostatném souboru CSS (styles.css). Pokud je váš celkový objem stylů velký, bude rychlejší, protože svazek CSS je načten paralelně se svazkem JavaScript.

Nyní, když jsou naše závislosti nainstalovány, udělejme některé změny v našem konfiguračním souboru Webpack.

Pojďme nejprve pochopit, co jsme tady udělali. V našich modulech.rules jsme přidali nové pravidlo. Toto pravidlo platí, že některé svazky se vztahují na všechny soubory .scss. Doufám, že to dávalo smysl. Uvnitř našeho použití, říkáme, že extrahovat některé informace.

Pojďme se trochu prohloubit a já se pokusím udělat to tak jednoduché, jak umím.

{
   záložník: "style-loader",
   použijte: "css-loader! sass-loader"
}

Zkuste přečíst tento kousek kódu zdola nahoru.

Získejte veškerý kód SASS - .scss - pomocí sass-loader a pak jej převeďte do CSS kódu pomocí css-loader. Pak vezměte celý tento kód CSS a vložte jej do naší DOM pomocí značky