Alai

webpack is een modulebundelaar. Het belangrijkste doel is het bundelen van JavaScript-bestanden voor gebruik in een browser, maar het is ook in staat om vrijwel elke bron of bron te transformeren, bundelen of verpakken.

Inhoudsopgave

1. Installeren
2. Inleiding
3. Concepten
4. Bijdragen
5. Ondersteuning
6. Core Team
7. Sponsoring
8. Premium Partners
9. Andere Backers en Sponsors
10. Gouden Sponsors
11. Zilveren Sponsors
12. Bronzen Sponsors
13. Backers
14. Speciale Dank

Installeren

Installeren met npm:

npm install --save-dev webpack

Installeren met yarn:

yarn add webpack --dev

Inleiding

webpack is een bundelaar voor modules. Het belangrijkste doel is het bundelen van JavaScript-bestanden voor gebruik in een browser, maar het is ook in staat om te transformeren, bundelen, of verpakken zo ongeveer elke bron of asset.

TL;DR

• Bundels ES Modules, CommonJS, en AMD modules (zelfs gecombineerd).
• Kan een enkele bundel of meerdere chunks maken die asynchroon worden geladen tijdens runtime (om initiële laadtijd te verminderen).
• Dependencies worden opgelost tijdens compilatie, waardoor de runtime-grootte wordt gereduceerd.
• Loaders kunnen bestanden voorbewerken tijdens het compileren, bijvoorbeeld TypeScript naar JavaScript, Handlebars strings naar gecompileerde functies, afbeeldingen naar Base64, enz.
• Hoog modulair plugin-systeem om alles te doen wat uw applicatie nodig heeft.

Aan de slag

Kijk naar webpack’s snelle Aan de slag gids en de andere gidsen.

Browser compatibiliteit

webpack ondersteunt alle browsers die ES5-compliant zijn (IE8 en lager worden niet ondersteund).webpack heeft ook Promise nodig voor import() en require.ensure(). Als u oudere browsers wilt ondersteunen, moet u een polyfill laden voordat u deze expressies gebruikt.

Concepten

Plugins

webpack heeft een rijke plugininterface. De meeste functies binnen webpack zelf maken gebruik van deze plugin-interface. Dit maakt webpack zeer flexibel.

Naam	Status	Installatiegrootte	Beschrijving
mini-css-extract-plugin			Extraheert CSS in afzonderlijke bestanden. Er wordt een CSS-bestand gemaakt per JS-bestand dat CSS bevat.
compression-webpack-plugin			Prepareert gecomprimeerde versies van assets om deze te serveren met Content-Encoding
html-webpack-plugin			Vereenvoudigt het maken van HTML-bestanden (index.html) om uw bundels te serveren

Loaders

webpack maakt het gebruik van loaders mogelijk om bestanden te preprocessen. Dit stelt u in staat om statische bronnen veel verder te bundelen dan JavaScript. U kunt eenvoudig uw eigen loaders schrijven met behulp van Node.js.

Loaders worden geactiveerd door loadername! voorvoegsels te gebruiken in require() statements, of worden automatisch toegepast via regex vanuit uw webpack configuratie.

Bestanden

Naam	Status	Installatiegrootte	Beschrijving
raw-loader			laadt ruwe inhoud van een bestand (utf-8)
val-loader			Uitvoeren code als module en beschouwen exports als JS code
url-loader			Werkt als de bestandsloader, maar kan een Data Url teruggeven als het bestand kleiner is dan een limiet
file-loader			plaatst het bestand in de uitvoermap en geeft de (relatieve) url

JSON

Naam	Status	Installatiegrootte	Beschrijving
			Laadt en transpileert een CSON-bestand

Transpileren

Naam	Status	Installatiegrootte	Beschrijving
			leest ES2015+ code en transponeert deze naar ES5 met behulp van Babel
			leest ES2015+ code en transpileert deze naar ES5 met behulp van Traceur
			laadt TypeScript zoals JavaScript
			Laadt CoffeeScript zoals JavaScript

Templating

Name	Status	Installatiegrootte	Beschrijving
			Exporteert HTML als string, vereist verwijzingen naar statische bronnen
			laadt Pug-sjablonen en stuurt een functie terug
			Compileert Markdown naar HTML
			laadt en transformeert een HTML-bestand met behulp van PostHTML
			Compileert Stuur naar HTML

Styling

Naam	Status	Installatiegrootte	Beschrijving
<style>			export van een module als stijl toevoegen aan DOM
			laadt CSS-bestand met opgeloste importen en geeft CSS-code terug
			Laadt en compileert een LESS-bestand
			laadt en compileert een Sass/SCSS-bestand
			laadt en compileert een Stylus-bestand
			laadt en transformeert een CSS/SSS-bestand met behulp van PostCSS

Frameworks

Naam	Status	Installatiegrootte	Beschrijving
			laadt en compileert Vue-componenten
			Verwerk HTML & CSS met preprocessor naar keuze en require() Web Components als eersteklas modules
			Laadt en compileert Angular 2 Componenten
			Riot officiële webpack loader

Prestaties

webpack gebruikt async I/O en heeft meerdere caching niveaus. Dit maakt webpack snel en ongelooflijk snel bij incrementele compilaties.

Module Formaten

webpack ondersteunt ES2015+, CommonJS en AMD modules out of the box. Het voert slimme statische analyses uit op de AST van uw code. Het heeft zelfs een evaluatie-engine om eenvoudige expressies te evalueren. Dit stelt u in staat om de meeste bestaande bibliotheken out of the box te ondersteunen.

Code Splitting

webpack stelt u in staat om uw codebase op te splitsen in meerdere chunks. Chunks worden asynchroon geladen tijdens runtime. Dit vermindert de initiële laadtijd.

Optimalisaties

webpack kan veel optimalisaties uitvoeren om de outputgrootte van uw JavaScript te verminderen door veelgebruikte modules te ontdubbelen, te minificeren en u volledige controle te geven over wat initieel wordt geladen en wat tijdens runtime wordt geladen door code-splitsing. Het kan uw code ook cache-vriendelijk maken door gebruik te maken van hashes.

Bijdragen

We willen dat bijdragen aan webpack leuk, plezierig en leerzaam is voor iedereen en iedereen. We hebben een levendig ecosysteem dat verder gaat dan deze enkele repo. We nodigen u uit om een van de repositories in onze organisatie of webpack-contrib organisatie, die al onze loaders en plugins bevat, te bekijken.

Bijdragen gaan veel verder dan pull requests en commits. Hoewel we u graag de kans geven om uw stempel op webpack te drukken, zijn we ook blij met een verscheidenheid aan andere bijdragen, waaronder:

• Documentatie-updates, verbeteringen, ontwerpen, of bugfixes
• Spelling of grammatica fixes
• README.md correcties of herontwerpen
• Het toevoegen van unit, of functionele tests
• Het doornemen van GitHub issues — in het bijzonder het bepalen of een issue nog steeds bestaat of reproduceerbaar is.
• Het doorzoeken van #webpack op twitter en het helpen van iemand anders die hulp nodig heeft
• Het aan anderen leren hoe bij te dragen aan een van de vele webpack repo’s!
• Bloggen, spreken over, of tutorials maken over een van de vele functies van webpack.
• Anderen helpen in ons webpack gitter kanaal.

Om te beginnen, bekijk onze documentatie over bijdragen.

Als u zich zorgen maakt of niet weet waar u moet beginnen, kunt u altijd contact opnemen met Sean Larkin (@TheLarkInn) op Twitter of gewoon een issue indienen en een beheerder kan u helpen begeleiding te geven!

We zijn ook een serie begonnen op onze Medium-publicatie genaamd The Contributor’s Guide to webpack. We nodigen u uit om het te lezen en eventuele vragen of reacties te posten als u nog hulp nodig hebt.

Op zoek om te spreken over webpack? We zouden graag uw spreekbeurt abstract/CFP beoordelen! U kunt het mailen naar webpack opencollective com en wij kunnen u tips geven!

Het maken van uw eigen plugins en loaders

Als u een loader of plugin maakt, zouden we <3 graag zien dat u deze open source maakt, en op npm zet. We volgen de x-loader, x-webpack-plugin naamgevingsconventie.

Ondersteuning

We beschouwen webpack als een low-level tool die niet alleen individueel wordt gebruikt, maar ook gelaagd onder andere geweldige tools. Vanwege zijn flexibiliteit is webpack niet altijd de makkelijkste instap-oplossing, maar we geloven wel dat het de krachtigste is. Dat gezegd hebbende, zijn we altijd op zoek naar manieren om de tool te verbeteren en te vereenvoudigen zonder afbreuk te doen aan de functionaliteit. Als je ideeën hebt over hoe we dit kunnen bereiken, zijn we een en al oor!

Als je net begint, kijk dan eens naar onze nieuwe docs en concepten pagina. Dit heeft een hoog niveau overzicht dat geweldig is voor beginners!

Op zoek naar webpack 1 docs? Bekijk dan de oude wiki, maar merk op dat deze deprecated versie niet langer wordt ondersteund.

Als u iets wilt bespreken of gewoon hulp nodig hebt, hier is onze Gitter kamer waar er altijd mensen zijn die u willen helpen.

Als u nog steeds problemen ondervindt, zouden we het leuk vinden als u een vraag op StackOverflow plaatst met de webpack tag. Het is veel gemakkelijker om vragen te beantwoorden die uw webpack.config.js en relevante bestanden bevatten! Dus als u deze kunt verstrekken, zouden we zeer dankbaar zijn (en meer kans om u te helpen het antwoord te vinden!)

Als u twitter savvy bent, kunt u tweeten #webpack met uw vraag en iemand zou in staat moeten zijn om u te bereiken en ook te helpen.

Als u een 🐜 hebt ontdekt of een feature suggestie hebt, voel u vrij om een issue aan te maken op Github.

Licentie

Core Team

Tobias Koppers Core Stichter van webpack

Johannes Ewald Loaders & Plugins Early adopter van webpack

Sean T. Larkin Public Relations Oprichter van het core team

Kees Kluskens Ontwikkeling Sponsor

Sponsoring

Het merendeel van de leden van het kernteam, webpack-medewerkers en bijdragers aan het ecosysteem doen dit open-sourcewerk in hun vrije tijd. Als u webpack gebruikt voor een serieuze taak, en u zou willen dat we er meer tijd in investeren, doneer dan. Dit project verhoogt ook uw inkomen/productiviteit. Het maakt ontwikkeling en toepassingen sneller en het vermindert de benodigde bandbreedte.

Dit is hoe we de donaties gebruiken:

• Het kernteam in staat stellen om aan webpack te werken
• Bedankt bijdragers als ze veel tijd hebben geïnvesteerd in hun bijdrage
• Steunt projecten in het ecosysteem die van grote waarde zijn voor gebruikers
• Steunt projecten die het meest gestemd worden (werk in uitvoering)
• Infrastructuurkosten
• Geldafdracht

Premium Partners

Andere Backers en Sponsors

Voordat we OpenCollective gingen gebruiken, werden donaties anoniem gedaan. Nu we de overstap hebben gemaakt, willen we graag onze erkentelijkheid betuigen aan deze sponsors (en aan degenen die blijven doneren via OpenCollective). Als we iemand over het hoofd hebben gezien, stuur ons dan een PR, dan voegen we u toe aan deze lijst.

Gold Sponsors

Word een gold sponsor en ontvang uw logo op onze README op Github met een link naar uw site.

Zilveren sponsors

Word zilveren sponsor en ontvang uw logo op onze README op Github met een link naar uw site.

Bronzen sponsors

Word bronzen sponsor en ontvang uw logo op onze README op Github met een link naar uw site.

Backers

Word een backer en krijg uw afbeelding op onze README op Github met een link naar uw site.

Speciale dank aan

(In chronologische volgorde)

• @google voor Google Web Toolkit (GWT), die tot doel heeft Java te compileren naar JavaScript. Het heeft een vergelijkbare Code Splitting als webpack.
• @medikoo voor modules-webmake, wat een vergelijkbaar project is. webpack is geboren omdat ik Code Splitting wilde voor modules-webmake. Interessant genoeg is de Code Splitting kwestie nog steeds open (ook dank aan @Phoscur voor de discussie).
• @substack voor browserify, wat een soortgelijk project is en bron voor veel ideeën.
• @jrburke voor require.js, wat een soortgelijk project is en bron voor veel ideeën.
• @defunctzombie voor de browser-field spec, die modules beschikbaar maakt voor node.js, browserify en webpack.
• Iedere vroege webpack gebruiker, die heeft bijgedragen aan webpack door issues of PR’s te schrijven. Jullie hebben de richting beïnvloed…
• @shama, @jhnns en @sokra voor het onderhouden van dit project
• Iedereen die een loader voor webpack heeft geschreven. Jullie zijn het ecosysteem…
• Iedereen die ik hier vergeten ben te noemen, maar ook invloed heeft gehad op webpack.