Webpack-Grundlagen – Installations-Tutorial

1. Erstellen Sie den Webpack-First-Ordner als Site, erstellen Sie den App-Ordner zum Speichern der ursprünglichen JS-Module (main.js und Greeter.js) und erstellen Sie einen öffentlichen Ordner zum Speichern des Index. html und die gepackte Bundle-.js-Datei

1 npm install -g webpack //Webpack global installieren

2. Package.json-Datei initialisieren npm init

3. Unter der Site installieren Webpack stellt Abhängigkeiten her npm install --save-dev webpack

4. Schreiben Sie die Greeter.js-Datei module. exports=function(){
vargreet = document.createElement("div");
greet.textContent = "Hallo und Grüße";
returngreet;
}

//module.exports verwendet die Funktion als Rückgabewert und wird zu einem gemeinsam genutzten Modul, das verwendet werden kann, solange die Greeter-Datei eingeführt wird

5. Schreiben Sie die main.js-Datei vargreeter = require("./Greeter.js?1.1.11");

document.getElementById("root" ).appendChild(greeter());

　/ /Introduce require()----Greeter.js module

//Holen Sie sich das HTML-Dom-Element und geben Sie den Rückgabewert der aufgerufenen Methode ein das Dom-Element

6. Führen Sie den Befehl Packaging aus, webpack app/main.js public/bundle.js

// Nach der globalen Installation von Webpack können Sie Folgendes schreiben: app/main.js ist der Haupteingang. Die Datei public/bundle.js dient dazu, die Dateien im Namespace

öffentlich zu packen, also im selben Verzeichnis als HTML.

HTML-Dateicode:

//Die gepackte Bundle-Datei heißt

2.

Methoden wie die oben genannten sind sehr unpraktisch, wenn es viele Module gibt. Dann müssen wir jedes Mal die Eingabedatei ausführen und das Verpackungsverzeichnis exportieren, was leicht zu Fehlern führt. Gibt es eine einfache Möglichkeit für uns, jedes Mal ein Wort auszuführen? Oder ist es einfacher:

Diese Konfigurationsdatei ist eigentlich eine einfache In einem JavaScript-Modul können Sie alle Informationen zum Build einfügen.

Lassen Sie uns mit dem obigen Beispiel fortfahren, um zu veranschaulichen, wie diese Konfigurationsdatei mit dem Namen im Stammverzeichnis der aktuellen Datei geschrieben wird Übungsordner. webpack.config.js Datei und nehmen Sie darin die einfachste Konfiguration vor, wie unten gezeigt Enthält den Pfad der Eintragsdatei und den Speicherort der gepackten Datei

Quadratischer Weg. 1. Konfigurieren Sie es so unter webpack.config.js

module.exports = {

Eintrag: __dirname + "/app/main.js?1.1.11",//Die einzige Eintragsdatei, die schon oft erwähnt wurde

　Ausgabe: {

　Pfad: __dirname + "/ public“ ,//Wo die gepackten Dateien gespeichert sind

　Dateiname: „bundle.js?1.1.11“//Der Dateiname der gepackten Ausgabedatei

　}

　}

Hinweis: „__dirname“ ist eine globale Variable in node.js, die auf das Verzeichnis verweist, in dem sich das aktuell ausgeführte Skript befindet. (Wenn sich die Konfigurationsdatei unter „App“ befindet, zeigen Sie auf den App-Ordner)

Das obige ist der detaillierte Inhalt vonWebpack-Grundlagen – Installations-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!