A webpack egy modulcsomagoló. Fő célja, hogy JavaScript fájlokat csomagoljon a böngészőben való használatra, ugyanakkor szinte bármilyen erőforrás vagy eszköz átalakítására, csomagolására vagy csomagolására is képes.
- Tartalomjegyzék
- Install
- Bevezetés
- Kezdjünk hozzá
- Böngészőkompatibilitás
- Fogalmak
- Pluginok
- Loaders
- Files
- JSON
- Transzpilálás
- Templating
- Styling
- Frameworks
- Performance
- Modulformátumok
- Kódfelosztás
- Optimalizálás
- Hozzájárulás
- Saját pluginok és betöltők készítése
- Támogatás
- Licenc
- Core Team
- Szponzorálás
- Prémium partnerek
- Egyéb támogatók és szponzorok
- Arany szponzorok
- Ezüst szponzorok
- Bronz szponzorok
- Támogatók
- Külön köszönet
Tartalomjegyzék
- Telepítés
- Bevezetés
- Koncepciók
- Támogatás
- Támogatás
- Core Team
- Támogatás
- Premium. Partnerek
- Más támogatók és szponzorok
- Arany szponzorok
- Ezüst szponzorok
- Bronz szponzorok
- Támogatók
- Külön köszönet
Install
Install with npm:
npm install --save-dev webpack
Telepítés yarn-nal:
yarn add webpack --dev
Bevezetés
A webpack egy bundler a modulokhoz. Fő célja, hogy JavaScriptfájlokat csomagoljon a böngészőben való használatra, de emellett képes szinte bármilyen erőforrás vagy eszköz átalakítására, csomagolására vagy csomagolására.
TL;DR
- Bundles ES Modules, CommonJS és AMD modulok (akár kombinálva is).
- Elkészíthet egyetlen csomagot vagy több darabot, amelyek aszinkron módon töltődnek be futásidőben (a kezdeti betöltési idő csökkentése érdekében).
- A függőségek a fordítás során feloldódnak, csökkentve a futásidő méretét.
- A betöltők a fordítás során előfeldolgozhatják a fájlokat, pl. TypeScriptet JavaScriptre, Handlebars karakterláncokat fordított függvényekre, képeket Base64-re, stb.
- Magasan moduláris bővítményrendszer, hogy bármi mást elvégezzen, amit az alkalmazás megkövetel.
Kezdjünk hozzá
Nézze meg a webpack gyors kezdeti útmutatóját és a többi útmutatót.
Böngészőkompatibilitás
A webpack támogatja az összes ES5-kompatibilis böngészőt (az IE8 és az alattiak nem támogatottak). a webpacknek szüksége van Promise a import() és require.ensure() számára is. Ha régebbi böngészőket szeretne támogatni, akkor be kell töltenie egy polyfillt, mielőtt ezeket a kifejezéseket használná.
Fogalmak
Pluginok
a webpack gazdag plugininterfészettel rendelkezik. Maga a webpack legtöbb funkciója ezt a plugin felületet használja. Ez teszi a webpacket nagyon rugalmassá.
| Name | Status | Install Size | Description |
|---|---|---|---|
| mini…css-extract-plugin | Extrahálja a CSS-t külön fájlokba. CSS-t tartalmazó JS fájlonként egy CSS fájlt hoz létre. | ||
| compression-webpack-plugin | Készíti elő az eszközök tömörített verzióit, hogy Content-Encoding | ||
| html-webpack-rel szolgálhassa ki őket.plugin | Egyszerűsíti a HTML fájlok létrehozását (index.html) a csomagok kiszolgálásához |
Loaders
webpack lehetővé teszi a loaderek használatát a fájlok előfeldolgozásához. Ez lehetővé teszi, hogy a JavaScripten túlmenően bármilyen statikus erőforrást csomagoljon. Könnyen megírhatja saját loadereit a Node.js segítségével.
A loaderek aktiválása loadername! előtagok használatával történik a require() utasításokban,vagy automatikusan alkalmazzák regex segítségével a webpack konfigurációjából.
Files
| Name | Status | Install Size | Description |
|---|---|---|---|
| raw-loader | Fájl nyers tartalmának betöltése (utf-8) | ||
| val-loader | A kódot modulként hajtja végre és az exportot JS kódnak tekinti | ||
| url-loader | A fájl betöltőhöz hasonlóan működik, de képes Data Url-t visszaadni, ha a fájl kisebb, mint egy határérték | ||
| file-loader | Küldi a fájlt a kimeneti mappába és visszaadja a (relatív) url-t |
JSON
| Név | Status | Install Size | Description |
|---|---|---|---|
| Tölti és transzpilálja a CSON fájlt |
Transzpilálás
| Név | Status | Install Size | Description |
|---|---|---|---|
| Babel | |||
| betölti az ES2015+ kódot és transzpilálja ES5-re a Traceur segítségével | |||
| A TypeScriptet úgy tölti be, mint a JavaScriptet | |||
| Tölti a CoffeeScriptet, mint a JavaScriptet |
Templating
| Name | Status | Install Size | Description |
|---|---|---|---|
| Exportálja a HTML-t stringként, statikus erőforrásokra való hivatkozást igényel | |||
| Mopsz sablonok betöltése és egy függvény visszaadása | |||
| Kompilálja a Markdown-t HTML-be | |||
| betölti és átalakítja a HTML fájlt a PostHTML segítségével | |||
| Kézikönyvet fordít HTML-be |
Styling
| Name | Státusz | Telepítési méret | Megnevezés |
|---|---|---|---|
<style> |
Egy modul exportjának stílusként való hozzáadása a DOM-hoz | ||
| Letölti a CSS fájlt a feloldott importokkal és visszaadja a CSS kódot | |||
| Letölti és lefordítja a LESS fájlt | |||
| betölti és lefordítja a Sass/SCSS fájlt | |||
| Betölti és lefordítja a Stylus fájlt | |||
| Letölt és átalakít egy CSS/SSS fájlt a PostCSS |
Frameworks
| Name | Status | Install Size | Description |
|---|---|---|---|
| Vue komponensek betöltése és fordítása | |||
Feldolgozza a HTML & CSS-t a választott preprocesszorral és require() Webkomponensek mint első osztályú modulok |
|||
| Az Angular 2 komponensek betöltése és fordítása | |||
| Riot official webpack loader |
Performance
webpack aszinkron I/O-t használ és többszintű gyorsítótárral rendelkezik. Ezáltal a webpack gyors és hihetetlenül gyors az inkrementális fordításoknál.
Modulformátumok
a webpack támogatja az ES2015+, CommonJS és AMD modulokat a dobozból. Okos statikai elemzést végez a kódod AST-jén. Még egy kiértékelő motorral is rendelkezik az egyszerű kifejezések kiértékeléséhez. Ez lehetővé teszi a legtöbb létező könyvtár támogatását a dobozból.
Kódfelosztás
A webpack lehetővé teszi, hogy a kódbázisát több részre ossza. A fürtök aszinkron módon töltődnek be futásidőben. Ez csökkenti a kezdeti betöltési időt.
Optimalizálás
A webpack számos optimalizálást tud elvégezni, hogy csökkentse a JavaScript kimeneti méretét a gyakran használt modulok deduplikálásával, kicsinyítéssel, és a kódfelosztáson keresztül teljes ellenőrzést ad arra vonatkozóan, hogy mi töltődik be kezdetben és mi futásidőben. A kóddarabokat a hash-ek használatával cache-baráttá is teheti.
Hozzájárulás
Azt szeretnénk, ha a webpackhez való hozzájárulás szórakoztató, élvezetes és tanulságos lenne bárki és mindenki számára. Van egy élénk ökoszisztémánk, amely túlmutat ezen az egyetlen repón. Szeretettel várjuk, hogy megnézd a szervezetünk bármelyik tárolóját vagy a webpack-contrib szervezetet, amely az összes betöltőnknek és bővítményünknek otthont ad.
A hozzájárulás messze túlmutat a pull requesteken és commitokon. Bár szeretjük, ha lehetőséget adunk arra, hogy rányomd a bélyeged a webpackre, örömmel fogadjuk a különféle egyéb hozzájárulásokat is, például:
- Dokumentáció frissítések, fejlesztések, tervek vagy hibajavítások
- Szövegírás vagy nyelvtani javítások
- README.md javítások vagy újratervezések
- Unit, vagy funkcionális tesztek hozzáadása
- GitHub problémák vizsgálata — különösen annak megállapítása, hogy egy probléma még mindig fennáll-e vagy reprodukálható-e.
- #webpack keresés a twitteren és segítségnyújtás másnak, akinek segítségre van szüksége
- Mások megtanítása, hogyan járuljon hozzá a webpack számos reposának egyikéhez!
- Blogot írni, beszélni vagy oktatóanyagot készíteni a webpack valamelyik számos funkciójáról.
- Segíteni másoknak a webpack gitter csatornánkon.
A kezdéshez nézd meg a hozzájárulásról szóló dokumentációnkat.
Ha aggódsz, vagy nem tudod, hol kezdd, bármikor kapcsolatba léphetsz Sean Larkinnal (@TheLarkInn) a Twitteren, vagy egyszerűen küldj be egy problémát, és egy karbantartó segíthet útmutatást adni!
Egy sorozatot is indítottunk a Medium kiadványunkon The Contributor’s Guide to webpack címmel. Szeretettel várjuk, hogy elolvassa, és tegye fel kérdéseit vagy válaszait, ha még segítségre van szüksége.
A webpackről szeretne beszélni? Szívesen átnéznénk az előadásod absztraktját/CFP-jét! Elküldheted e-mailben a webpack opencollective com címre, és tudunk mutatókat vagy tippeket adni!!!
Saját pluginok és betöltők készítése
Ha készítesz egy betöltőt vagy plugint, szeretnénk <3 ha nyílt forráskódúvá tennéd, és feltennéd az npm-re. Követjük a x-loader, x-webpack-plugin elnevezési konvenciót.
Támogatás
A webpacket egy alacsony szintű eszköznek tekintjük, amelyet nem csak önállóan, hanem más fantasztikus eszközök alá rétegezve is használunk. Rugalmassága miatt a webpack nem mindig a legegyszerűbb belépő szintű megoldás, azonban úgy gondoljuk, hogy a legerősebb. Ennek ellenére mindig keressük a módját annak, hogy javítsuk és egyszerűsítsük az eszközt anélkül, hogy a funkcionalitást veszélyeztetnénk. Ha bármilyen ötleted van arra, hogyan érhetnénk el ezt, csupa fül vagyunk!
Ha még csak most kezded, nézd meg az új dokumentáció és koncepciók oldalunkat. Ez egy magas szintű áttekintést tartalmaz, ami nagyszerű a kezdőknek!!!
A webpack 1 dokumentumokat keresel? Nézd meg a régi wikit, de vedd figyelembe, hogy ez az elavult verzió már nem támogatott.
Ha szeretnél valamit megbeszélni, vagy csak segítségre van szükséged, itt van a Gitter szobánk, ahol mindig vannak olyan személyek, akik segíteni szeretnének!
Ha még mindig nehézségeid vannak, örülnénk, ha a StackOverflow-ra írnál egy kérdést a webpack taggel. Sokkal könnyebb válaszolni azokra a kérdésekre, amelyek tartalmazzák a webpack.config.js-t és a releváns fájlokat! Tehát ha meg tudod adni ezeket, rendkívül hálásak leszünk (és nagyobb valószínűséggel segítünk megtalálni a választ!)
Ha értesz a twitterhez, tweetelhetsz #webpack a kérdéseddel, és valaki képes lesz elérni és segíteni is.
Ha felfedeztél egy 🐜 vagy van egy funkciójavaslatod, nyugodtan hozz létre egy problémát a Githubon.
Licenc
Core Team
 Tobias Koppers Core alapító. of webpack |
 Johannes Ewald Loaders & Plugins Early adopter of webpack |
 Sean T. Larkin Sajtókapcsolatok A core team alapítója |
 Kees Kluskens Development Kees Kluskens Development Szponzor |
Szponzorálás
A magcsapat legtöbb tagja, webpack közreműködők és az ökoszisztémában közreműködők szabadidejükben végzik ezt a nyílt forráskódú munkát. Ha komoly feladatra használod a webpacket, és szeretnéd, hogy több időt fordítsunk rá, kérjük, adományozz. Ez a projekt a te jövedelmedet/produktivitásodat is növeli. Gyorsabbá teszi a fejlesztést és az alkalmazásokat, és csökkenti a szükséges sávszélességet.
Az adományokat így használjuk fel:
- Megengedjük a core csapatnak, hogy a webpacken dolgozzon
- Megköszönjük a hozzájárulóknak, ha nagy mennyiségű időt fektettek a hozzájárulásba
- Támogatjuk azokat a projekteket az ökoszisztémában, amelyek nagy értéket képviselnek a felhasználók számára
- Támogatjuk azokat a projekteket, amelyeket a legtöbb szavazatot kapják (folyamatban lévő munka)
- Infrastruktúra költségei
- Pénzkezelési díjak
Prémium partnerek
Egyéb támogatók és szponzorok
Az OpenCollective használata előtt, az adományok névtelenül történtek. Most, hogy átálltunk, szeretnénk elismerni ezeket a szponzorokat (és azokat, akik továbbra is az OpenCollective használatával adományoznak). Ha valakit kihagytunk, kérjük, küldjön nekünk egy PR-t, és felvesszük a listára.
Arany szponzorok
Legyen arany szponzor, és a logója felkerül a Githubon található README-ünkre egy linkkel az oldalára.
Ezüst szponzorok
Legyél ezüst szponzor, és a Githubon lévő README-ünkön megjelenik a logód egy linkkel az oldaladra.
Bronz szponzorok
Legyél bronz szponzor és kapd meg a logódat a Githubon lévő README-ünkön, egy linkkel az oldaladra.
Támogatók
Légy támogató, és a Githubon lévő README-ünkön megjelenik a képed egy linkkel az oldaladra.
Külön köszönet
(Időrendi sorrendben)
- @google a Google Web Toolkitért (GWT), amelynek célja a Java JavaScriptre történő fordítása. Hasonló Code Splittinget tartalmaz, mint a webpack.
- @medikoo a modules-webmake-hez, ami egy hasonló projekt. webpack azért született, mert Code Splittinget akartam a modules-webmake-hez. Érdekes módon a Code Splitting kérdés még mindig nyitott (köszönet @Phoscurnak is a vitáért).
- @substack a browserify-ért, ami egy hasonló projekt és sok ötlet forrása.
- @jrburke a require-ért.js, ami egy hasonló projekt és sok ötlet forrása.
- @defunctzombie a browser-field spec-ért, ami modulokat tesz elérhetővé a node.js, browserify és webpack számára.
- Minden korai webpack felhasználó, aki hozzájárult a webpackhez kérdések vagy PR-ok írásával. Befolyásoltátok az irányt…
- @shama, @jhnns és @sokra a projekt fenntartásáért
- Mindenki, aki betöltőt írt a webpackhez. Ti vagytok az ökoszisztéma…
- Mindenki, akit itt elfelejtettem megemlíteni, de szintén hatással volt a webpackre.