Basiert das Webpack auf node.js?-js-Tutorial-php.cn

Basiert das Webpack auf node.js?

青灯夜游

Freigeben： 2022-07-12 18:57:20

Original

3014 Leute haben es durchsucht

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".

Basiert das Webpack auf node.js?

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

Nach dem Login kopieren

② 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

Nach dem Login kopieren

Verwenden Sie cnpm, um Webpack zu installieren:

cnpm install webpack -g

Nach dem Login kopieren

Erstellen Sie ein Projekt

Als nächstes erstellen wir eine Verzeichnis-App:

mkdir app

Nach dem Login kopieren

Fügen Sie die Datei runoob1.js im App-Verzeichnis hinzu. Der Code lautet wie folgt:

app/runoob1.js-Datei

document.write("It works.");

Nach dem Login kopieren

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>

Nach dem Login kopieren

Als nächstes verwenden wir den Webpack-Befehl zum Packen:

webpack runoob1.js bundle.js

Nach dem Login kopieren

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]

Nach dem Login kopieren

Öffnen Sie index.html im Browser. Das Ausgabeergebnis lautet wie folgt:

Basiert das Webpack auf node.js?

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!