Alai

webpack är ett modulpaket. Dess huvudsyfte är att bunta JavaScript-filer för användning i en webbläsare, men den kan också omvandla, bunta eller paketera nästan alla resurser eller tillgångar.

Innehållsförteckning

1. Installera
2. Introduktion
3. Koncept
4. Bidrag
5. Stöd
6. Support
7. Kärnteamet
8. Sponsring
9. Premium. Partners
10. Övriga sponsorer och sponsorer
11. Guldsponsorer
12. Silversponsorer
13. Bronze sponsorer
14. Backers
15. Speciellt tack

Installera

Installera med npm:

npm install --save-dev webpack

Installera med yarn:

yarn add webpack --dev

Introduktion

webpack är en bundler för moduler. Huvudsyftet är att bunta JavaScript-filer för användning i en webbläsare, men den kan också omvandla, bunta eller paketera nästan alla resurser eller tillgångar.

TL;DR

• Bundles ES Modules, CommonJS och AMD-moduler (även kombinerade).
• Kan skapa ett enda paket eller flera delar som laddas asynkront vid körning (för att minska den initiala laddningstiden).
• Dependenser löses under kompileringen, vilket minskar körtidsstorleken.
• Laddare kan förbehandla filer under kompileringen, t.ex. TypeScript till JavaScript, Handlebars strängar till kompilerade funktioner, bilder till Base64 osv.
• Högmodulärt plugin-system för att göra allt annat som din applikation kräver.

Kom igång

Kontrollera webpacks snabbguide Kom igång och de andra guiderna.

Browserkompatibilitet

webpack har stöd för alla webbläsare som är ES5-kompatibla (IE8 och lägre stöds inte).webpack behöver också Promise för import() och require.ensure(). Om du vill ha stöd för äldre webbläsare måste du ladda en polyfill innan du använder dessa uttryck.

Koncept

Plugins

webpack har ett rikt plugininterface. De flesta av funktionerna inom själva webpack använder detta plugingränssnitt. Detta gör webpack mycket flexibelt.

Namn	Status	Installationsstorlek	Beskrivning
mini-css-extract-plugin			Extraherar CSS till separata filer. Den skapar en CSS-fil per JS-fil som innehåller CSS.
compression-webpack-plugin			Förbereder komprimerade versioner av tillgångar för att servera dem med Content-Encoding
html-webpack-plugin			Förenklar skapandet av HTML-filer (index.html) för att servera dina paket

Laddare

webpack gör det möjligt att använda laddare för att förbehandla filer. Detta gör det möjligt för dig att bunta alla statiska resurser långt bortom JavaScript. Du kan enkelt skriva dina egna laddare med hjälp av Node.js.

Laddare aktiveras genom att använda loadername!-prefix i require()-angivelser, eller tillämpas automatiskt via regex från din webpack-konfiguration.

Filer

Namn	Status	Installationsstorlek	Beskrivning
raw-loader			Laddar rått innehåll i en fil (utf-8)
val-loader			Exekverar kod som modul och betraktar export som JS-kod
url-loader			Fungerar som filloader, men kan returnera en Data Url om filen är mindre än en gräns
file-loader			Lämnar filen till utdatamappen och returnerar den (relativa) url

JSON

Namn	Status	Installationsstorlek	Beskrivning
			Laddar och transpilerar en CSON-fil

Transpilering

Namn	Status	Installationsstorlek	Beskrivning
			Laddar ES2015+-kod och transponerar till ES5 med hjälp av Babel
			Laddar ES2015+-kod och transponerar till ES5 med hjälp av Traceur
			Laddar TypeScript som JavaScript
			Laddar CoffeeScript som JavaScript

Templating

Name	Status	Installationsstorlek	Beskrivning
			Exporterar HTML som sträng, kräver referenser till statiska resurser
			Laddar Pug-mallar och returnerar en funktion
			Kompilerar Markdown till HTML
			Laddar och omvandlar en HTML-fil med PostHTML
			Kompilerar Handlebars till HTML

Styling

Namn	Status	Installationsstorlek	Beskrivning
<style>			Lägg till export av en modul som stil till DOM
			Laddar CSS-fil med upplösta importer och returnerar CSS-kod
			Laddar och kompilerar en LESS-fil
			Laddar och kompilerar en Sass/SCSS-fil
			Laddar och kompilerar en Stylus-fil
			Laddar och omvandlar en CSS/SSS-fil med PostCSS

Frameworks

Namn	Status	Installationsstorlek	Beskrivning
			Laddar och kompilerar Vue-komponenter
			Behandla HTML & CSS med valfri preprocessor och require() webbkomponenter som förstklassiga moduler
			Laddar och kompilerar Angular 2-komponenter
			Riot official webpack loader

Prestanda

webpack använder asynkron I/O och har flera cachingnivåer. Detta gör webpack snabboch otroligt snabb vid inkrementella kompileringar.

Modulformat

webpack har stöd för ES2015+, CommonJS och AMD-moduler direkt. Den utför smarta statiska analyser på AST i din kod. Den har till och med en utvärderingsmotor för att utvärdera enkla uttryck. Detta gör att du kan stödja de flesta existerande bibliotek direkt från start.

Koduppdelning

webpack gör det möjligt att dela upp din kodbas i flera delar. Chunks laddas asynkront vid körning. Detta minskar den initiala laddningstiden.

Optimeringar

webpack kan göra många optimeringar för att minska utdatastorleken på ditt Javascript genom att deduplicera ofta använda moduler, minifiera och ge dig full kontroll över vad som laddas initialt och vad som laddas vid körning genom koduppdelning. Den kan också göra dina kodbitar cachefriendliga genom att använda hashes.

Att bidra

Vi vill att det ska vara roligt, trevligt och lärorikt att bidra till webpack för vem som helst och alla. Vi har ett levande ekosystem som sträcker sig bortom denna enda repo. Vi välkomnar dig att kolla in alla repositories i vår organisation eller webpack-contrib organisation som rymmer alla våra loaders och plugins.

Bidrag går långt bortom pull requests och commits. Även om vi älskar att ge dig möjligheten att sätta din prägel på webpack är vi också glada över att ta emot en mängd andra bidrag, inklusive:

• Dokumentationsuppdateringar, förbättringar, design eller felrättningar
• Rättelser av stavning eller grammatik
• README.md-korrigeringar eller omdesigns
• Läggning av enhetstester eller funktionella tester
• Triagering av GitHub-frågor – särskilt för att avgöra om ett problem fortfarande kvarstår eller är reproducerbart
• Sökning av #webpack på twitter och hjälp någon annan som behöver hjälp
• Lärande av andra om hur de kan bidra till ett av de många webpack-repos!
• Blogga, tala om eller skapa handledningar om en av webpacks många funktioner.
• Hjälpa andra i vår webpack gitter-kanal.

För att komma igång kan du ta en titt på vår dokumentation om att bidra.

Om du är orolig eller inte vet var du ska börja kan du alltid kontakta Sean Larkin (@TheLarkInn) på Twitter eller helt enkelt skicka in ett problem så kan en ansvarig hjälpa dig med vägledning!

Vi har också startat en serie på vår Medium-publikation som heter The Contributor’s Guide to webpack. Vi välkomnar dig att läsa den och skicka frågor eller svar om du fortfarande behöver hjälp.

Vill du prata om webpack? Vi vill gärna granska ditt föredragsutdrag/CFP! Du kan mejla det till webpack opencollective com så kan vi ge tips!!!

Skapa egna plugins och laddare

Om du skapar en laddare eller ett plugin skulle vi <3 vilja att du öppnar källkoden för det och lägger ut det på npm. Vi följer namngivningskonventionen x-loader, x-webpack-plugin.

Support

Vi anser att webpack är ett verktyg på låg nivå som används inte bara individuellt utan även i lager under andra fantastiska verktyg. På grund av sin flexibilitet är webpack inte alltid den enklaste instegslösningen, men vi anser dock att det är den mest kraftfulla. Med det sagt letar vi alltid efter sätt att förbättra och förenkla verktyget utan att kompromissa med funktionaliteten. Om du har några idéer om hur vi kan åstadkomma detta är vi helt lyhörda!

Om du precis har börjat, ta en titt på vår nya sida med dokument och koncept. Här finns en översikt på hög nivå som är bra för nybörjare!!

Söker du efter dokumentation om webpack 1? Kolla in den gamla wikin, men observera att denna föråldrade version inte längre stöds.

Om du vill diskutera något eller bara behöver hjälp finns här vårt Gitter-rum där det alltid finns personer som vill hjälpa till!

Om du fortfarande har problem vill vi gärna att du ställer en fråga på StackOverflow med taggen webpack. Det är mycket lättare att besvara frågor som inkluderar din webpack.config.js och relevanta filer! Så om du kan tillhandahålla dem skulle vi vara extremt tacksamma (och mer benägna att hjälpa dig att hitta svaret!)

Om du är kunnig på twitter kan du twittra #webpack med din fråga och någon borde kunna nå ut och hjälpa dig också.

Om du har upptäckt ett 🐜 eller har ett förslag på en funktion, är du välkommen att skapa ett problem på Github.

Licens

Core Team

Tobias Koppers Core Grundare av webpack

Johannes Ewald Loaders & Plugins Förstagångsanvändare av webpack

Sean T. Larkin Public Relations Grundare av kärnteamet

Kees Kluskens Utveckling Sponsor

Sponsring

De flesta av medlemmarna i kärnteamet, webpack-bidragsgivare och bidragsgivare i ekosystemet gör detta arbete med öppen källkod på sin fritid. Om du använder webpack för en seriös uppgift och vill att vi ska investera mer tid i det, donera gärna. Det här projektet ökar även din inkomst/produktivitet. Det gör utveckling och applikationer snabbare och minskar den bandbredd som krävs.

Det här är hur vi använder donationerna:

• Gör det möjligt för kärnteamet att arbeta med webpack
• Tackar bidragsgivare om de investerat en stor mängd tid i att bidra
• Stödjer projekt i ekosystemet som är av stort värde för användarna
• Stödjer projekt som. röstas mest (pågående arbete)
• Infrastrukturkostnad
• Avgifter för hantering av pengar

Premium Partners

Andra backare och sponsorer

Förr vi började använda OpenCollective, gjordes donationer anonymt. Nu när vi har gjort bytet vill vi tacka dessa sponsorer (och de som fortsätter att donera med hjälp av OpenCollective). Om vi har missat någon, skicka en PR till oss så lägger vi till dig i listan.

Guldsponsorer

Bliva guldsponsor och få din logotyp på vår README på Github med en länk till din webbplats.

Silversponsorer

Var silversponsor och få din logotyp på vår README på Github med en länk till din webbplats.

Bronssponsorer

Var bronssponsor och få din logotyp på vår README på Github med en länk till din webbplats.

Stödjare

Bli en stödjare och få din bild på vår README på Github med en länk till din webbplats.

Särskilt tack till

(i kronologisk ordning)

• @google för Google Web Toolkit (GWT), som syftar till att kompilera Java till JavaScript. Det har en liknande koduppdelning som webpack.
• @medikoo för modules-webmake, som är ett liknande projekt. webpack föddes för att jag ville ha koduppdelning för modules-webmake. Intressant nog är frågan om Code Splitting fortfarande öppen (tack också till @Phoscur för diskussionen).
• @substack för browserify, som är ett liknande projekt och källa till många idéer.
• @jrburke för require.js, som är ett liknande projekt och källa till många idéer.
• @defunctzombie för browser-field-specifikationen, som gör moduler tillgängliga för node.js, browserify och webpack.
• Varje tidig webpack-användare, som bidrog till webpack genom att skriva problem eller PRs. Ni påverkade riktningen…
• @shama, @jhnns och @sokra för att ni underhåller detta projekt
• Alla som har skrivit en loader för webpack. Ni är ekosystemet…
• Alla som jag glömt att nämna här, men som också påverkat webpack.