Was ist React Webpack?

react ist eine JAVASCRIPT-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird. Webpack ist ein Front-End-Tool zum Laden/Verpacken von Ressourcen, das statische Analysen basierend auf Modulabhängigkeiten durchführt und dann entsprechende statische Ressourcen aus diesen Modulen gemäß festgelegten Regeln generiert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Webpack3.0- und React16.4.0-Version, Dell G3-Computer.

Empfohlen: React-Video-Tutorial

React ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen.

React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet. Viele Leute denken, dass React das V (Ansicht) in MVC ist.

React entstand aus dem internen Projekt von Facebook und wurde zum Aufbau der Website von Instagram verwendet und wurde im Mai 2013 als Open Source bereitgestellt.

React hat eine hohe Leistung und eine sehr einfache Codelogik. Immer mehr Menschen achten darauf und nutzen es.

Webpack ist ein Front-End-Tool zum Laden/Verpacken von Ressourcen. Es führt eine statische Analyse basierend auf Modulabhängigkeiten durch und generiert dann gemäß den angegebenen Regeln entsprechende statische Ressourcen für diese Module.

Webpack ist ein Open-Source-Frontend-Paketierungstool. Webpack bietet einen modularen Entwicklungsansatz, der in der Front-End-Entwicklung fehlt, indem es verschiedene statische Ressourcen als Module behandelt und daraus optimierten Code generiert. Webpack kann verschiedene Funktionen über das Terminal oder durch Änderung von webpack.config.js festlegen. Node.js muss vor der Verwendung von Webpack installiert werden.

Das Hauptziel von Webpack besteht darin, JavaScript-Dateien für die Verwendung im Browser zusammenzupacken, aber es ist auch in der Lage, beliebige Ressourcen oder Assets zu transformieren, zu bündeln oder zu verpacken.

Webpack Konfigurieren Sie die React-Entwicklungsumgebung --save-dev

Angenommen, wir haben eine Eintragsdatei „entry.js“ im aktuellen Projektverzeichnis. Die Komponente wird von „entry.js“ referenziert Diese Datei gibt die Ausgabe an dist/bundle.js an. Die Webpack-Konfiguration lautet wie folgt:

var path = require('path');module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve gibt das Dateisuffix an, das importiert werden kann. Beispielsweise können Dateien wie Hello.jsx direkt referenziert werden, indem Hello aus „Hello“ importiert wird.

loaders gibt Babel-Loader an, um Dateien mit der Erweiterung .js oder .jsx zu kompilieren, sodass Sie JSX und ES6 in diesen beiden Dateitypen frei verwenden können.

Kompilierung überwachen: webpack -d --watch

Das obige ist der detaillierte Inhalt vonWas ist React Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!