So konfigurieren Sie Webpack für die Arbeit mit React: Ausführliche Anleitung

Webpack ist eines der beliebtesten Tools zum Erstellen und Verpacken von JavaScript-Anwendungen. Es ermöglicht Entwicklern, effizient mit React zu arbeiten - einer der beliebtesten Bibliotheken zum Erstellen von Benutzeroberflächen.

In diesem ausführlichen Tutorial erfahren Sie, wie Sie Webpack für die Arbeit mit React richtig konfigurieren. Wir werden uns die Schritte ansehen, die zum Installieren und Konfigurieren von Webpack erforderlich sind, und Babel so konfigurieren, dass der JSX-Code transpiliert wird.

Wir beginnen mit der Installation von Webpack und dem Erstellen eines einfachen React-Projekts. Dann werden wir die Webpack-Konfiguration so konfigurieren, dass sie mit Babel mit JSX und ES6 umgehen kann. Wir werden uns auch ansehen, wie Wir unserem Projekt Unterstützung für Stile und Bilder hinzufügen, indem wir verschiedene Webpack-Downloader verwenden. Am Ende des Handbuchs können Sie Webpack mit React verwenden, um Ihre Anwendungen zu erstellen und bereitzustellen.

Arbeitsvorbereitung

Um Webpack für die Verwendung von React zu konfigurieren, führen Sie die folgenden Schritte aus:

1. Installiere Node.js: Um Webpack zu verwenden, muss Node installiert werden.js, das einen npm-Batch-Manager enthält.

2. Neues Projektverzeichnis erstellen: erstellen Sie ein neues Verzeichnis, in dem die React-Anwendung entwickelt werden soll.

3. Initialisieren Sie das Projekt mit npm: Wechseln Sie an der Eingabeaufforderung zum Projektverzeichnis und führen Sie den Befehl aus npm init. Dadurch wird ein package erstellt.eine JSON-Datei, die Informationen über das Projekt und seine Abhängigkeiten enthält.

4. Installieren Sie Webpack und die benötigten Plugins: Installieren Sie Webpack und die benötigten Plugins mit dem Befehl npm install webpack webpack-cli --save-dev. Diese Pakete ermöglichen die Verwendung von Webpack in einem Projekt.

5. Webpack-Konfigurationsdatei erstellen: Erstellen Sie eine Webpack-Datei.config.js und definieren Sie darin die Webpack-Einstellungen für das Projekt.

6. Babel installieren: um die moderne JavaScript-Syntax mit React verwenden zu können, müssen Sie Babel und die erforderlichen Plugins mit dem Befehl installieren npm install babel-loader @babel/core @babel/preset-react --save-dev. Diese Pakete ermöglichen es Webpack, JavaScript-Dateien mit React zu verarbeiten und sie in browserkompatiblen Code zu konvertieren.

7. Babel in der Webpack-Konfigurationsdatei konfigurieren: Fügen Sie der Webpack-Datei die erforderlichen Babel-Einstellungen hinzu.config.js, damit Webpack Babel beim Verarbeiten von JavaScript-Dateien verwenden kann.

Jetzt sind Sie bereit, mit React mit Webpack zu beginnen! In den folgenden Abschnitten werden wir uns ausführlich mit der Konfiguration und Verwendung von Webpack für React-Anwendungen befassen.

Erforderliche Pakete installieren

Bevor Sie mit der Konfiguration von Webpack für die Verwendung von React beginnen, müssen Sie einige Pakete installieren. Hier ist eine Liste der Pakete, die Sie für eine erfolgreiche Konfiguration benötigen:

• webpack: hauptpaket zum Erstellen eines Projekts;
• webpack-cli: ermöglicht das Ausführen von Webpack über die Befehlszeile;
• webpack-dev-server: stellt sicher, dass die Seite automatisch neu geladen wird, wenn Dateien geändert werden;
• babel-loader: ein Webpack-Downloader, mit dem Sie Babel verwenden können;
• @babel/core: Babel Hauptpaket;
• @babel/preset-env: Babel-Voreinstellung zur Unterstützung von modernem JavaScript;
• @babel/preset-react: Babel-Preset zur Unterstützung von JSX und React;
• react: React-Bibliothek;
• react-dom: React-Paket für die Arbeit mit einer Website;

Verwenden Sie den Befehl npm, um alle diese Pakete zu installieren:

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom --save-dev

Nachdem Sie alle Pakete installiert haben, können Sie mit der Konfiguration von Webpack für die Arbeit mit React fortfahren. Weitere Informationen zum Einrichten von Webpack finden Sie im nächsten Abschnitt.

Einrichten von Webpack

Dieser Abschnitt beschreibt die grundlegende Konfiguration von Webpack für die Arbeit mit React. Beginnen wir mit der Installation von Webpack über den npm-Batch-Manager:

1. Installieren Sie Webpack global, indem Sie den folgenden Befehl ausführen: npm install webpack -g
2. Erstellen Sie ein neues Verzeichnis für Ihr Projekt und navigieren Sie in der Befehlszeile zu diesem Verzeichnis
3. Initialisieren Sie ein neues npm-Projekt, führen Sie den folgenden Befehl aus: npm init -y
4. Installieren Sie Webpack als Entwicklungsabhängigkeit, indem Sie den folgenden Befehl ausführen: npm install webpack webpack-cli --save-dev

Nach der Installation von Webpack können Sie eine Konfigurationsdatei erstellen, um den Build zu konfigurieren. Erstellen Sie eine Webpack-Datei.config.js im Projektstamm und fügen Sie den folgenden Code hinzu:

const path = require('path');module.exports = ,module: ,],>,resolve: ,>;

In diesem Beispiel geben wir einen Einstiegspunkt für unsere Anwendung an ( ./src/index.js ) und der Pfad zum Speichern des gesammelten Bundles ( ./dist/bundle.js ).

Wir fügen auch eine Regel für die Verarbeitung von Dateien mit Erweiterungen hinzu .js und .jsx mit Babel.

Erweiterungen .js und .die jsx werden dem Resolve-Abschnitt hinzugefügt.extensions, damit wir Module importieren können, ohne deren Erweiterungen anzugeben.

Nachdem Sie die Konfigurationsdatei konfiguriert haben, können Sie Webpack in der Befehlszeile zum Erstellen des Projekts verwenden. Führen Sie den Befehl aus:

1. webpack - Projekt in einem Bundle zusammenstellen
2. webpack --watch - automatisch neu kompilieren, wenn sich Dateien ändern

Jetzt haben Sie die Grundlage für die Konfiguration von Webpack für die Arbeit mit React. Sie können weitere Plugins und Loader hinzufügen, zusätzliche Parameter konfigurieren und React in Ihrem Build verwenden.