Webpack je bundler modulů. Jeho hlavním účelem je svazovat soubory JavaScriptu pro použití v prohlížeči, je však schopen transformovat, svazovat nebo balit téměř jakýkoli zdroj nebo prostředek.
- Obsah
- Instalovat
- Úvod
- Začínáme
- Kompatibilita s prohlížeči
- Koncepty
- Zásuvné moduly
- Zavaděče
- Soubory
- JSON
- Transpirování
- Šablonování
- Styling
- Frameworks
- Výkon
- Formáty modulů
- Dělení kódu
- Optimalizace
- Přispívání
- Vytváření vlastních zásuvných modulů a zavaděčů
- Podpora
- Licence
- Jádro týmu
- Sponzorování
- Prémioví partneři
- Další podporovatelé a sponzoři
- Zlatí sponzoři
- Stříbrní sponzoři
- Bronzoví sponzoři
- Podporovatelé
- Zvláštní poděkování patří
Obsah
- Instalace
- Úvod
- Koncepce
- Podpora
- Podpora
- Jádro týmu
- Sponzoring
- Premium Partneři
- Další podporovatelé a sponzoři
- Zlatí sponzoři
- Stříbrní sponzoři
- Bronzoví sponzoři
- Podporovatelé
- Speciální poděkování
Instalovat
Instalace pomocí npm:
npm install --save-dev webpack
Instalace pomocí yarn:
yarn add webpack --dev
Úvod
webpack je bundler pro moduly. Jeho hlavním účelem je svazovat soubory JavaScriptu pro použití v prohlížeči, nicméně je také schopen transformovat, svazovat nebo zabalit téměř jakýkoli zdroj nebo prostředek.
TL;DR
- Svazuje moduly ES, CommonJS a moduly AMD (i kombinované).
- Může vytvořit jeden svazek nebo více svazků, které se za běhu asynchronně načítají (aby se snížila počáteční doba načítání).
- Závislosti se řeší během kompilace, čímž se snižuje velikost za běhu.
- Zálohovače mohou při kompilaci předzpracovávat soubory, např. TypeScript na JavaScript, řetězce Handlebars na zkompilované funkce, obrázky na Base64 atd.
- Vysoce modulární systém zásuvných modulů, který umožňuje provádět cokoli dalšího, co vaše aplikace vyžaduje.
Začínáme
Podívejte se na stručného průvodce webpackem a další průvodce.
Kompatibilita s prohlížeči
webpack podporuje všechny prohlížeče, které jsou kompatibilní s ES5 (IE8 a nižší nejsou podporovány).webpack také potřebuje Promise pro import() a require.ensure(). Pokud chcete podporovat starší prohlížeče, budete muset před použitím těchto výrazů načíst polyfill.
Koncepty
Zásuvné moduly
webpack má bohaté zásuvné rozhraní. Většina funkcív rámci samotného webpaku používá toto rozhraní zásuvných modulů. Díky tomu je webpack velmi flexibilní.
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
| mini-css-extract-plugin | Extrahuje CSS do samostatných souborů. Vytvoří CSS soubor pro každý JS soubor, který obsahuje CSS. | ||
| compression-webpack-plugin | Připraví komprimované verze prostředků, aby je mohl obsluhovat pomocí Content-Encoding | ||
| html-webpack-.plugin | Zjednodušuje vytváření souborů HTML (index.html) pro obsluhu vašich balíčků |
Zavaděče
webpack umožňuje používat zavaděče pro předzpracování souborů. To umožňuje vytvářet svazkyjakékoli statické zdroje daleko nad rámec JavaScriptu. Můžete si snadno napsat vlastní loadery pomocí Node.js.
Loadery se aktivují pomocí předpon loadername! v příkazech require(),nebo se automaticky aplikují pomocí regexu z konfigurace webpaketu.
Soubory
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
| raw-loader | Načítá surový obsah souboru (utf-8) | ||
| val-loader | Vykonává kód jako modul a považuje export za kód JS | ||
| url-loader | Funguje jako zavaděč souborů, ale může vrátit datový url, pokud je soubor menší než limit | ||
| file-loader | Vysílá soubor do výstupní složky a vrací (relativní) url |
JSON
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
| Naloží a transponuje soubor CSON |
Transpirování
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
| Načítá kód ES2015+ a transplikuje do ES5 pomocí Babel | |||
| Načítá kód ES2015+ a transplikuje do ES5 pomocí Traceur | |||
| Přečte TypeScript jako JavaScript | |||
| Načítá CoffeeScript jako JavaScript |
Šablonování
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
| Exportuje HTML jako řetězec, vyžaduje odkazy na statické zdroje | |||
| Načítá šablony Pug a vrací funkci | |||
| Kompiluje Markdown do HTML | |||
| Naloží a transformuje HTML soubor pomocí PostHTML | |||
| Kompiluje Handlebars do HTML |
Styling
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
<style> |
Přidat exporty modulu jako styl do DOM | ||
| Naloží soubor CSS s vyřešenými importy a vrátí kód CSS | |||
| Načte a zkompiluje soubor LESS | |||
| Naloží a zkompiluje soubor Sass/SCSS | |||
| Naloží a zkompiluje soubor Stylus | |||
| Načítá a transformuje soubor CSS/SSS pomocí PostCSS |
Frameworks
| Název | Stav | Velikost instalace | Popis |
|---|---|---|---|
| Načítá a kompiluje komponenty Vue | |||
Zpracování HTML & CSS pomocí zvoleného preprocesoru a require() webových komponent jako modulů první třídy |
|||
| Načítá a kompiluje komponenty Angular 2 | |||
| Riot official webpack loader |
Výkon
webpack používá asynchronní I/O a má více úrovní cachování. Díky tomu je webpack rychlýa neuvěřitelně rychlý při inkrementálních kompilacích.
Formáty modulů
webpack podporuje moduly ES2015+, CommonJS a AMD již z výroby. Provádí chytrou statickou analýzu AST vašeho kódu. Má dokonce vyhodnocovací engine pro vyhodnocováníjednoduchých výrazů. Díky tomu můžete hned po vybalení podporovat většinu existujících knihoven.
Dělení kódu
webpack umožňuje rozdělit vaši kódovou základnu na více částí. Části se za běhu načítají asynchronně. Tím se zkrátí počáteční doba načítání.
Optimalizace
webpack umí provést mnoho optimalizací, aby snížil výstupní velikost vašehoJavaScriptu deduplikací často používaných modulů, minimalizací a tím, že vám dává plnou kontrolu nad tím, co se načte na začátku a co se načte za běhu pomocí rozdělení kódu. Pomocí hashů může také zajistit, aby vaše kousky kódu byly vhodné pro ukládání do mezipaměti.
Přispívání
Chceme, aby přispívání do WebPacku bylo zábavné, příjemné a vzdělávací pro každého a pro všechny. Máme živý ekosystém, který přesahuje rámec tohoto jediného repozitáře. Vítáme vás, když se podíváte do kteréhokoli repozitáře v naší organizaci nebo do organizace webpack-contrib, ve které se nacházejí všechny naše zavaděče a zásuvné moduly.
Příspěvky jdou daleko za požadavky na stažení a revize. Přestože vám rádi dáváme příležitost vtisknout WebPacku svou pečeť, jsme nadšeni i z řady dalších příspěvků, mezi které patří:
- Aktualizace dokumentace, vylepšení, návrhy nebo opravy chyb
- Opravy pravopisu nebo gramatiky
- README.md opravy nebo předělávky
- Přidání jednotkových nebo funkčních testů
- Probírání problémů na GitHubu – zejména určení, zda problém stále přetrvává nebo je reprodukovatelný.
- Hledání #webpack na twitteru a pomoc někomu dalšímu, kdo potřebuje pomoc
- Učení ostatních, jak přispívat do jednoho z mnoha repozitářů WebPacku!
- Blogování, mluvení nebo vytváření návodů o jedné z mnoha funkcí webpaku.
- Pomáhání ostatním v našem gitterovém kanálu webpaku.
Chcete-li začít, podívejte se na naši dokumentaci o přispívání.
Pokud máte obavy nebo nevíte, kde začít, můžete se vždy obrátit na Seana Larkina (@TheLarkInn) na Twitteru nebo jednoduše odeslat problém a správce vám pomůže poradit!
Na našem médiu jsme také zahájili seriál publikací nazvaný Průvodce přispěvatele webpackem. Uvítáme, když si ho přečtete a napíšete nám případné dotazy nebo odpovědi, pokud stále potřebujete pomoc.
Chcete mluvit o webpacku? Rádi si prohlédneme abstrakt vaší přednášky/CFP! Můžete ji poslat e-mailem na adresu webpack opencollective com a my vám můžeme dát rady nebo tipy!!!
Vytváření vlastních zásuvných modulů a zavaděčů
Pokud vytvoříte zavaděč nebo zásuvný modul, byli bychom <3 rádi, kdybyste ho dali jako open source a umístili na npm. Dodržujeme konvenci pojmenování x-loader, x-webpack-plugin.
Podpora
Považujeme webpack za nízkoúrovňový nástroj používaný nejen samostatně, ale i vrstvený pod dalšími úžasnými nástroji. Vzhledem ke své flexibilitě není webpack vždy nejjednodušším řešením základní úrovně, nicméně věříme, že je nejmocnější. Přesto vždy hledáme způsoby, jak tento nástroj vylepšit a zjednodušit, aniž by to bylo na úkor funkčnosti. Pokud máte nějaké nápady, jak toho dosáhnout, jsme jedno ucho!
Pokud teprve začínáte, podívejte se na naši novou stránku s dokumenty a koncepty. Ta obsahuje přehled na vysoké úrovni, který je skvělý pro začátečníky!!!
Hledáte dokumentaci k WebPacku 1? Podívejte se na starou wiki, ale mějte na paměti, že tato zastaralá verze již není podporována.
Pokud chcete o něčem diskutovat nebo jen potřebujete pomoc, zde je naše místnost Gitter, kde se vždy najdou jedinci, kteří chtějí pomoci!
Pokud máte stále potíže, budeme rádi, když položíte dotaz na StackOverflow se značkou webpack. Je mnohem snazší odpovídat na otázky, které obsahují váš webpack.config.js a příslušné soubory! Takže pokud je můžete poskytnout, budeme vám nesmírně vděční (a s větší pravděpodobností vám pomůžeme najít odpověď!)
Pokud jste zdatní na Twitteru, můžete napsat svůj dotaz na Twitter #webpack a někdo by se vám měl ozvat a pomoci také.
Pokud jste objevili 🐜 nebo máte návrh na funkci, neváhejte vytvořit problém na Githubu.
Licence
Jádro týmu
 Tobias Koppers Jádro Zakladatel. WebPacku |
 Johannes Ewald Loadery & Zásuvné moduly Předchůdce WebPacku |
 Sean T. Larkin Vztahy s veřejností Zakladatel základního týmu |
 Kees Kluskens Vývoj . Sponzor |
Sponzorování
Většina členů základního týmu, přispěvatelů balíku Webpack a přispěvatelů v ekosystému dělá tuto práci s otevřeným zdrojovým kódem ve svém volném čase. Pokud používáte webpack k vážným úkolům a chtěli byste, abychom do něj investovali více času, přispějte. Tento projekt zvýší i váš příjem/produktivitu. Zrychluje vývoj a aplikace a snižuje potřebnou šířku pásma.
Takto využíváme dary:
- Umožnit týmu jádra pracovat na WebPacku
- Poděkovat přispěvatelům, pokud investovali velké množství času do přispívání
- Podpořit projekty v ekosystému, které mají pro uživatele velkou hodnotu
- Podpořit projekty, které jsou nejvíce hlasovány (work in progress)
- Náklady na infrastrukturu
- Poplatky za manipulaci s penězi
Prémioví partneři
Další podporovatelé a sponzoři
Předtím jsme začali používat OpenCollective, byly dary poskytovány anonymně. Nyní, když jsme přešli na tento systém, bychom rádi ocenili tyto sponzory (a ty, kteří nadále přispívají pomocí OpenCollective). Pokud jsme někoho vynechali, pošlete nám prosím PR a my vás do tohoto seznamu přidáme.
Zlatí sponzoři
Staňte se zlatým sponzorem a získejte své logo v našem README na Githubu s odkazem na vaše stránky.
Stříbrní sponzoři
Staňte se stříbrným sponzorem a získejte své logo na našem README na Githubu s odkazem na vaše stránky.
Bronzoví sponzoři
Staňte se bronzovým sponzorem a získejte své logo na našem README na Githubu s odkazem na vaše stránky.
Podporovatelé
Staňte se podporovatelem a získejte svůj obrázek na našem README na Githubu s odkazem na vaše stránky.
Zvláštní poděkování patří
(v chronologickém pořadí)
- @google za Google Web Toolkit (GWT), jehož cílem je kompilovat jazyk Java do jazyka JavaScript. Obsahuje podobné dělení kódu jako webpack.
- @medikoo pro modules-webmake, což je podobný projekt. webpack vznikl, protože jsem chtěl Code Splitting pro modules-webmake. Zajímavé je, že otázka Code Splitting je stále otevřená (díky také @Phoscur za diskusi).
- @substack pro browserify, což je podobný projekt a zdroj mnoha nápadů.
- @jrburke pro require.js, což je podobný projekt a zdroj mnoha nápadů.
- @defunctzombie za specifikaci browser-field, která zpřístupňuje moduly pro node.js, browserify a webpack.
- Každý první uživatel webpacku, který přispěl do webpacku psaním issues nebo PR. Ovlivnili jste směr…
- @shama, @jhnns a @sokra za udržování tohoto projektu
- Každý, kdo napsal zavaděč pro webpack. Jste ekosystém…
- Všichni, které jsem tu zapomněl zmínit, ale také ovlivnili webpack.
.