Hallo zusammen, heute werden wir Webpack in nur 6 Fragen entdecken.
Webpack ist ein "Bundler-Modul", sein Ziel ist einfach: Ihre Anwendung in statische Dateien umzuwandeln.

Wie funktioniert es?

Webpack interpretiert jeden Teil Ihrer Anwendung als Modul; ob es sich um ein JavaScript-Modul, ein Stylesheet oder ein Bild handelt.
Ausgehend vom Einstiegspunkt Ihrer Anwendung generiert Webpack einen Abhängigkeitsbaum. Die in den Speicher geladenen Module ermöglichen es, eine statische Verteilung Ihrer Anwendung zu generieren.
Die so erzeugten Dateien können direkt im Browser verwendet werden.

// Das Erstellen von Abhängigkeiten beginnt mit dieser Datei 
Eintrag: './src/index.js', Ausgang: {
  // Das generierte Paket enthält die gesamte Anwendung 
  Pfad: Pfad.resolve(__dirname, 'Abstand'), Dateinamen: 'app.bundle.js'
}

Unterscheidet sich Webpack von Grunt und Gulp?

Gulp und Grunt sind Aufgabenläufer, deren Zweck es ist, Ihnen zu ermöglichen, vordefinierte Aufgaben zu orchestrieren. Sie erfordern die Verwendung verschiedener Bibliotheken, um daraus ein Build-Tool zu machen. Beispielsweise müssen Sie Uglify hinzufügen, um Ihre App durch eine Aufgabe als Code zu minimieren. Der Webpack-Ansatz bevorzugt einen statischeren Ansatz, das Lesen einer Konfigurationsdatei ermöglicht es Ihnen, sich einen Überblick über die durchgeführte Verarbeitung zu verschaffen ...

Funktioniert es, wenn ich Typescript verwende? ES6/ES7? JSX?

Dank seines Loader-Systems kann Webpack jeden Dateityp verstehen, installieren und konfigurieren Sie einfach den richtigen Loader. Jeder hinzugefügte Loader ermöglicht es Webpack, einen neuen Modultyp zu verstehen. Es gibt Ladeprogramme für jede Art von Modul: Typoskript, Babel, LESS/SASS, HTML, Bilder…

Modul: { Regeln: [
    // Alle Module mit der Endung '.ts' oder '.tsx' mit dem 'ts-loader' laden
    {Prüfung: /\.tsx?$/, Lader:'ts-Loader'} ] }

TypeScript-Loader
Babel-Loader
Darüber hinaus ermöglicht das Plugin-System die Erweiterung der von den Loadern angebotenen Funktionalitäten durch Hinzufügen erweiterter Verhaltensweisen zu Ihrer Konfiguration.

Plugins: [
  // Optimierung des Anwendungsladevorgangs aktivieren, indem das Paket geteilt wird
 neue webpack.optimize.CommonsChunkPlugins(Optionen) ]

Wie verwende ich es täglich?

Aktivieren Sie den Überwachungsmodus oder installieren Sie den Webpack Dev Server, um die Änderung Ihrer Dateien zu beobachten und den inkrementellen Build von Webpack auszulösen. Nur geänderte Module werden neu kompiliert, sodass der Build superschnell ist.
Sie können auch das Hot Module Reload konfigurieren, das nur die geänderten Module im Browser aktualisiert.
Wenn Sie beispielsweise eine Farbe in einem CSS-Modul ändern, werden die Elemente aktualisiert, ohne dass die Seite neu geladen werden muss. Magie !
Webpack Dev-Server

Wie sieht es in der Produktion aus?

Um Ihre Anwendung in der Produktion bereitzustellen, müssen Sie Ihre Konfiguration aufteilen, um die Konfigurationen nach Umgebung zu externalisieren (z. B.: prod.webpack.config.js). Diese Trennung erleichtert die Aktivierung von Funktionalitäten, die für eine Zielumgebung bestimmt sind (z. B. Quellkarten).
Bevor Sie Ihr Bundle bereitstellen, können Sie erweiterte Funktionen nutzen.
Das Tree Shaking, das das Entfernen von totem Code ermöglicht, oder das Code Splitting, das Ihr Bundle in mehrere Teile generiert, von denen einige asynchron sind.
 

Was sind die kommenden Funktionen?

Version 4 von Webpack, die sich derzeit in der Beta-Phase befindet, kommt bald mit vielen Verbesserungen. Auf der Speisekarte: Leistungsoptimierungen, WASM-Unterstützung, JSON-Unterstützung, Einführung von Standardmodulen...
Webpack 4 wird die erste Version sein #0CJS (Zero Configuration), wie Paket ein sofort einsatzbereites Bundler-Modul.
Dieser neue Ansatz vereinfacht die Bereitstellung, indem die Ausführlichkeit der Konfigurationsdateien reduziert wird.
Webpack 4 Beta
Webpack 4-Tutorial
 

Das war's, Sie können Webpack verwenden, um Ihre Anwendungen zu bündeln!