webpack on moduulien niputtaja. Sen päätarkoitus on niputtaa JavaScript-tiedostoja käytettäväksi selaimessa, mutta se pystyy myös muuntamaan, niputtamaan tai paketoimaan lähes minkä tahansa resurssin tai resurssin.
- Sisällysluettelo
- Asenna
- Johdanto
- Aloittaminen
- Selainyhteensopivuus
- Käsitteet
- Liitännäiset
- Kuormaajat
- Tiedostot
- JSON
- Transpilointi
- Templating
- Styling
- Frameworks
- Suorituskyky
- Moduulimuodot
- Koodin jakaminen
- Optimoinnit
- Osallistuminen
- Omien liitännäisten ja lataajien luominen
- Tuki
- Lisenssi
- Ydintiimi
- Sponsorointi
- Premium-kumppanit
- Muut taustatukijat ja sponsorit
- Kultaiset sponsorit
- Hopeasponsorit
- Pronssisponsorit
- Tukijat
- Erityiskiitokset
Sisällysluettelo
- Asennus
- Sisällysluettelo
- Käsitteet
- Yhteistyö
- Tuki
- Ydinjoukkue
- Sponsorointi
- Premium Partners
- Other Backers and Sponsors
- Gold Sponsors
- Silver Sponsors
- Bronze Sponsors
- Backers
- Erityiset kiitokset
Asenna
Asenna npm:llä:
npm install --save-dev webpack
Install with yarn:
yarn add webpack --dev
Johdanto
webpack on moduulien bundler. Sen päätarkoitus on niputtaa JavaScript-tiedostoja käytettäväksi selaimessa, mutta se pystyy myös muuntamaan, niputtamaan tai paketoimaan lähes minkä tahansa resurssin tai resurssin.
TL;DR
- Niputtaa ES-moduulit, CommonJS:n ja AMD:n moduulit (myös yhdistettynä).
- Voi luoda yhden nipun tai useita kappaleita, jotka ladataan asynkronisesti ajonaikana (vähentää alkulatausaikaa).
- Riippuvuudet ratkaistaan kääntämisen aikana, mikä vähentää ajonaikaista kokoa.
- Lataajat voivat esikäsitellä tiedostoja kääntämisen aikana, esim. TypeScript JavaScriptiksi, Handlebars-merkkijonot käännetyiksi funktioiksi, kuvat Base64:ksi jne.
- Hyvin modulaarinen liitännäisjärjestelmä, jolla voi tehdä mitä tahansa muuta sovelluksesi vaatii.
Aloittaminen
Lue webpackin pika-aloitusopas ja muut oppaat.
Selainyhteensopivuus
webpack tukee kaikkia selaimia, jotka ovat ES5-yhteensopivia (IE8:aa ja sitä pienempiä selaimia ei tueta).webpack tarvitsee myös Promise import():lle ja require.ensure():lle. Jos haluat tukea vanhempia selaimia, sinun on ladattava polyfill ennen näiden lausekkeiden käyttöä.
Käsitteet
Liitännäiset
webpackilla on rikas liitännäisrajapinta. Suurin osa webpackin sisäisistä ominaisuuksistakäyttää tätä plugin-rajapintaa. Tämä tekee webpackista erittäin joustavan.
| Name | Status | Asennuskoko | Kuvaus |
|---|---|---|---|
| mini-css-extract-plugin | Purkaa CSS:n erillisiin tiedostoihin. Se luo CSS-tiedoston jokaista CSS:ää sisältävää JS-tiedostoa kohden. | ||
| compression-webpack-plugin | Valmistaa aineistoista pakattuja versioita, jotta ne voidaan tarjoilla sisällön koodauksen avulla | ||
| html-webpack…plugin | Yksinkertaistaa HTML-tiedostojen luomisen (index.html), jotta voit palvella pakettejasi |
Kuormaajat
Webpackin avulla voit käyttää kuormaajia tiedostojen esikäsittelyyn. Näin voit niputtaajokaista staattista resurssia paljon muutakin kuin JavaScriptiä. Voit helposti kirjoittaa omatloaderisi käyttäen Node.js:ää.
Loaderit aktivoidaan käyttämällä loadername!-esimerkkejä require()-lausekkeissa,tai ne otetaan automaattisesti käyttöön regexin avulla webpack-konfiguraatiostasi.
Tiedostot
| Nimi | Tila | Asennuskoko | Kuvaus |
|---|---|---|---|
| raw-loader | Lataa tiedoston raakasisällön (utf-8) | ||
| val-loader | Toteuttaa koodin moduulina ja pitää vientiä JS-koodina | ||
| url-loader | Toimii kuten tiedostonlataaja, mutta voi palauttaa Data Url:n, jos tiedosto on rajaa pienempi | ||
| file-loader | Siirtaa tiedoston tulostuskansioon ja palauttaa (suhteellisen) url |
JSON
| Name | Status | Install Size | Description |
|---|---|---|---|
| Lataa ja transpiloi CSON-tiedoston |
Transpilointi
| Nimi | Tila | Asennuskoko | Kuvaus |
|---|---|---|---|
| Lataa ES2015+-koodia ja transpiloi ES5:een Babelin avulla | |||
| Lataa ES2015+-koodia ja transpiloi ES5:een käyttäen Traceuria | |||
| Lataa TypeScriptiä kuten JavaScriptiä | |||
| Lataa CoffeeScriptiä kuin JavaScriptiä |
Templating
| Name | Tila | Asennuskoko | Kuvaus |
|---|---|---|---|
| Exports HTML as string, vaatii viittaukset staattisiin resursseihin | |||
| Lataa Pug-mallit ja palauttaa funktion | |||
| Kompiloi Markdown HTML:ksi | |||
| Lataa ja muuntaa HTML-tiedoston PostHTML:n avulla | |||
| Kompiloi Handlebars HTML:ksi |
Styling
| Name | Tila | Asennuskoko | Kuvaus |
|---|---|---|---|
<style> |
Moduulin viennin lisääminen tyylinä DOMiin | ||
| Lataa CSS-tiedoston ratkaistuilla importeilla ja palauttaa CSS-koodin | |||
| Lataa ja kääntää LESS-tiedoston | |||
| Lataa ja kääntää Sass/SCSS-tiedoston | |||
| Lataa ja kääntää Stylus-tiedoston | |||
| Lataa ja muuntaa CSS/SSS-tiedoston käyttäen PostCSS:ää |
Frameworks
| Name | Status | Install Size | Description |
|---|---|---|---|
| Lataa ja kääntää Vue-komponentit | |||
Käsittele HTML & CSS valitsemallasi esiprosessorilla ja require() Web-komponentit kuten ensimmäisen luokan moduulit |
|||
| Lataa ja kääntää Angular 2 -komponentit | |||
| Riot official webpack loader |
Suorituskyky
webpack käyttää asynkkaa I/O:ta ja siinä on useita välimuistitasoja. Tämä tekee webpackista nopean ja uskomattoman nopean inkrementaalisissa kompilaatioissa.
Moduulimuodot
webpack tukee ES2015+-, CommonJS- ja AMD-moduuleja suoraan laatikosta. Se tekee koodisi AST:stä nokkelaa tila-analyysiä. Siinä on jopa evaluointimoottori yksinkertaisten lausekkeiden evaluointia varten. Näin voit tukea useimpia olemassa olevia kirjastoja suoraan laatikosta.
Koodin jakaminen
webpackin avulla voit jakaa koodipohjan useisiin palasiin. Palaset ladataan asynkronisesti ajonaikana. Tämä vähentää alkuperäistä latausaikaa.
Optimoinnit
webpack voi tehdä monia optimointeja vähentääkseen JavaScriptiesi tulostuskokoa deduplikoimalla usein käytettyjä moduuleja, pienentämällä ja antamalla sinulle täydellisen kontrollin siitä, mitä ladataan aluksi ja mitä ladataan ajonaikana koodin jakamisen avulla. Se voi myös tehdä koodikappaleistasi välimuistiystävällisiä käyttämällä hasheja.
Osallistuminen
Tahdomme, että webpackiin osallistuminen on hauskaa, nautinnollista ja opettavaista kaikille. Meillä on elinvoimainen ekosysteemi, joka ulottuu tämän yhden repon ulkopuolelle. Toivotamme sinut tervetulleeksi tutustumaan mihin tahansa organisaatiomme arkistoon tai webpack-contrib-organisaatioon, jossa sijaitsevat kaikki lataajamme ja liitännäisohjelmamme.
Suoritukset menevät paljon pidemmälle kuin pull requestit ja commitit. Vaikka annamme mielellämme sinulle mahdollisuuden antaa leimasi webpackiin, otamme mielellämme vastaan myös monenlaisia muita kontribuutioita, kuten:
- Dokumentaatiopäivitykset, parannukset, muotoilut tai bugikorjaukset
- Kirjoitus- tai kielioppikorjaukset
- README.md-korjaukset tai uudelleensuunnittelut
- Yksikkö- tai toiminnallisten testien lisääminen
- GitHub-ongelmien tutkiminen — erityisesti sen määrittäminen, onko ongelma edelleen olemassa tai toistettavissa.
- #webpackin etsiminen twitterissä ja jonkun muun apua tarvitsevan auttaminen
- Opetus muille, miten osallistua johonkin webpackin monista reposista!
- Bloggaaminen, puhuminen tai opetusohjelmien luominen jostain webpackin monista ominaisuuksista.
- Auttaessasi muita webpackin gitter-kanavallamme.
Aloittaaksesi katso dokumentaatiotamme osallistumisesta.
Jos olet huolissasi tai et tiedä mistä aloittaa, voit aina ottaa yhteyttä Sean Larkiniin (@TheLarkInn) Twitterissä tai yksinkertaisesti lähettää ongelman, jolloin ylläpitäjä voi opastaa sinua!
Olemme myös aloittaneet sarjan Medium-julkaisussamme nimeltä The Contributor’s Guide to webpack. Toivotamme sinut tervetulleeksi lukemaan sen ja lähettämään kysymyksiä tai vastauksia, jos tarvitset vielä apua.
Haluatko puhua webpackista? Tarkastaisimme mielellämme puheesi abstraktin/CFP:n! Voit lähettää sen sähköpostitse osoitteeseen webpack opencollective com ja voimme antaa vinkkejä tai vihjeitä!!!
Omien liitännäisten ja lataajien luominen
Jos luot lataajan tai liitännäisen, haluaisimme <3 että avaat sen avoimen lähdekoodin ja laitat sen npm:ään. Noudatamme x-loader, x-webpack-plugin nimeämiskonventiota.
Tuki
Pitämme webpackia matalan tason työkaluna, jota käytetään paitsi yksinään myös kerroksittain muiden mahtavien työkalujen alla. Joustavuutensa vuoksi webpack ei ole aina helpoin aloitusratkaisu, mutta uskomme kuitenkin, että se on tehokkain. Tästä huolimatta etsimme aina tapoja parantaa ja yksinkertaistaa työkalua toiminnallisuudesta tinkimättä. Jos sinulla on ideoita keinoista tämän saavuttamiseksi, olemme kuulolla!
Jos olet vasta aloittelemassa, vilkaise uutta docs and concepts -sivuamme. Siellä on korkean tason yleiskatsaus, joka on hyvä aloittelijoille!!!
Etsitkö webpack 1 -dokumentteja? Tutustu vanhaan wikiin, mutta huomaa, että tätä vanhentunutta versiota ei enää tueta.
Jos haluat keskustella jostain asiasta tai vain tarvitsette apua, tässä on Gitter-huoneemme, jossa on aina henkilöitä, jotka haluavat auttaa!
Jos sinulla on edelleen vaikeuksia, haluaisimme, että kirjoittaisit kysymyksen StackOverflow’hun webpack-tagilla. On paljon helpompi vastata kysymyksiin, jotka sisältävät webpack.config.js:n ja asiaankuuluvat tiedostot! Joten jos voit antaa ne, olisimme erittäin kiitollisia (ja todennäköisemmin auttaisimme sinua löytämään vastauksen!)
Jos osaat twitteriä, voit twiitata #webpack kysymyksesi ja jonkun pitäisi pystyä tavoittamaan ja auttamaan myös.
Jos olet löytänyt 🐜 tai sinulla on ominaisuusehdotus, voit vapaasti luoda ongelman Githubiin.
Lisenssi
Ydintiimi
 Tobias Koppers Ydintiimi perustaja. of webpack |
 Johannes Ewald Loaders & Plugins Early adopter of webpack |
 Sean T. Larkin Julkiset suhteet Ydintiimin perustaja |
 Kees Kluskens Kehitys Kehitys Sponsori |
Sponsorointi
Pääosa ydintiimin jäsenistä, webpackin myötävaikuttajista ja ekosysteemin myötävaikuttajista tekevät tätä avoimen lähdekoodin työtä vapaa-ajallaan. Jos käytät webpackia johonkin vakavasti otettavaan tehtävään ja haluat, että panostamme siihen enemmän aikaa, lahjoita. Tämä projekti lisää myös sinun tulojasi/tuottavuuttasi. Se nopeuttaa kehitystä ja sovelluksia ja vähentää tarvittavaa kaistanleveyttä.
Näin käytämme lahjoitukset:
- Mahdollistamme ydintiimin työskentelyn webpackin parissa
- Kiitämme osallistujia, jos he ovat sijoittaneet paljon aikaa osallistumiseen
- Tukemme ekosysteemissä olevia projekteja, joilla on suuri arvo käyttäjille
- Tukemme projekteja, jotka ovat äänestetään eniten (työn alla)
- Infrastruktuurikustannukset
- Maksut rahankäsittelystä
Premium-kumppanit
Muut taustatukijat ja sponsorit
Ennen kuin aloimme käyttää OpenCollectivea, lahjoitukset tehtiin nimettöminä. Nyt kun olemme siirtyneet tähän, haluaisimme antaa tunnustusta näille sponsoreille (ja niille, jotka jatkavat lahjoittamista OpenCollectiven avulla). Jos joku on jäänyt huomaamatta, lähetä meille PR, niin lisäämme sinut tähän listaan.
Kultaiset sponsorit
Tule kultaiseksi sponsoriksi, niin saat logosi README-julkaisuumme Githubissa linkin sivustollesi.
Hopeasponsorit
Tule hopeasponsoriksi ja saat logosi Githubin README-julkaisuun linkin sivustollesi.
Pronssisponsorit
Tule pronssisponsoriksi ja saat logosi Githubin README-julkaisuun linkin sivustollesi.
Tukijat
Tule tukijaksi ja saat kuvasi README:ssä Githubissa linkin sivustoosi.
Erityiskiitokset
(aikajärjestyksessä)
- @google Google Web Toolkitista (GWT), jonka tarkoituksena on kääntää Java JavaScriptiksi. Siinä on samanlainen Code Splitting kuin webpackissa.
- @medikoo for modules-webmake, joka on samanlainen projekti. webpack syntyi, koska halusin Code Splittingin modules-webmakeen. Mielenkiintoista on, että Code Splitting -kysymys on edelleen auki (kiitos myös @Phoscurille keskustelusta).
- @substack browserify:lle, joka on samanlainen projekti ja monien ideoiden lähde.
- @jrburke require:lle.js, joka on samanlainen projekti ja lähde monille ideoille.
- @defunctzombie browser-field specistä, joka tekee moduuleja saataville node.js:lle, browserify:lle ja webpackille.
- Kaikki varhaiset webpackin käyttäjät, jotka ovat vaikuttaneet webpackin kehitykseen kirjoittamalla issueja tai PReja. Te vaikutitte suuntaan…
- @shama, @jhnns ja @sokra tämän projektin ylläpidosta
- Kaikki, jotka ovat kirjoittaneet lataajan webpackille. Te olette ekosysteemi…
- Kaikki, jotka unohdin mainita tässä, mutta jotka myös vaikuttivat webpackiin.