Webpack basiert auf node.js. Webpack ist ein statisches Modulpaketierungstool für moderne JavaScript-Anwendungen. Es basiert auf node.js und erfordert die Unterstützung von node.js. Es muss mit npm oder cnpm installiert werden und die Syntax lautet „cnpm install webpack“. -G".
Die Betriebsumgebung dieses Tutorials: Windows 7-System, NodeJS Version 16, DELL G3-Computer.
Webpack ist ein Code-Kompilierungstool mit Eingang, Ausgang, Loader und Plug-Ins. Webpack ist ein statisches Modulbündelungstool für moderne JavaScript-Anwendungen. 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.
Wenn Webpack eine Anwendung verarbeitet, erstellt es intern ein Abhängigkeitsdiagramm, das jedem für das Projekt erforderlichen Modul zuordnet und ein oder mehrere Bundles generiert.
Webpack ist ein Front-End-Paketierungstool, das auf Basis von node.js entwickelt wurde. Bei der Verwendung ist die Unterstützung von node.js-Komponenten erforderlich.
Webpack installieren
① Der Betrieb von Webpack hängt von Node.js ab, daher muss Node.js zuerst installiert werden.
Geben Sie nach Abschluss der Installation die folgenden zwei Befehlszeilen in das Befehlszeilenfenster ein. Wenn eine Versionsnummer angezeigt wird, ist die Installation erfolgreich.
$ node -v$ npm -v
② Anschließend können Sie Webpack über npm (ein auf Node.js basierendes Paketverwaltungstool) installieren.
Da sich die Quelle von npm im Ausland befindet, kann die Installationsgeschwindigkeit langsam sein. Es wird empfohlen, den NPM-Spiegel-CNPM von Taobao zu verwenden. Beachten Sie jedoch, dass einige Pakete in cnpm unterschiedlich sind (im Allgemeinen hat dies keinen Einfluss auf die Verwendung).
Sie können die Konfiguration von cnpm über die folgende Codezeile abschließen:
$ npm install -g cnpm --registry=https ://registry .npm.taobao.org
Verwenden Sie cnpm, um Webpack zu installieren:
cnpm install webpack -g
Erstellen Sie ein Projekt.
Als Nächstes erstellen wir eine Verzeichnis-App:
mkdir app.
Fügen Sie die Datei runoob1.js im App-Verzeichnis hinzu. Der Code lautet wie folgt:
app/runoob1.js-Datei
document.write („Es funktioniert.“);
Fügen Sie die Datei index.html im App-Verzeichnis hinzu. Der Code lautet wie folgt:
app/index.html-Datei
<html> <Kopf> <meta charset="utf-8"> </head> <Körper> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
Als nächstes verwenden wir den Befehl webpack zum Packen:
webpack runoob1.js bundle.js
Durch Ausführen des obigen Befehls wird die Datei runoob1.js kompiliert und die Datei bundle.js generiert. Nach Erfolg lauten die Ausgabeinformationen wie folgt:
Hash : a41c6217554e666594cb Version: Webpack 1.12.13 Zeit: 50 ms Asset-Größe Chunks Chunk-Namen bundle.js 1,42 kB 0 [ausgegeben] main [0] ./runoob1.js 29 Bytes {0} [erstellt]
Öffnen Sie index.html im Browser. Die Ausgabeergebnisse lauten wie folgt: