Heim >Web-Frontend >CSS-Tutorial >Einführung in die Methode zum Einrichten einer Demo und Konfigurieren einer Webpack-Umgebung
Einführung in die Methode zum Einrichten einer Demo und Konfigurieren einer Webpack-Umgebung
- 不言Original
- 2018-08-18 15:15:332576Durchsuche
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>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’;
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
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!