Alai

webpack ist ein Modul-Bündler. Sein Hauptzweck ist es, JavaScript-Dateien für die Verwendung in einem Browser zu bündeln, aber es ist auch in der Lage, so gut wie jede Ressource oder jedes Asset zu transformieren, zu bündeln oder zu verpacken.

Inhaltsverzeichnis

1. Installation
2. Einführung
3. Konzepte
4. Beiträge
5. Support
6. Kernteam
7. Sponsoring
8. Premium Partner
9. Andere Unterstützer und Sponsoren
10. Goldsponsoren
11. Silbersponsoren
12. Bronzesponsoren
13. Unterstützer
14. Besonderer Dank

Installieren

Installieren mit npm:

npm install --save-dev webpack

Installieren mit yarn:

yarn add webpack --dev

Einführung

webpack ist ein Bundler für Module. Der Hauptzweck ist die Bündelung von JavaScript-Dateien für die Verwendung in einem Browser, aber es ist auch in der Lage, so gut wie jede Ressource oder jedes Asset zu transformieren, zu bündeln oder zu verpacken.

TL;DR

• Bündelt ES-Module, CommonJS und AMD-Module (auch kombiniert).
• Kann ein einzelnes Bundle oder mehrere Chunks erstellen, die zur Laufzeit asynchron geladen werden (um die anfängliche Ladezeit zu reduzieren).
• Abhängigkeiten werden während der Kompilierung aufgelöst, wodurch die Laufzeitgröße reduziert wird.
• Loader können Dateien während der Kompilierung vorverarbeiten, z.B. TypeScript zu JavaScript, Handlebars-Strings zu kompilierten Funktionen, Bilder zu Base64, etc.
• Hochmodulares Plugin-System, um alles zu tun, was Ihre Anwendung sonst noch benötigt.

Get Started

Sehen Sie sich die Kurzanleitung von webpack und die anderen Anleitungen an.

Browser-Kompatibilität

webpack unterstützt alle Browser, die ES5-kompatibel sind (IE8 und darunter werden nicht unterstützt).webpack benötigt auch Promise für import() und require.ensure(). Wenn Sie ältere Browser unterstützen wollen, müssen Sie ein Polyfill laden, bevor Sie diese Ausdrücke verwenden.

Konzepte

Plugins

webpack hat eine umfangreiche Plugin-Schnittstelle. Die meisten Funktionen innerhalb von webpack selbst nutzen diese Plugin-Schnittstelle. Das macht webpack sehr flexibel.

Name	Status	Installationsgröße	Beschreibung
mini-css-extract-plugin			Extrahiert CSS in separate Dateien. Es erstellt eine CSS-Datei pro JS-Datei, die CSS enthält.
compression-webpack-plugin			Bereitet komprimierte Versionen von Assets vor, um sie mit Content-Encoding
html-webpack-plugin			Vereinfacht die Erstellung von HTML-Dateien (index.html), um Ihre Bundles bereitzustellen

Loaders

Webpack ermöglicht die Verwendung von Loaders, um Dateien vorzuverarbeiten. Dies ermöglicht es Ihnen, statische Ressourcen weit über JavaScript hinaus zu bündeln. Sie können ganz einfach Ihre eigenen Loader mit Node.js schreiben.

Loader werden durch die Verwendung von loadername!-Präfixen in require()-Anweisungen aktiviert oder automatisch über Regex aus Ihrer Webpack-Konfiguration angewendet.

Dateien

Name	Status	Installationsgröße	Beschreibung
raw-loader			Lädt rohen Inhalt einer Datei (utf-8)
val-loader			Führt Code als Modul aus und betrachtet Exporte als JS-Code
url-loader			Wirkt wie der file loader, kann aber eine Datenurl zurückgeben, wenn die Datei kleiner als ein Limit ist
file-loader			Übergibt die Datei in den Ausgabeordner und liefert die (relative) url

JSON

Name	Status	Installationsgröße	Beschreibung
			Lädt und transpiliert eine CSON-Datei

Transpilieren

Name	Status	Installationsgröße	Beschreibung
			Lädt ES2015+ Code und transpiliert nach ES5 mit Babel
			Lädt ES2015+ Code und transpiliert nach ES5 mit Traceur
			Lädt TypeScript wie JavaScript
			Lädt CoffeeScript wie JavaScript

Templating

Name	Status	Installationsgröße	Beschreibung
			Exportiert HTML als String, benötigt Referenzen zu statischen Ressourcen
			Lädt Pug-Vorlagen und gibt eine Funktion zurück
			Kompiliert Markdown zu HTML
			Lädt und transformiert eine HTML-Datei mit PostHTML
			Kompiliert Handlebars zu HTML

Styling

Name	Status	Installationsgröße	Beschreibung
<style>			Exporte eines Moduls als Stil zum DOM hinzufügen
			Lädt CSS-Datei mit aufgelösten Importen und liefert CSS-Code
			Lädt und kompiliert eine LESS-Datei
			Lädt und kompiliert eine Sass/SCSS-Datei
			Lädt und kompiliert eine Stylus-Datei
			Lädt und transformiert eine CSS/SSS-Datei mit PostCSS

Frameworks

Name	Status	Installationsgröße	Beschreibung
			Lädt und kompiliert Vue-Komponenten
			Verarbeitung von HTML &CSS mit Präprozessor der Wahl und require()Webkomponenten wie First-Class-Module
			Lädt und kompiliert Angular 2 Komponenten
			Riot official webpack loader

Performance

webpack verwendet async I/O und hat mehrere Caching-Ebenen. Das macht webpack schnell und unglaublich schnell bei inkrementellen Kompilierungen.

Modulformate

webpack unterstützt ES2015+, CommonJS und AMD-Module von Haus aus. Es führt eine clevere statische Analyse des AST Ihres Codes durch. Es verfügt sogar über eine Evaluierungs-Engine, die einfache Ausdrücke auswertet. So können Sie die meisten vorhandenen Bibliotheken sofort unterstützen.

Code Splitting

Webpack ermöglicht es Ihnen, Ihre Codebasis in mehrere Chunks aufzuteilen. Die Chunks werden zur Laufzeit asynchron geladen. Dies reduziert die anfängliche Ladezeit.

Optimierungen

Webpack kann viele Optimierungen durchführen, um die Ausgabegröße Ihres JavaScripts zu reduzieren, indem es häufig verwendete Module dedupliziert, minifiziert und Ihnen die volle Kontrolle darüber gibt, was anfänglich geladen wird und was zur Laufzeit durch Code-Splitting geladen wird. Durch die Verwendung von Hashes können Sie Ihre Code-Bausteine auch cache-freundlich gestalten.

Mitmachen

Wir möchten, dass die Mitarbeit an Webpack für jeden Spaß macht und lehrreich ist. Wir haben ein lebendiges Ökosystem, das sich über dieses einzelne Repo hinaus erstreckt. Wir laden Sie ein, jedes der Repositories in unserer Organisation oder in der webpack-contrib Organisation, die alle unsere Loader und Plugins beherbergt, zu besuchen.

Beiträge gehen weit über Pull Requests und Commits hinaus. Obwohl wir es lieben, Ihnen die Möglichkeit zu geben, Webpack Ihren Stempel aufzudrücken, freuen wir uns auch über eine Vielzahl anderer Beiträge, einschließlich:

• Aktualisierungen der Dokumentation, Erweiterungen, Designs oder Bugfixes
• Rechtschreib- oder Grammatikkorrekturen
• README.md-Korrekturen oder Redesigns
• Hinzufügen von Unit- oder Funktionstests
• Durchsuchen von GitHub-Problemen – insbesondere um herauszufinden, ob ein Problem immer noch besteht oder reproduzierbar ist
• Durchsuchen von #webpack auf Twitter und Helfen von jemandem, der Hilfe braucht
• Einweisen von anderen, wie man zu einem der vielen Webpack-Repos beiträgt!
• Bloggen, darüber sprechen oder Tutorials über eine der vielen Funktionen von Webpack erstellen.
• Anderen in unserem Webpack-Gitter-Channel helfen.

Um anzufangen, schaue dir unsere Dokumentation über das Beitragen an.

Wenn du dir Sorgen machst oder nicht weißt, wo du anfangen sollst, kannst du dich jederzeit an Sean Larkin (@TheLarkInn) auf Twitter wenden oder einfach ein Problem einreichen und ein Maintainer kann dir helfen, eine Anleitung zu geben!

Wir haben auch eine Serie auf unserer Medium-Publikation namens The Contributor’s Guide to webpack gestartet. Wir laden Sie ein, diese zu lesen und Fragen oder Antworten zu posten, wenn Sie noch Hilfe benötigen.

Sie möchten über webpack sprechen? Wir würden uns freuen, Ihren Vortragsabstract/CFP zu prüfen! Du kannst es an webpack opencollective com mailen und wir können dir Hinweise oder Tipps geben!!!

Erstelle deine eigenen Plugins und Loader

Wenn du einen Loader oder ein Plugin erstellst, würden wir <3 uns freuen, wenn du es als Open Source zur Verfügung stellst und es auf npm veröffentlichst. Wir folgen der x-loader, x-webpack-plugin Namenskonvention.

Support

Wir betrachten webpack als ein Low-Level-Tool, das nicht nur einzeln, sondern auch unter anderen großartigen Tools verwendet wird. Aufgrund seiner Flexibilität ist webpack nicht immer die einfachste Einstiegslösung, aber wir glauben, dass es die leistungsfähigste ist. Dennoch suchen wir immer nach Möglichkeiten, das Tool zu verbessern und zu vereinfachen, ohne die Funktionalität zu beeinträchtigen. Wenn Sie Ideen haben, wie wir dies erreichen können, sind wir ganz Ohr!

Wenn Sie gerade erst anfangen, werfen Sie einen Blick auf unsere neue Seite mit Dokumenten und Konzepten. Sie bietet einen Überblick auf hohem Niveau und ist ideal für Anfänger!

Suchen Sie nach Webpack 1-Dokumenten? Schauen Sie sich das alte Wiki an, aber beachten Sie, dass diese veraltete Version nicht mehr unterstützt wird.

Wenn Sie etwas diskutieren wollen oder einfach nur Hilfe brauchen, finden Sie hier unseren Gitter-Raum, in dem es immer Leute gibt, die Ihnen helfen wollen!

Wenn Sie immer noch Schwierigkeiten haben, würden wir uns freuen, wenn Sie eine Frage mit dem webpack-Tag auf StackOverflow stellen. Es ist viel einfacher, Fragen zu beantworten, die Ihre webpack.config.js und relevante Dateien enthalten! Wenn du sie also zur Verfügung stellen kannst, wären wir sehr dankbar (und helfen dir eher, die Antwort zu finden!)

Wenn du dich mit Twitter auskennst, kannst du #webpack mit deiner Frage twittern und jemand sollte in der Lage sein, dich zu erreichen und dir zu helfen.

Wenn du ein Problem entdeckt hast 🐜 oder einen Vorschlag für ein Feature hast, kannst du gerne ein Issue auf Github erstellen.

Lizenz

Core Team

Tobias Koppers Core Gründer von webpack

Johannes Ewald Loaders & Plugins Early adopter of webpack

Sean T. Larkin Öffentlichkeitsarbeit Gründer des Kernteams

Kees Kluskens Entwicklung Sponsor

Sponsoring

Mehrheit der Mitglieder des Kernteams, webpack-Mitwirkende und Mitwirkende im Ökosystem machen diese Open-Source-Arbeit in ihrer Freizeit. Wenn Sie webpack für eine ernsthafte Aufgabe verwenden und Sie möchten, dass wir mehr Zeit in dieses Projekt investieren, spenden Sie bitte. Dieses Projekt steigert auch Ihr Einkommen/Produktivität. Es macht die Entwicklung und Anwendungen schneller und es reduziert die benötigte Bandbreite.

So verwenden wir die Spenden:

• Ermöglichen es dem Kernteam, an Webpack zu arbeiten
• Danke an die Spender, wenn sie viel Zeit in ihre Beiträge investiert haben
• Unterstütze Projekte im Ökosystem, die für die Nutzer von großem Wert sind
• Unterstütze Projekte, die am meisten gevotet werden (work in progress)
• Infrastrukturkosten
• Gebühren für die Geldbearbeitung

Premium Partner

Andere Geldgeber und Sponsoren

Bevor wir mit OpenCollective begonnen haben, wurden Spenden anonym getätigt. Jetzt, da wir umgestellt haben, möchten wir uns bei diesen Sponsoren bedanken (und bei denen, die weiterhin mit OpenCollective spenden). Wenn wir jemanden übersehen haben, schicken Sie uns bitte eine PR, und wir werden Sie zu dieser Liste hinzufügen.

Gold-Sponsoren

Werden Sie Gold-Sponsor und erhalten Sie Ihr Logo auf unserer README auf Github mit einem Link zu Ihrer Seite.

Silbersponsoren

Werden Sie Silbersponsor und erhalten Sie Ihr Logo auf unserer README auf Github mit einem Link zu Ihrer Seite.

Bronze-Sponsoren

Werden Sie Bronze-Sponsor und erhalten Sie Ihr Logo auf unserer README auf Github mit einem Link zu Ihrer Seite.

Backers

Werden Sie ein Backer und erhalten Sie Ihr Bild auf unserer README auf Github mit einem Link zu Ihrer Seite.

Besonderer Dank an

(In chronologischer Reihenfolge)

• @google für Google Web Toolkit (GWT), das darauf abzielt, Java in JavaScript zu kompilieren. Es bietet ein ähnliches Code Splitting wie webpack.
• @medikoo für modules-webmake, ein ähnliches Projekt. webpack wurde geboren, weil ich Code Splitting für modules-webmake wollte. Interessanterweise ist das Thema Code Splitting immer noch offen (danke auch an @Phoscur für die Diskussion).
• @substack für browserify, das ein ähnliches Projekt und Quelle für viele Ideen ist.
• @jrburke für require.js, das ein ähnliches Projekt und Quelle für viele Ideen ist.
• @defunctzombie für die browser-field spec, die Module für node.js, browserify und webpack zur Verfügung stellt.
• Jeder frühe Webpack-Nutzer, der durch das Schreiben von Issues oder PRs zu webpack beigetragen hat. Ihr habt die Richtung beeinflusst…
• @shama, @jhnns und @sokra für die Pflege dieses Projekts
• Jeder, der einen Loader für webpack geschrieben hat. Ihr seid das Ökosystem…
• Alle, die ich hier vergessen habe zu erwähnen, die aber auch webpack beeinflusst haben.