suchen

Heim  >  Artikel  >  Web-Frontend  >  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:332532Durchsuche

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!

JavaScript css html webpack JS 选择器
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Schritte zum Installieren von Webpack über die BefehlszeileNächster Artikel：Schritte zum Installieren von Webpack über die Befehlszeile

In Verbindung stehende Artikel

Mehr sehen