Einführung in die Methode zum Einrichten einer Demo und Konfigurieren einer Webpack-Umgebung-CSS-Tutorial-php.cn

Einführung in die Methode zum Einrichten einer Demo und Konfigurieren einer Webpack-Umgebung

不言

Freigeben： 2018-08-18 15:15:33

Original

2563 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in die Methode zum Einrichten einer Demo zur Konfiguration der Webpack-Umgebung. Ich hoffe, dass er für Freunde hilfreich ist Du.

1. Erstellen Sie eine Demo

2. Geben Sie das erstellte webpack_demo-Verzeichnis ein, um einen dist-Ordner (für die Produktion) und einen src-Ordner (für die Entwicklungsumgebung) zu erstellen

src-Ordner: Wird zum Speichern des von uns geschriebenen Javascript-Codes verwendet, der einfach als in JavaScript geschriebenes Modul verstanden werden kann.

dist-Ordner: Wird zum Speichern von Dateien verwendet, die von Browsern gelesen werden können. Dies ist eine von Webpack gepackte Datei.

3. Programmdateien schreiben:

Erstellen Sie manuell eine index.html-Datei unter der dist-Datei
/dist/index.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>webpack</title></head><body> 
    <p id="title"></p> 
    <script src="./bundle.js"></script></body></html>

Nach dem Login kopieren

Erläuterung: Die Datei bundle.js wird hier vorgestellt. Später kann Webpack verwendet werden, um eine Eintragsdatei von „entry.js“ unter src

/src/entry.js zu generieren:

document.getElementById(‘title’).innerHTML=’Hello Webpack’;

Nach dem Login kopieren

Dann Webpack-Verpackung:

1. Geben Sie im Terminal den vs-Code ein: webpack src/entry.js dist/ bundle.js Nach erfolgreicher Ausführung wird die Datei bundle.js im Verzeichnis dist generiert und die Hello Webpack-Informationen werden im Browser angezeigt

2. Dies kann auch zum Verpacken von Webpack src auf diese Weise erfolgen /entry.js –output dist/bundle.js –mode development

generiert die bundle.js-Datei im dist-Verzeichnis

Live-Server global installieren:

npm install -g live-server

Nach dem Login kopieren

Installieren Nach Abschluss Live-Server im Terminal ausführen und die Hello Webpack-Informationen werden im Browser angezeigt

Verwandte Empfehlungen:

Schritte um Webpack über die Befehlszeile zu installieren

Was sind die CSS-Selektoren? Zusammenfassung der Verwendung des CSS-Selektors

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Einrichten einer Demo und Konfigurieren einer Webpack-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!