Co se změnilo od vydání mého článku o Webpacku z roku 2017?. Původní blog jsem napsal pro verzi 2, ale Webpack se nyní nachází ve stabilní verzi 4 a verze 5 je v betě. V tomto článku se tak zaměřím na změny ve Webpacku, které nám mohou usnadnit život.

Změny ve Webpacku

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řebujete žá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í. Nelíbí se vám složitá konfigurace? Nemáte rádi runtime kód Webpacku? Je pro vás Webpack pomalý? Jako alternativu tak můžete použít Rollup nebo Parcel.

Rollup byl vytvořen pro zrychlení bundlingu a pro snížení velikosti balíčků, čehož docílil zaměřením se 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 o dalších rozdílech 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. Tvůrci 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í. Tvůrci se poučili z předchozích zkušeností a snaží se zjednodušit konfiguraci, aby bylo použití Webpacku uživatelsky přívětivější. 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 je z nich nejvyspělejší a má stále hodně co říct.

Pokud byste se chtěli dozvědět více o změnách, které ve Webpacku proběhly, doporučuji následující odkazy:

• Webpack 3 announcement
• Webpack 3 migration guide
• Webpack 4 changelog
• Webpack 4 announcement
• Webpack 4 migration guide

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? Je to 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 je mód nebo proměnné prostředí z Webpack CLI příkazu.
• můžete použít TypeScript pro vaši Webpack konfiguraci, což umožní napovídání všech 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 ukázat Webpacku, jak přesně se ke každému z nich má chovat.