Implementierung von webpack-dev-server zum Erstellen eines lokalen Servers

Vorwort

Wenn wir webpack zum Verpacken verwenden, stellen wir fest, dass wir jedes Mal, wenn wir einen kleinen Code aktualisieren, diesen neu verpacken müssen, was sehr mühsam ist. Wir hoffen, einen Server lokal zu erstellen und dann neuen Code zu schreiben, der automatisch erkannt wird. Zu diesem Zeitpunkt müssen wir webpack-dev-server verwenden

Webpack-Deb-Server

Webpack bietet einen optionalen lokalen Entwicklungsserver. Dieser lokale Server basiert auf node.js und verwendet intern das Express-Framework, das die automatische Aktualisierung des Browsers zur Anzeige der gewünschten geänderten Ergebnisse ermöglicht.

Da es sich um ein separates Modul handelt, müssen wir es vor der Verwendung installieren. Der Befehl lautet wie folgt:

npm install -D webpack-dev-server 

Nachdem die Installation abgeschlossen ist, müssen wir sie auch in Webpack konfigurieren. Das Konfigurationsobjekt ist devServer, das auch viele Eigenschaften hat. Die häufig verwendeten Eigenschaften sind wie folgt:

• contentBase: Welche Datei stellt den lokalen Dienst bereit? Die Standardeinstellung ist die Stammdatei. Hier müssen wir ./dist eingeben.
• Port: Portnummer, der Standard ist 8080
• Inline: Die Seite wird in Echtzeit aktualisiert
• historyApiFallBack: Verlassen Sie sich bei SPA-Seiten (Single Page Application) auf den HTML5-Verlaufsmodus

Die webpack.config.js-Konfiguration sieht wie folgt aus:

modul.exporte = {
   devServer: {
        Inhaltsbasis: "./dist",
        inline: wahr,
    },
}

Als Nächstes fügen wir der Datei package.json einen Skriptbefehl hinzu:

"Skripte": {
    "dev": "Webpack-Server"
  },

dev stellt die Entwicklungsumgebung dar und die obige Konfiguration ist abgeschlossen

Startfehler beim Webpack-Dev-Server

Anschließend starten wir den Befehl npm run dev und das Programm meldet folgenden Fehler:

Fehler: Modul „webpack-cli/bin/config-yargs“ kann nicht gefunden werden

Der Grund ist das Versionsproblem von webpack-cli. Schauen wir uns zunächst unsere Version unten an

"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

Lösung 1

Reduzieren Sie die Version von webpack-cli von 4 auf 3

1. Deinstallieren Sie webpack-cli

npm deinstalliert webpack-cli

2. Installieren Sie webpack-cli@3

npm installiere webpack-cli@3 -D

Dann meldet der Start keinen Fehler, aber das ist nur eine vorübergehende Lösung. Wir empfehlen die zweite Lösung

Lösung 2

Ändern Sie die Konfiguration in Skripten und ändern Sie das ursprüngliche webpack-dev-serve in webpack serve

"Skripte": {
    "dev": "webpack serve --open --mode Entwicklung"
},

Zum Schluss geben wir npm run dev in das Terminal ein, um normal zu starten. Die Webseite wird automatisch geöffnet, da wir den Parameter --open hinzugefügt haben. Wenn Sie sie manuell öffnen möchten, entfernen Sie einfach --open.

Lösen Sie das Problem der Hafenbelegung

Wenn Sie bereits ein Projekt mit vue+webpack gestartet haben, aber npm run dev erneut ausführen, wird der folgende Fehler gemeldet

Fehler: listen EADDRINUSE: Adresse wird bereits verwendet 127.0.0.1:8080

Der Grund ist, dass der Standardport, den wir beim letzten Mal gestartet haben, 8080 war. Dieses Mal starten Sie ein Projekt erneut und der Port ist immer noch 8080, aber Port 8080 ist bereits belegt. Die Lösung besteht darin, dass wir nur die PID-Prozessnummer beenden müssen, die Port 8080 entspricht.

Suchen Sie zuerst die Prozess-ID, die dem Port 8080 entspricht

lsof -i:8080

Nachdem Sie die entsprechende PID gefunden haben, beenden Sie sie mit dem Kill-Befehl.

kill -9 PID-Prozessnummer

Dies ist das Ende dieses Artikels zum Erstellen eines lokalen Servers mit webpack-dev-server. Weitere Informationen zum Erstellen eines lokalen Servers mit webpack-dev-server finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!