Heim > Artikel > Web-Frontend > Basiert das Webpack auf node.js?
Basiert das Webpack auf node.js?
- 青灯夜游Original
- 2022-07-12 18:57:202915Durchsuche
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 zugeordnet ist 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 der node.js-Komponente erforderlich.
Webpack installieren
① Für den Betrieb von Webpack ist Node.js erforderlich, daher muss Node.js zuerst installiert werden.
Geben Sie nach Abschluss der Installation die folgenden zwei Befehlszeilen in das Befehlszeilenfenster ein. Wenn die 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("It works.");Hinzufügen Die index.html-Datei im App-Verzeichnis lautet der Code wie folgt:
app/index.html-Datei
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>Als nächstes verwenden wir den Webpack-Befehl zum Packen:
webpack runoob1.js bundle.js
Durch Ausführen des obigen Befehls wird die Datei runoob1.js kompiliert und generieren Sie die Datei bundle.js. Nach Erfolg lauten die Ausgabeinformationen wie folgt:
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]Öffnen Sie index.html im Browser. Das Ausgabeergebnis lautet wie folgt:
Weitere Informationen zu Knoten finden Sie unter : nodejs-Tutorial!
Das obige ist der detaillierte Inhalt vonBasiert das Webpack auf node.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!