Index
- Požadavky na výuku Webpack
- Co je webový balíček?
- Proč je užitečné zabalit náš kód?
- Webpack 5
- Instalace
- webpack.config.js
- Klíčové body webového balíčku
- Odkazy
- Závěry
Požadavky na výuku Webpack
Webpack, jakožto pokročilejší webová technologie, bude složitý a dokonce frustrující pokus o jeho prostudování a pochopení bez předchozích znalostí, doporučujeme znát následující body:
- HTML5
- CSS3
- Moderní JavaScript (ES6 vpřed)
- Základy Node.js (není nutné, ale velmi užitečné)
Co je webový balíček?
Podle oficiální dokumentace je webpack obal statického modulu pro javascriptové aplikace
Porozumět souborům statických modulů:
- Soubory
.js
, - Kód
.css
čisté nebo používající preprocesory jakosass
,less
,post-css
atd. - Obrázky v různých formátech:
.png
,.jpg
atd. - Šablonové moduly jako
pug
.
Proč je užitečné zabalit náš kód?
Důvody, proč je použití webpacku dobrý nápad:
- Máte produktivnější vývojové prostředí.
- Webpack vám umožňuje spravovat všechny statické soubory projektu efektivněji.
- Je široce používán současnými frontend frameworky a knihovnami jako React , Úhel nebo Vue .
- Umožňuje nám upravit náš kód a připravit jej k nasazení do produkce.
- Umožňuje používat importy a export moderního javascriptu ke správě našeho kódu javascript jednoduchým způsobem.
- Je rozšiřitelná a modulární , protože potřebujeme více funkcí, můžeme jej nakonfigurovat tak, aby vyhovoval potřebám projektu.
Webpack 5
10. října 2020 byla vydána verze 5 webpacku, tato verze je nejaktuálnější a nejstabilnější, takže pro nové projekty ji doporučujeme používat. Více informací o této aktualizaci (často kladené otázky, jak migrovat z webpacku 4 na webpack 5 atd.) samozřejmě najdete v oficiální dokumentaci
Instalace
Pro správnou funkci webpacku potřebuje instalaci 2 vývojových závislostí :
- webpack
- webpack-cli
npm i webpack webpack-cli -D
webpack.config.js
Jedná se o speciální konfigurační soubor, který má webpack, kde si můžeme výslovně zapsat všechna pravidla balení, se kterými bude projekt pracovat; Není to nic jiného než javascriptový objekt, kde pomocí vlastností klíč–hodnota nakonfigurujeme odpovídající aplikaci.
Klíčové body webového balíčku
Abyste pochopili webpack, musíte pochopit 5 základních bodů:
Záznam
Entry
je vstupní bod naší aplikace, jinými slovy označuje hlavní soubor, který aplikaci spouští.
Ve výchozím nastavení má webpack cestu ./src/index.js
jako vstupní soubor, ale můžete nastavit jakoukoli jinou relativní cestu, kterou chcete.
//webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
};
Výstup
Output
je výstupní bod aplikace, který říká webovému balíčku, kam má uložit soubory připravené k produkci, jako jsou soubory .js
, .html
a .css
Ve výchozím nastavení jsou tyto soubory uloženy v cestě ./dist/main.js
ale je možné zadat jakoukoli jinou absolutní cestu .
V konfiguračním souboru by to vypadalo takto:
//webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
Kde:
Načítače
Ve výchozím nastavení webpack funguje pouze se soubory .js
. a .json
, ale všichni víme, že všechny webové stránky mají HTML A CSS, tak jak to napravíme? Odpovědí jsou Nakladače
Zavaděče umožňují webpacku zpracovávat jiné typy souborů do modulů připravených pro výrobu.
Velmi obecně se nakladač skládá ze 2 hlavních částí:
test
:určuje, jaké typy souborů by měly být transformovány, obvykle regulární výrazuse
:označuje samotný zavaděč, který by měl být použit k provedení výše uvedené transformace.
Podívejme se na příklad v našem konfiguračním souboru:
//webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
Důležité aspekty ke zvážení:
- Všimněte si, jak jsou zavaděče načteny do objektu
module
které mají polerules
. - Regulární výraz
test: /\.txt$/
musí být bez jednoduchých nebo dvojitých uvozovek. - Příkladové pravidlo vypadá asi takto:webpack, vím, že nerozumíte
.css
souborům , proto vám dávám zavaděč s názvemstyle-loader
a další s názvemcss-loader
pro použití ve všech souborech.css
projektu. - Pořadí nakladačů je důležité.
- Aby konfigurace fungovala uspokojivě, musí být respektováno pořadí pravidel,
test
musí být na prvním místě a potéuse
.
Pluginy
Snad nejsnáze pochopitelný koncept, protože jeho samotný název je docela popisný.
V podstatě plugins
jsou zodpovědní za rozšíření funkcí, které webpack ve výchozím nastavení nemá, jako je optimalizace balíčků, správa souborů, například HTML a CSS, a zpracování proměnných prostředí.
Podívejme se na náš konfigurační soubor pomocí pluginů:
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npm
const webpack = require('webpack'); //acceso a los 23 plugins que webpack trae por defecto
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
Body ke zvážení:
- V tomto příkladu musíte nejprve nainstalovat a importovat plugin
html-webpack-plugin
odnpm
dělá:npm i html-webpack-plugin
- Pluginy potřebují k použití instanci, takže uděláme
new HtmlWebpackPlugin()
a předáme vlastnosttemplate
a naznačíme trasu našehoindex.html
- Protože webpack ve výchozím nastavení neumožňuje výstup souborů
.html
potřebujeme tento plugin.
Režim
Sděluje webpacku, jakým způsobem chcete kód zabalit.
Může být v režimu production
:
module.exports = {
mode: 'production',
};
Kde budou všechny naše výstupní soubory minifikovány.
Nebo může být v režimu development
:
module.exports = {
mode: 'development',
};
Kde všechny naše výstupní soubory nejsou minifikovány.
Typ a základní konfigurační soubor webpacku bude vypadat takto:
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npm
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
mode: 'production',
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
// más reglas...
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
// más plugins...
};
Odkazy
- Oficiální dokumentace
- Webový balíček 4, Praktický kurz | Fazt
- Naučte se webpack krok za krokem | Midudev
Závěry
- Webpack je pravděpodobně nejoblíbenější frontend modul wrapper.
- Chcete-li používat webpack, musíte nainstalovat 2 závislosti:
webpack
awebpack-cli
- Konfigurace Webpacku musí být provedena v souboru
webpack.config.js
který je vytvořen v kořenovém adresáři projektu. - Webpack má 5 základních bodů:
entry
,output
,loaders
,plugins
amode
. - Naučit se základnímu webovému balíčku je poměrně snadné, ale jak váš projekt roste a stává se složitějším, webový balíček bude také potřebovat složitější konfigurace. Tento příspěvek je pouze úvodní.
Následující články by vás mohly zajímat: