Alai

webpack este un bundler de module. Scopul său principal este de a grupa fișiere JavaScript pentru a fi utilizate într-un browser, dar este, de asemenea, capabil să transforme, să grupeze sau să împacheteze aproape orice resursă sau activ.

Cuprins

1. Instalare
2. Introducere
3. Concepte
4. Contribuție
5. Sprijin
6. Echipa de bază
7. Sponsorizare
8. Premium Parteneri
9. Alți susținători și sponsori
10. Sponsorii de aur
11. Sponsorii de argint
12. Sponsorii de bronz
13. Sponsorii
14. Susținători
15. Mulțumiri speciale

Instalați

Instalați cu npm:

npm install --save-dev webpack

Instalează cu yarn:

yarn add webpack --dev

Introducere

webpack este un bundler pentru module. Scopul principal este de a împacheta fișiere JavaScript pentru a fi utilizate într-un browser, dar este, de asemenea, capabil să transforme, să împacheteze sau să împacheteze aproape orice resursă sau activ.

TL;DR

• Bundles ES Modules, CommonJS și module AMD (chiar și combinate).
• Puteți crea un singur pachet sau mai multe bucăți care sunt încărcate asincron în timpul execuției (pentru a reduce timpul inițial de încărcare).
• Dependențele sunt rezolvate în timpul compilării, reducând dimensiunea în timpul execuției.
• Încărcătoarele pot preprocesa fișierele în timpul compilării, de exemplu, TypeScript în JavaScript, șirurile Handlebars în funcții compilate, imaginile în Base64 etc.
• Sistem de plugin-uri extrem de modular pentru a face orice altceva necesită aplicația dumneavoastră.

Începeți

Consultați ghidul rapid Get Started al webpack și celelalte ghiduri.

Compatibilitate cu browserele

webpack suportă toate browserele care sunt compatibile cu ES5 (IE8 și mai jos nu sunt suportate).webpack are nevoie, de asemenea, de Promise pentru import() și require.ensure(). Dacă doriți să suportați browsere mai vechi, va trebui să încărcați un polyfill înainte de a folosi aceste expresii.

Concepte

Plugin-uri

webpack are o interfață bogată de plugin-uri. Majoritatea caracteristicilor din webpack însuși folosesc această interfață de plugin. Acest lucru face ca webpack să fie foarteflexibil.

Nume	Status	Dimensiuni de instalare	Descriere
mini-css-extract-plugin			Extrage CSS în fișiere separate. Creează un fișier CSS pentru fiecare fișier JS care conține CSS.
compression-webpack-plugin			Pregătește versiuni comprimate ale activelor pentru a le servi cu Content-Encoding
html-webpack-plugin			Simplifică crearea de fișiere HTML (index.html) pentru a vă servi pachetele

Încărcătoare

webpack permite utilizarea încărcătoarelor pentru preprocesarea fișierelor. Acest lucru vă permite să grupați orice resursă statică mult dincolo de JavaScript. Vă puteți scrie cu ușurință propriile încărcătoare folosind Node.js.

Încărcătoarele sunt activate prin utilizarea prefixelor loadername! în declarațiile require(),sau sunt aplicate automat prin regex din configurația webpack.

Fișiere

Nume	Status	Dimensiuni de instalare	Descriere
raw-loader			Încarcă conținutul brut al unui fișier (utf-8)
val-loader			Execută codul ca modul și consideră exporturile ca fiind cod JS
url-loader			Funcționează ca și încărcătorul de fișiere, dar poate returna un Url de date dacă fișierul este mai mic decât o limită
file-loader			Împarte fișierul în folderul de ieșire și returnează url-ul (relativ)

JSON

Name	Status	Install Size	Description
			Încarcă și transpune un fișier CSON

Transpunere

.

Nume	Status	Dimensiunea de instalare	Descriere
			Încarcă codul ES2015+ și transpune în ES5 folosind Babel
			Încarcă codul ES2015+ și îl transpune în ES5 folosind Traceur
			Încarcă TypeScript ca și JavaScript
			Încarcă CoffeeScript ca și JavaScript

Templating

.

Nume	Status	Dimensiuni de instalare	Descriere
			Exportă HTML ca șir de caractere, necesită referințe la resurse statice
			Încarcă șabloanele Pug și returnează o funcție
			Compilează Markdown în HTML
			Încarcă și transformă un fișier HTML folosind PostHTML
			Compilează Handlebars în HTML

Styling

.

Nume	Status	Dimensiuni de instalare	Descriere
<style>			Adaugați exporturile unui modul ca stil în DOM
			Încarcă fișierul CSS cu importurile rezolvate și returnează codul CSS
			Încarcă și compilează un fișier LESS
			Încarcă și compilează un fișier Sass/SCSS
			Încarcă și compilează un fișier Stylus
			Încarcă și transformă un fișier CSS/SSS folosind PostCSS

Frameworks

Name	Status	Install Size	Description
			Încarcă și compilează componentele Vue
			Procesează HTML & CSS cu preprocesorul ales și require() Componente Web ca module de primă clasă
			Încarcă și compilează componente Angular 2
			Riot official webpack loader

Performanță

webpack folosește I/O async și are mai multe niveluri de cache. Acest lucru face ca webpack să fie rapidși incredibil de rapid la compilările incrementale.

Formatul modulelor

webpack suportă modulele ES2015+, CommonJS și AMD din fabrică. Efectuează o analiză statică inteligentă pe AST a codului dumneavoastră. Are chiar și un motor de evaluare pentru a evaluaexpresii simple. Acest lucru vă permite să suportați din start majoritatea bibliotecilor existente.

Împărțirea codului

webpack vă permite să vă împărțiți baza de cod în mai multe bucăți. Bucățile sunt încărcate în mod asincron în timpul execuției. Acest lucru reduce timpul de încărcare inițială.

Optimizări

webpack poate face multe optimizări pentru a reduce dimensiunea de ieșire a JavaScript-ului dvs. prin deduplicarea modulelor utilizate frecvent, minificare și oferindu-vă control total asupra a ceea ce este încărcat inițial și ceea ce este încărcat la momentul execuțieiprin divizarea codului. De asemenea, poate face ca bucățile dvs. de cod să fie prietenoase cu memoria cache prin utilizarea de hașuri.

Contribuire

Vrem să contribuim la webpack să fie distractiv, plăcut și educațional pentru oricine și pentru toată lumea. Avem un ecosistem vibrant care se întinde dincolo de acest singur repo. Vă invităm să verificați oricare dintre depozitele din organizația noastră sau organizația webpack-contrib, care găzduiește toate încărcătoarele și plugin-urile noastre.

Contribuțiile merg mult dincolo de pull requests și commits. Deși ne place să vă oferim oportunitatea de a vă pune amprenta asupra webpack, suntem, de asemenea, încântați să primim o varietate de alte contribuții, inclusiv:

• Actualizări ale documentației, îmbunătățiri, proiecte sau corecturi de erori
• Corecții ortografice sau gramaticale
• README.md corecții sau reproiectări
• Adaugarea de teste unitare, sau funcționale
• Tritarea problemelor GitHub – în special determinarea dacă o problemă încă persistă sau este reproductibilă.
• Căutarea #webpack pe twitter și ajutarea altcuiva care are nevoie de ajutor
• Învățarea altora cum să contribuie la unul dintre numeroasele depozite webpack!
• Scriind pe blog, vorbind despre sau creând tutoriale despre una dintre numeroasele caracteristici ale webpack.
• Ajutându-i pe alții în canalul nostru webpack gitter.

Pentru a începe, aruncați o privire la documentația noastră privind contribuția.

Dacă sunteți îngrijorat sau nu știți de unde să începeți, puteți oricând să îl contactați pe Sean Larkin (@TheLarkInn) pe Twitter sau pur și simplu să trimiteți o problemă și un mentenant vă poate ajuta să vă îndrume!

Am început, de asemenea, o serie pe publicația noastră Medium numită Ghidul colaboratorului pentru webpack. Vă invităm să îl citiți și să postați orice întrebări sau răspunsuri dacă mai aveți nevoie de ajutor.

Vreți să vorbiți despre webpack? Ne-ar face plăcere să vă revizuim rezumatul de discuție/CFP! Îl puteți trimite prin e-mail la webpack opencollective com și vă putem da indicații sau sfaturi!!!

Crearea propriilor plugin-uri și încărcătoare

Dacă creați un încărcător sau un plugin, am <3 dori să îl deschideți ca sursă deschisă și să îl puneți pe npm. Urmăm convenția de denumire x-loader, x-webpack-plugin.

Suport

Considerăm că webpack este un instrument de nivel scăzut folosit nu numai individual, ci și stratificat sub alte instrumente minunate. Din cauza flexibilității sale, webpack nu este întotdeauna cea mai ușoară soluție entry-level, totuși credem că este cea mai puternică. Acestea fiind spuse, căutăm mereu modalități de a îmbunătăți și simplifica instrumentul fără a compromite funcționalitatea. Dacă aveți idei despre modalități de a realiza acest lucru, suntem numai urechi!

Dacă sunteți la început, aruncați o privire la noua noastră pagină de documente și concepte. Aceasta are o prezentare generală de nivel înalt care este excelentă pentru începători!!

Cercetați documentația webpack 1? Vă rugăm să consultați vechiul wiki, dar rețineți că această versiune depreciată nu mai este susținută.

Dacă doriți să discutați ceva sau pur și simplu aveți nevoie de ajutor, aici este camera noastră Gitter unde există întotdeauna persoane care caută să vă ajute!

Dacă încă aveți dificultăți, ne-ar plăcea să postați o întrebare la StackOverflow cu tag-ul webpack. Este mult mai ușor să răspundem la întrebări care includ fișierul dvs. webpack.config.js și fișierele relevante! Așa că, dacă le puteți furniza, v-am fi extrem de recunoscători (și este mai probabil să vă ajutăm să găsiți răspunsul!)

Dacă sunteți cunoscători de Twitter, puteți twitta #webpack cu întrebarea dvs. și cineva ar trebui să fie capabil să vă ajungă și să vă ajute, de asemenea.

Dacă ați descoperit o 🐜 sau aveți o sugestie de funcționalitate, nu ezitați să creați o problemă pe Github.

Licență

Core Team

Tobias Koppers Core Fondator al webpack

Johannes Ewald Loaders & Plugins Early adopter of webpack

Sean T. Larkin Relații publice Fondator al echipei de bază

Kees Kluskens Dezvoltare Kees Kluskens Dezvoltare . Sponsor

Sponsorizare

Majoritatea membrilor echipei de bază, contribuitorii webpack și contribuitorii din ecosistem fac această muncă open source în timpul lor liber. Dacă folosiți webpack pentru o sarcină serioasă și ați dori să investim mai mult timp în ea, vă rugăm să donați. Acest proiect vă crește și dumneavoastră veniturile/productivitatea. Face ca dezvoltarea și aplicațiile să fie mai rapide și reduce lățimea de bandă necesară.

Acesta este modul în care folosim donațiile:

• Permiteți echipei de bază să lucreze la webpack
• Mulțumiți contributorii dacă au investit o cantitate mare de timp pentru a contribui
• Susțineți proiectele din ecosistem care sunt de mare valoare pentru utilizatori
• Susțineți proiectele care sunt cele mai votate (work in progress)
• Costuri de infrastructură
• Taxele pentru gestionarea banilor

Parteneri Premium

Alți susținători și sponsori

Până am început să folosim OpenCollective, donațiile au fost făcute în mod anonim. Acum că am făcut trecerea, am dori să îi recunoaștem pe acești sponsori (și pe cei care continuă să doneze folosind OpenCollective). Dacă am omis pe cineva, vă rugăm să ne trimiteți un PR și vă vom adăuga la această listă.

Sponsori de aur

Deveniți un sponsor de aur și primiți logo-ul dvs. pe README-ul nostru de pe Github cu un link către site-ul dvs.

Sponsori de argint

Deveniți un sponsor de argint și obțineți logo-ul dvs. pe README-ul nostru de pe Github cu un link către site-ul dvs.

Sponsori de bronz

Deveniți un sponsor de bronz și obțineți logo-ul dvs. pe README-ul nostru de pe Github cu un link către site-ul dvs.

Susținători

Deveniți un susținător și primiți imaginea dvs. pe README-ul nostru pe Github cu un link către site-ul dvs.

Mulțumiri speciale pentru

(În ordine cronologică)

• @google pentru Google Web Toolkit (GWT), care își propune să compileze Java în JavaScript. Dispune de un Code Splitting similar cu webpack.
• @medikoo pentru modules-webmake, care este un proiect similar. webpack s-a născut pentru că am vrut Code Splitting pentru modules-webmake. Interesant este că problema Code Splitting este încă deschisă (mulțumesc și lui @Phoscur pentru discuție).
• @substack pentru browserify, care este un proiect similar și sursă pentru multe idei.
• @jrburke pentru require.js, care este un proiect similar și sursă pentru multe idei.
• @defunctzombie pentru browser-field spec, care face modulele disponibile pentru node.js, browserify și webpack.
• Toți utilizatorii timpurii ai webpack, care au contribuit la webpack prin scrierea de probleme sau PR-uri. Ați influențat direcția…
• @shama, @jhnns și @sokra pentru menținerea acestui proiect
• Toată lumea care a scris un încărcător pentru webpack. Voi sunteți ecosistemul…
• Toată lumea pe care am uitat să o menționez aici, dar care a influențat și webpack.