logo

Webpack 5:Průvodce pro začátečníky

Tolikrát slyšeli od vývojářů, že kvůli konfiguračnímu souboru nechápou, jak nakonfigurovat webpack. Dnes se naučíme, jak používat webpack k nastavení stylů balíčků, JavaScriptu, obrázků a písem pro web.

Při prvním použití webového balíčku by se kolem objevilo mnoho otázek, může být obtížné pochopit, jak funguje a jak by se měl používat. Mým cílem je pomoci vám porozumět webpacku.

Pojďme se ponořit do inicializace webpacku.

Co je webpack 5?

Stručně řečeno, webpack je svazek statických modulů pro moderní aplikace JavaScript. Není možné zmínit všechny nástroje a pro průvodce pro začátečníky, jako je tento, je to zbytečné.

Místo toho se pokusím pro začátek sestavit malý základní seznam.

  • Základní konfigurace

    • Vstupní bod
    • Výstup

  • Nakladače

    • Styly
    • Obrázky
    • Písma
    • Babel (JavaScript)

  • Pluginy

    • Šablona HTML

  • Režim

    • Vývoj
Začínáme se základní konfigurací Webpack

Nejprve vytvořte adresář pro svůj projekt a spusťte jej. Předtím Začneme vytvořením následující adresářové struktury:

1. Vytvořte projekt

mkdir webpack-setup
cd webpack- setup
npm init -y # creates a default package.json

2. Nastavení webového balíčku

npm install webpack webpack-cli –-save-dev

Vytvoříme složku src/app, která bude obsahovat všechny zdrojové soubory. Začnu vytvořením jednoduchého souboru index.js

3. Základní konfigurace

V kořenovém adresáři projektu vytvoříme webpack.config.js.
Klepněte na webpack.config.js

4. Vstup a výstup

V tomto příkladu nastavíme vstupní bod na src/index.js. Budeme mít výstup ve složce dist, což je místo, kde se vytváří produkční kód. [název] ve výstupu bude hlavní.

5. Vytvořte webový balíček

Pro spuštění skriptu můžeme vytvořit sestavení skriptu, který spustí příkaz webpack.

6. Nyní jej můžete spustit.

npm run build

Složka dist byla vytvořena pomocí main.bundle.js.

Nyní tedy úspěšně vytváříme webový balíček.

Začneme Nakladači v našem příkladu

1. Styly

Pro styl nainstalujeme zavaděč stylů a balíčky zavaděče SCSS, PostCSS a CSS.

  • sass-loader – pro kompilaci SCSS a CSS
  • node-sass – pro uzel sass
  • postcss-loader – zpracování CSS pomocí PostCSS
  • css-loader – vyřešení importů CSS
  • style-loader – vložení CSS do Dom
npm i sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass --save-dev

Vytvoříme soubor postCSS.config.js a přidáme jej do kořenového adresáře.

Také přidejte všechny zavaděče do konfiguračního souboru webpack.

Spusťte sestavení, uvidíte, že byly použity Sass a PostCSS.

2. Obrázky

Vytvořte src/images a přidejte k němu obrázek, poté jej zkuste importovat do svého souboru index.js.

Po načtení zavaděče souborů nakonfigurovaného v souboru webpack.config.js 

npm i file-loader --save-dev

Získáte možnost pro výstupní soubory, kde chceme přesnou cestu (dist/assets/images/**.jpg).

3. Písma

Nejprve vložte soubory písem do jedné složky aplikace vašeho projektu.

Je potřeba načíst url-loader pro funkce. 

npm i --save-dev url-loader

4. Javascript

Používáme babel-loader pro js. Babel je JavaScript nové generace. Existuje také několik dalších závislostí pro Babel.

  • babel-loader – Transpilujte soubory pomocí webového balíčku.
  • @babel/core – Zpětně kompatibilní JavaScript
  • @babel/preset-env – Inteligentní výchozí nastavení pro Babel
  • @babel/plugin-proposal-class-properties – vlastní konfigurace Babel
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties

Nyní přidáme nějaký kód pro načtení js do webpack.config.js.

Vytvoříme soubor .babelrc v kořenovém adresáři projektu pro Babel Plugins.


Spusťte npm build, veškerý kód je nastaven bez jakékoli chyby. 

npm run build

5. Pluginy pro HTML

Jak lze nakonfigurovat webový balíček pro generování HTML
HtmlWebpackPlugin, který vytvoří soubor ze šablony. Nejprve nainstalujte plugin. 

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

Vytvořte soubor template.html ve složce src. Můžeme předat hash konfigurace 'title ' možnosti html-webpack-plugin.

A také přidat kód do konfiguračního souboru webpack pro vytvoření HTML

Nyní znovu spusťte sestavení. Viz složka dist nyní obsahuje soubor
index.html s balíčkem.

6. Způsob vývoje

Pro nastavení pro vývoj nainstalujeme webpack-dev-server . Webpack nám dává možnost snadno nainstalovat server s live
opětovné načítání.

  • webpack-dev-server – Vývojový server pro webpack
npm install --save-dev webpack-dev-server

Znovu přidejte řádek mode:'development' do souboru webpack.config.js. a pro spuštění serveru přidejte skript do package.json:



npm start

Při spuštění tohoto příkazu se zobrazí odkaz na localhost:8080 automaticky vyskočí ve vašem prohlížeči

To bude stačit, abyste mohli začít s webovým balíčkem! Pokryli jsme všechny základní koncepty Webpacku (základní, zásuvné moduly, zavaděče). Pro další prozkoumání možností webpacku doporučujeme oficiální webový balíček dokumentů

Doufám, že se vám zde bude líbit, končíme základní nastavení našeho Webpacku! Děkuji vám za přečtení příspěvku.

Pracuji na projektu uživatelského rozhraní Dash, který staví na uživatelském rozhraní gulp js.Dash

Veselé kódování :)