Alai

webpack er en modulbundler. Dens hovedformål er at bundle JavaScript-filer til brug i en browser, men den er også i stand til at omdanne, bundle eller pakke stort set alle ressourcer eller aktiver.

Indholdsfortegnelse

1. Installation
2. Indledning
3. Koncepter
4. Kontribution
5. Support
6. Kerneholdet
7. Sponsorering
8. Premium Partners
9. Andre bagmænd og sponsorer
10. Guld sponsorer
11. Sølv sponsorer
12. Bronze sponsorer
13. Bagmænd
14. Særlig tak

Installer

Installer med npm:

npm install --save-dev webpack

Installér med yarn:

yarn add webpack --dev

Introduktion

webpack er en bundler for moduler. Hovedformålet er at bundle JavaScript-filer til brug i en browser, men det er også i stand til at omdanne, bundle eller pakke stort set alle ressourcer eller aktiver.

TL;DR

• Bundles ES Modules, CommonJS og AMD-moduler (selv kombineret).
• Kan oprette et enkelt bundle eller flere chunks, der indlæses asynkront ved kørselstid (for at reducere den indledende indlæsningstid).
• Afhængigheder løses under kompilering, hvilket reducerer størrelsen af kørselstiden.
• Loaderne kan forbehandle filer under kompilering, f.eks. TypeScript til JavaScript, Handlebars strenge til kompilerede funktioner, billeder til Base64 osv.
• Høj modulært plugin-system til at gøre alt det andet, som din applikation kræver.

Kom godt i gang

Kig på webpacks hurtige vejledning til at komme i gang og de andre vejledninger.

Browserkompatibilitet

webpack understøtter alle browsere, der er ES5-kompatible (IE8 og lavere understøttes ikke).webpack har også brug for Promise til import() og require.ensure(). Hvis du ønsker at understøtte ældre browsere, skal du indlæse en polyfill, før du bruger disse udtryk.

Koncepter

Plugins

webpack har et rigt plugininterface. De fleste af funktionernei selve webpack bruger denne plugin-interface. Dette gør webpack meget fleksibelt.

Navn	Status	Installationsstørrelse	Beskrivelse
mini-css-extract-plugin			Udpakker CSS i separate filer. Den opretter en CSS-fil pr. JS-fil, der indeholder CSS.
komprimering-webpack-plugin			Opretter komprimerede versioner af aktiver til at servere dem med Content-Encoding
html-webpack-plugin			Forenkler oprettelsen af HTML-filer (index.html) til servering af dine bundles

Loaders

webpack gør det muligt at bruge loaders til forbehandling af filer. Dette giver dig mulighed for at bundle enhver statisk ressource langt ud over JavaScript. Du kan nemt skrive dine egne loaders ved hjælp af Node.js.

Loaders aktiveres ved hjælp af loadername!-præfikser i require()-angivelser, eller de anvendes automatisk via regex fra din webpack-konfiguration.

Filer

Navn	Status	Installationsstørrelse	Beskrivelse
raw-loader			Læsser det rå indhold af en fil (utf-8)
val-loader			Udfører kode som modul og betragter eksport som JS-kode
url-loader			Fungerer som filloader, men kan returnere en Data Url, hvis filen er mindre end en grænse
file-loader			Sender filen til outputmappen og returnerer den (relative) url

JSON

Navn	Status	Installationsstørrelse	Beskrivelse
			Lader og transpiler en CSON-fil

Transpilering

Navn	Status	Install Size	Description
			Læser ES2015+-kode og transpilerer til ES5 ved hjælp af Babel
			Læser ES2015+-kode og transpiler til ES5 ved hjælp af Traceur
			læser TypeScript som JavaScript
				Lader CoffeeScript som JavaScript

Templating

Navn	Status	Installationsstørrelse	Beskrivelse
			eksporterer HTML som streng, kræver referencer til statiske ressourcer
			Læsser Pug-skabeloner og returnerer en funktion
			Kompilerer Markdown til HTML
			Lader og transformerer en HTML-fil ved hjælp af PostHTML
			Kompilerer håndtag til HTML

Styling

Navn	Status	Installationsstørrelse	Beskrivelse
<style>			Føj eksport af et modul som stil til DOM
				Lader CSS-fil med opløste importer og returnerer CSS-kode
			Læsser og kompilerer en LESS-fil
			Lader og kompilerer en Sass/SCSS-fil
			Lader og kompilerer en Stylus-fil
			Lader og transformerer en CSS/SSS-fil ved hjælp af PostCSS

Frameworks

Navn	Status	Installationsstørrelse	Beskrivelse
			Lader og kompilerer Vue-komponenter
			Behandler HTML & CSS med valgfri præprocessor og require() webkomponenter som førsteklasses moduler
			Læsser og kompilerer Angular 2-komponenter
			Riot official webpack loader

Ydelse

webpack bruger async I/O og har flere caching-niveauer. Dette gør webpack hurtigtog utrolig hurtig ved inkrementelle kompileringer.

Modulformater

webpack understøtter ES2015+, CommonJS og AMD-moduler out of the box. Den udfører smarte statiske analyser af AST i din kode. Den har endda en evalueringsmotor til at evaluere enkle udtryk. Dette giver dig mulighed for at understøtte de fleste eksisterende biblioteker out of the box.

Code Splitting

webpack giver dig mulighed for at opdele din kodebase i flere chunks. Chunks indlæses asynkront ved kørselstid. Dette reducerer den indledende indlæsningstid.

Optimeringer

webpack kan foretage mange optimeringer for at reducere outputstørrelsen af din JavaScript ved at deduplicere ofte anvendte moduler, minificere og give dig fuld kontrol over, hvad der indlæses indledningsvis, og hvad der indlæses ved kørslen gennem kodeopdeling. Den kan også gøre dine kodestykker cachvenlige ved at bruge hashes.

Bidrag til webpack

Vi ønsker at bidrage til webpack skal være sjovt, fornøjeligt og lærerigt for alle, og for alle. Vi har et levende økosystem, der strækker sig ud over denne enkelte repo. Vi byder dig velkommen til at tjekke alle repositories i vores organisation eller webpack-contrib-organisationen, som huser alle vores loaders og plugins.

Bidrag går langt ud over pull requests og commits. Selv om vi elsker at give dig mulighed for at sætte dit præg på webpack, er vi også glade for at modtage en række andre bidrag, herunder:

• Dokumentationsopdateringer, forbedringer, design eller fejlrettelser
• Rettelser af stavning eller grammatik
• README.md-korrektioner eller redesigns
• Tilføjelse af enheds- eller funktionelle tests
• Triagering af GitHub-problemer – især bestemmelse af, om et problem stadig består eller kan reproduceres
• Søgning på #webpack på twitter og hjælp en anden, der har brug for hjælp
• Undervisning af andre i, hvordan man bidrager til et af de mange webpack-repos!
• Blogge, tale om eller oprette tutorials om en af webpacks mange funktioner.
• Hjælpe andre i vores webpack gitter-kanal.

For at komme i gang skal du kigge på vores dokumentation om at bidrage.

Hvis du er bekymret eller ikke ved, hvor du skal starte, kan du altid henvende dig til Sean Larkin (@TheLarkInn) på Twitter eller blot indsende et problem, så kan en vedligeholder hjælpe dig med at give dig vejledning!

Vi har også startet en serie på vores Medium-publikation kaldet The Contributor’s Guide to webpack. Vi byder dig velkommen til at læse den og skrive spørgsmål eller svar, hvis du stadig har brug for hjælp.

Lyst til at tale om webpack? Vi vil gerne gennemgå dit foredragsresumé/CFP! Du kan sende det pr. e-mail til webpack opencollective com, og vi kan give pointer eller tips!!!

Skabelse af dine egne plugins og loaders

Hvis du skaber en loader eller et plugin, vil vi <3 gerne have, at du open source det og lægger det på npm. Vi følger x-loader, x-webpack-plugin navngivningskonventionen.

Support

Vi anser webpack for at være et værktøj på lavt niveau, der ikke kun bruges individuelt, men også lagdelt under andre fantastiske værktøjer. På grund af sin fleksibilitet er webpack ikke altid den nemmeste løsning på begynderniveau, men vi mener dog, at det er den mest kraftfulde. Når det er sagt, er vi altid på udkig efter måder at forbedre og forenkle værktøjet på uden at gå på kompromis med funktionaliteten. Hvis du har idéer til måder at opnå dette på, er vi lutter ører!

Hvis du lige er kommet i gang, så tag et kig på vores nye side med dokumenter og koncepter. Den har et overblik på højt niveau, som er godt for begyndere!!

Søger du efter webpack 1-dokumentation? Tjek venligst den gamle wiki, men bemærk, at denne forældede version ikke længere understøttes.

Hvis du ønsker at diskutere noget eller bare har brug for hjælp, er her vores Gitter-rum, hvor der altid er personer, der ønsker at hjælpe!

Hvis du stadig har problemer, vil vi gerne have, at du stiller et spørgsmål på StackOverflow med webpack-tagget. Det er meget nemmere at besvare spørgsmål, der inkluderer din webpack.config.js og relevante filer! Så hvis du kan give os dem, vil vi være yderst taknemmelige (og mere tilbøjelige til at hjælpe dig med at finde svaret!)

Hvis du har forstand på twitter, kan du tweete #webpack med dit spørgsmål, og nogen burde også kunne nå ud og hjælpe.

Hvis du har opdaget et 🐜 eller har et forslag til en funktion, er du velkommen til at oprette et problem på Github.

Licens

Core Team

Tobias Koppers Core Grundlægger af webpack

Johannes Ewald Loaders &Plugins Første udvikler af webpack

Sean T. Larkin Public Relations Grundlægger af kerneholdet

Kees Kluskens Udvikling Sponsor

Sponsorering

De fleste af kerneteamets medlemmer, webpack-bidragydere og bidragydere i økosystemet udfører dette open source-arbejde i deres fritid. Hvis du bruger webpack til en seriøs opgave, og du gerne vil have os til at investere mere tid i det, bedes du donere. Dette projekt øger også din indkomst/produktivitet. Det gør udvikling og applikationer hurtigere, og det reducerer den nødvendige båndbredde.

Det er sådan, vi bruger donationerne:

• Gør det muligt for kerneholdet at arbejde på webpack
• Takke bidragydere, hvis de har investeret en stor mængde tid i at bidrage
• Støtte projekter i økosystemet, der er af stor værdi for brugerne
• Støtte projekter, der bliver stemt mest (igangværende arbejde)
• Infrastrukturomkostninger
• Afgifter for håndtering af penge

Premium-partnere

Andre bagmænd og sponsorer

Hvor vi begyndte at bruge OpenCollective, blev donationer foretaget anonymt. Nu, hvor vi har skiftet, vil vi gerne anerkende disse sponsorer (og dem, der fortsat donerer ved hjælp af OpenCollective). Hvis vi har overset nogen, bedes du sende os en PR, så vi kan tilføje dig til denne liste.

Guldsponsorer

Bliv guldsponsor og få dit logo på vores README på Github med et link til dit websted.

Sølvsponsorer

Bliv sølvsponsor og få dit logo på vores README på Github med et link til dit websted.

Bronzesponsorer

Bliv bronzesponsor, og få dit logo på vores README på Github med et link til dit websted.

Støttemedlemmer

Bliv støttemedlem og få dit billede på vores README på Github med et link til dit websted.

Særlig tak til

(I kronologisk rækkefølge)

• @google for Google Web Toolkit (GWT), som har til formål at kompilere Java til JavaScript. Det har en lignende Code Splitting som webpack.
• @medikoo for modules-webmake, som er et lignende projekt. webpack blev født, fordi jeg ønskede Code Splitting for modules-webmake. Interessant nok er spørgsmålet om Code Splitting stadig åbent (tak også til @Phoscur for diskussionen).
• @substack for browserify, som er et lignende projekt og kilde til mange ideer.
• @jrburke for require.js, som er et lignende projekt og kilde til mange idéer.
• @defunctzombie for browser-field-specifikationen, som gør moduler tilgængelige for node.js, browserify og webpack.
• Alle tidlige webpack-brugere, som har bidraget til webpack ved at skrive issues eller PR’er. I påvirkede retningen…
• @shama, @jhnns og @sokra for at vedligeholde dette projekt
• Alle, der har skrevet en loader til webpack. I er økosystemet…
• Alle dem, jeg glemte at nævne her, men som også har påvirket webpack.