Webpack — the module bundler
Webpack se stal v poslední době celkem skloňovanou technologií a často je srovnávan s dalšími utilitami jako je Gulp nebo Grunt. V tomto a několika dalších článcích se snažím vysvětlit princip a filosofii Webpacku a shrnout pár případů, kdy chceme a nechceme Webpack používat a jak jej používat.
Články vychází z textu, který jsem sepsal k ukázkovým konfiguracím Webpacku na Githubu, a které vznikly v rámci vzdělávacích meetingů u nás v Ackee ❤.
Co je Webpack
Co jsou moduly
Node.js od svého počátku podporuje CommonJS code spliting pro rozdělení programového kódu do modulů závislostí, které mohou být v případě potřeby nahrány a použity:
var $ = require('jquery');— V tomto případě je jQuery nahráno jako závislost v nějakém modulu a je možné je použit.
module.export = jquery; — V tomto případě je jQuery exportováno z modulu a může být někde použito jako závislost.
Code splitting a rozdělení do modulů chceme dělat zejména z důvodů přehlednosti a jednoduché správy kódu. Je to klasická inženýrská praxe známá z jazyků jako je C, C++, PHP, Ruby, Python, Java ... a proto ji zavedl i Node.js jakožto terminálový interpret Javascriptu.
Problémem Javascriptu interpretovaného prohlížečem je, že nativně žádný code splitting nepodporuje. Všechny scripty jsou zpracovánány v rámci jednoho kontextu v prohlížeči v pořadí v jakém jsou parsovány z HTML. Pak vzniká problém s globálními proměnnými a kontextem existence proměnných a často ve větším projektu nemusí být jasné, odkud se vlastně daná závislost bere a proč ten kód vlasně funguje.
Příprava modulů pro prohlížeč
Zde přichází na řadu Webpack, který se snaží o podporu code splittingu v prohlížeči tím, že nám dovolí psát moduly stejně, jako kdybychom psali Javascript pro Node.js interpret (tj. CommonJS, ale od verze 2.0 umí naivně i ES modules a AMD). Máme tedy Javascriptový kód napsaný pomocí (třeba) CommonJS modulů jako v Node.js. Jak tento kód předat prohlížeči, aby s ním uměl pracovat?
Webpack zpracuje kód napsaný modulárně a vytvoří z něj balíček (pro jednoduchost řekněme jeden js soubor, ale nemusí to být nutně pravda). Navíc dovoluje použít jako moduly také npm balíčky jako třeba React nebo jQuery, které pak není nutné nahrávat jako další script do HTML dokumentu. To znamená: konec globálních proměnných, outscopingu a nepredikovatelného kódu.
Někteří mohou namítnout, že pro tyto účely už existuje utilita Browserify a mají pravdu. Jenže Webpack jde ještě dál. Základním účelem Webpacku je sice práce s Javascriptovými moduly a vytváření balíčků pro prohlížeč, ale Webpack je vytvořený tak, že umožnuje práci s různými druhy assetů. Při správné konfiguraci je schopný zpracovat tyto assety a vytvořit balíček (nebo balíčky), které se jednoduše nahrají na webserver a vše funguje tak, jak má. To znamená, že je možné nahrát jako závislost do nějaké js modulu třeba Sass nebo css.
Hmm, to je hezké. A nebo ne? No, kdo ví, to je asi na úhlu pohledu.
Co jsou Webpack moduly
Webpack moduly jsou vlastně cokoliv, co lze v kódu, který Webpack zpracovávárequirenout (importnout). Tudíž to mohou být CommonJS moduly, ES moduly, AMD (tyto tři umí Webpack nativně), ale také Sass @import v Sass kódu(ne nativně, ale pomocí rozšíření), a Webpack je bude umět při správně konfiguraci projít a zpracovat.
Webpack dovoluje importovat do js i assety, které nejsou Javascript, například:
- jsx, coffee
- css, sass, less, stylus, postcss
- png, jpeg, svg
- json, yaml, xml a další.
Je nutné si pamatovat, že výsledkem Webpacku je vždy primárně js balíček (nebo balíčky) pro použití v prohlížeči. To znamená, že je nutné s ostatními assety něco udělat. Musí být zpracovány a převedeny na js nebo nějakým způsobem vyextrahovány ze zdrojových modulů do samostatných souborů. Na tuto práci používá Webpack loadery a pluginy, které mu umožňují provádět specifický preprocessing nad moduly a balíčky před tím, než je výstup uložen do filesystému.
Shrnutí
Zopakujme si základní vlastnosti Webpacku:
- primární účel = vytváření js balíčků z modulárního js kódu pro použití v prohlížeči
- tím, jak je vytvořen, umožňuje transformovat, zpracovat, modifikovat či zabalit do balíčku téměř jakýkoliv druh assetu jako modulu
- pro preprocessing assetů používá loadery a pluginy
- vstupem je modulární Webpack kód (tj. moduly různých typů), výstupem je js balíček (a také další soubory, pokud je správně aplikován preprocessing)
V dalším článku
Jak vypadá konfigurace Webpacku a co je jejím obsahem. Co jsou loadery a pluginy a jak to celé cca. funguje.
