Webpack — 2019 update
Od mé série článků o Webpacku v roce 2017 se mnoho změnilo. Původní série byla napsaná pro verzi 2 a Webpack je teď ve stabilní verzi 4 a verze 5 je v betě. V tomto článku se zaměřím na změny ve Webpacku, které nám mohou opět usnadnit život.
Změny
Webpack CLI a podpora Nodu
Webpack ukončil podporu Nodu v4 (minimální podporovaná verze je teď 8), aby mohl využívat novou syntaxi jazyka a nové datové struktury. Projekt byl navíc rozdělen do dvou samostatných balíčků. Hlavní funkcionalita Webpacku je nadále v balíčku webpack
a můžete ji použít ve svých Node scriptech. Pokud chcete používat Webpack v CLI, musíte si nainstalovat také webpack-cli
balíček.
Nulová konfigurace
Pokud potřebujete používat Webpack pouze jako JavaScript bundler a nepotřebuje žádné loadery nebo další výhody, které Webpack poskytuje, můžete pustit pouze příkaz webpack --mode=(production||development)
v CLI. Příkaz používá src/index.js
jako entry point a vytvořené balíčky ukládá do složky dist
.
Webpack módy
Všimli jste si mode
možnosti v předchozí sekci? Webpack od verze 4 poskytuje dva módy ( production
a development
), které ovlivňují jeho defaultní konfiguraci. Některé pluginy byly také přesunuty do defaultní konfigurace, abyste se o ně nemuseli starat. Všechny změny můžete nalézt v návodu pro migraci.
Production
V produkčním módu Webpack poskytuje optimalizace jako je minifikace, tree-shaking, side-effect-free module pruning a scope hoisting out-of-box.
Development
V development módu jsou aktivované eval-source-maps a path names pro lepší developer experience.
Side-Effects
Od verze 4 Webpack automaticky kontroluje package.json
každého balíčku, který ve svém projektu používáte. Pokud tento soubor obsahuje položku sideEffects: false
, Webpack ví, že může aktivovat tree-shaking pro odstranění nepoužitého kódu, což zrychlí tvorbu balíčku a sníží jeho velikost.
CommonsChunkPlugin
Verze 4 odstraňuje tento plugin a jeho chování automaticky povoluje pomocí výše zmíněných módů. Pokud navíc chcete mít úplnou kontrolu nad nastavením code splittingu ve vaší aplikaci, můžete použít klíčoptimization
ve Webpack konfiguraci.
Není už Webpack zastaralý?
Po vzniku a popularizaci Webpacku se objevilo několik dalších projektů, které se snaží řešit problémy, kterými Webpack trpí. Nemáte rádi složitou konfiguraci? Nemáte rádi runtime kód Webpacku? Je pro vás Webpack pomalý? Můžete použít Rollup nebo Parcel.
Rollup byl vytvořen pro zrychlení bundlingu a pro snížení velikosti balíčků, čehož docílil pomocí zaměření pouze na ES6 module formát. Parcel se, na druhou stranu, zaměřuje na minimální konfiguraci nutnou pro jeho použití. Také podporuje HTML soubory jako své entry pointy.
Pokud byste se rádi dozvěděli další rozdíly mezi těmito bundlery, doporučuji například tento článek, výběr mezi Webpackem, Parcellem a Rollupem totiž již není tak přímočarý jako dříve. Webpack udělal ve verzi 4 velký skok ve svém výkonu a zmenšil velikost svého runtime kódu. Také přidali defaultní konfiguraci, což práci s Webpackem velmi zjednodušuje. Od verze 5 navíc plánují plnou podporu cachování a paralelismu, což Webpack opět značně zrychlí. Výběr správného bundleru tedy závisí na vašich preferencích a měli byste je nejlépe všechny otestovat, než některý vyberete. Já osobně bych si opět vybral Webpack a to zejména kvůli jeho značně velké komunitě.
Shrnutí
Jako můžete vidět, Webpack se nadále vyvíjí. Poučili se z předchozích zkušeností a snaží se zjednodušit konfiguraci, aby bylo použití Webpacku více uživatelsky přívětivé. Také pracují na výkonu a verze 5 přinese plnou podporu cachování a paralelismu. Na rozdíl od roku 2017 máte dnes na výběr z více bundlerů, ale Webpack jez nich nejvyspělejší a má stále hodně co říct.
Pokud byste se dozvěděli více o změnách, které ve Webpacku proběhly, doporučuji následující odkazy:
Věděli jste?
Webpack prodělal některé menší změny, které by vás také mohly zajímat. Věděli jste, že:
- konfigurace může exportovat pole? Vhodné pokud podporujete více targetů (node, prohlížeč) pro vaši aplikaci, knihovnu.
- konfigurace může exportovat funkci? Ta je následně zavolána s parametry jako jemód nebo proměnné prostředí z webpack CLI příkazu.
- můžete použít TypeScript pro váši Webpack konfiguraci, což umožní napovídání všechny položek konfigurace?
- Webpack umožňuje přímo importovat JSON soubory bez loaderu?
- můžete importovat nebo exportovat jakýkoliv lokální WebAssembly modul?
- můžete použít tzv. “magic comments” pro dynamické importy? Díky ním můžete říct Webpacku jak přesně se ke každému z nich má chovat.