Heim Web-Frontend js-Tutorial Auf dem Webpack-Entwicklungsserver tritt ein Hot-Loading-Fehler auf

Auf dem Webpack-Entwicklungsserver tritt ein Hot-Loading-Fehler auf

Jun 05, 2018 pm 03:05 PM
dev server webpack

Im Folgenden werde ich einen Artikel über die Lösung für den Fehler beim Hot-Loading des Webpack-Entwicklungsservers veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Bei Verwendung des Webpack-Entwicklungsservers als Hot-Loading-Server tritt der folgende Fehler auf:

XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost' is therefore not allowed access.

Oder der folgende Warnung erscheint Information:

dev-server.js:37 [HMR] Update failed: Error: Manifest request to http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json timed out.
 at XMLHttpRequest.request.onreadystatechange (http://localhost:8080/dist/main.js:38:22)

Nach der Diagnose liegt der Konfigurationsfehler im publicPath von webpack.config.js. Die absolute Adresse muss in eine relative geändert werden Adresse wie folgt:

output : {
 filename : '[name].js',
 // 不可配置为绝对路径,这是错误的配置
 //publicPath: "http://localhost:8080/dist/",

 // 这是正确的配置,
 publicPath: "/dist/",
 path : build,
 // umd包含了对amd、commonjs、var等多种规范的支持 
 libraryTarget : 'var' 
}

Nach wiederholten Tests wurde der öffentliche Pfad des Webpack-Entwicklungsservers in andere Domänen eingefügt. Wenn eine absolute Adresskonfiguration verwendet wird, tritt der obige Fehler definitiv auf geschehen.

Es ist wichtig zu beachten, dass der Webpack-Entwicklungsserver genau das Gegenteil von Webpack-Hot-Middleware ist und Webpack-Hot-Middleware absolute Adressen verwenden muss.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So kopieren Sie Inhalte in die Zwischenablage in JavaScript

So implementieren Sie die Batch-Löschfunktion in vue+element

Welche Befehle müssen geschrieben werden, wenn React-Komponenten zum Übertragen von Vue-Komponenten verwendet werden?

Das obige ist der detaillierte Inhalt vonAuf dem Webpack-Entwicklungsserver tritt ein Hot-Loading-Fehler auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1511
276
Lösung für Win10-SNMP-Installationsfehler, Fehlercode 0x8024402C Lösung für Win10-SNMP-Installationsfehler, Fehlercode 0x8024402C Feb 13, 2024 am 08:30 AM

Das SNMP-Protokoll ist ein einfaches Netzwerkverwaltungsprotokoll. Dieses Protokoll kann das Netzwerkverwaltungssystem unterstützen und wird verwendet, um zu überwachen, ob bei den mit dem Netzwerk verbundenen Geräten Probleme bei der Verwaltung auftreten SNMP ist mit dem Fehlercode 0x8024402C fehlgeschlagen. Was tun? Benutzer können Powershell als Administrator starten, um Benutzern die Lösung für den Fehlercode 0x8024402C bei der Installation von SNMP in Win10 sorgfältig vorzustellen. Lösung für Win10 SNMP-Installationsfehler, Fehlercode 0x8024402C 1. Starten Sie Powershell als Administrator 1. Der erste Schritt besteht darin, das Win10-System auszuführen

Detailliertes Tutorial zur Installation von Carla auf dem Ubuntu 20.04-System. Detailliertes Tutorial zur Installation von Carla auf dem Ubuntu 20.04-System. Feb 19, 2024 pm 08:20 PM

Carla ist eine Open-Source-Simulationsplattform für autonomes Fahren, die zum Entwickeln und Testen von Algorithmen für autonomes Fahren entwickelt wurde. Im Folgenden finden Sie ein detailliertes Tutorial zur Installation von Carla auf dem Ubuntu20.04-System: Abhängigkeiten installieren: Öffnen Sie ein Terminalfenster und führen Sie den folgenden Befehl aus, um Carlas Abhängigkeiten zu installieren: sudoaptupdatesudoaptinstall-ybuild-essentialclang-10llvm-10python3-pippython3-devlibpng-devlibjpeg-devlibtiff5- devlibopenexr -devlibhdf5-devlibsquish-de

VUE3-Erste-Schritte-Tutorial: Paketieren und Erstellen mit Webpack VUE3-Erste-Schritte-Tutorial: Paketieren und Erstellen mit Webpack Jun 15, 2023 pm 06:17 PM

Vue ist ein hervorragendes JavaScript-Framework, das uns dabei helfen kann, schnell interaktive und effiziente Webanwendungen zu erstellen. Vue3 ist die neueste Version von Vue, die viele neue Features und Funktionen einführt. Webpack ist derzeit einer der beliebtesten JavaScript-Modulpaketierer und Build-Tools, der uns bei der Verwaltung verschiedener Ressourcen in unseren Projekten helfen kann. In diesem Artikel wird erläutert, wie Sie Webpack zum Verpacken und Erstellen von Vue3-Anwendungen verwenden. 1. Webpack installieren

Anleitung zum Installieren, Deinstallieren und Zurücksetzen des Windows-Server-Backups Anleitung zum Installieren, Deinstallieren und Zurücksetzen des Windows-Server-Backups Mar 06, 2024 am 10:37 AM

WindowsServerBackup ist eine Funktion des WindowsServer-Betriebssystems, die Benutzern dabei helfen soll, wichtige Daten und Systemkonfigurationen zu schützen und vollständige Sicherungs- und Wiederherstellungslösungen für kleine, mittlere und große Unternehmen bereitzustellen. Nur Benutzer, die Server2022 und höher ausführen, können diese Funktion nutzen. In diesem Artikel erklären wir, wie Sie WindowsServerBackup installieren, deinstallieren oder zurücksetzen. So setzen Sie die Windows Server-Sicherung zurück: Wenn Sie Probleme mit der Sicherung Ihres Servers haben, die Sicherung zu lange dauert oder Sie nicht auf gespeicherte Dateien zugreifen können, können Sie die Sicherungseinstellungen Ihres Windows Servers zurücksetzen. Um Windows zurückzusetzen

Verwendung von PHP und Webpack für die modulare Entwicklung Verwendung von PHP und Webpack für die modulare Entwicklung May 11, 2023 pm 03:52 PM

Mit der kontinuierlichen Weiterentwicklung der Webentwicklungstechnologie sind die Front-End- und Back-End-Trennung sowie die modulare Entwicklung zu einem weit verbreiteten Trend geworden. PHP ist eine häufig verwendete Back-End-Sprache. Bei der modularen Entwicklung müssen wir einige Tools verwenden, um Module zu verwalten und zu packen. In diesem Artikel wird die Verwendung von PHP und Webpack für die modulare Entwicklung vorgestellt. 1. Was ist modulare Entwicklung? Unter modularer Entwicklung versteht man die Zerlegung eines Programms in verschiedene unabhängige Module.

So ändern Sie den Nginx-Versionsnamen, um jeden Webserver zu verschleiern So ändern Sie den Nginx-Versionsnamen, um jeden Webserver zu verschleiern May 14, 2023 pm 09:19 PM

So ändern Sie den Standardnamen von Nginx: Sie können ihn ein wenig verschleiern oder installieren Tipp: Im Allgemeinen werden Änderungen vorgenommen, bevor Nginx kompiliert wird. Nach der Änderung muss der Code wie folgt neu kompiliert werden: scr/core/nginx.conf#definenginx_version"1.4.7"#definenginx_ver"nginx/"n

Verwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen Verwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen Jun 22, 2023 am 09:13 AM

Da die Komplexität moderner Webanwendungen immer weiter zunimmt, wird die Entwicklung exzellenter Front-End-Engineering- und Plug-in-Systeme immer wichtiger. Mit der Popularität von Spring Boot und Webpack sind sie zu einer perfekten Kombination für die Erstellung von Front-End-Projekten und Plug-in-Systemen geworden. SpringBoot ist ein Java-Framework, das Java-Anwendungen mit minimalen Konfigurationsanforderungen erstellt. Es bietet viele nützliche Funktionen, wie z. B. die automatische Konfiguration, sodass Entwickler Webanwendungen schneller und einfacher erstellen und bereitstellen können. W

Microsoft veröffentlicht Windows 11 Build 25140 im Dev-Channel mit Korrekturen Microsoft veröffentlicht Windows 11 Build 25140 im Dev-Channel mit Korrekturen Apr 19, 2023 pm 05:22 PM

Microsoft führt eine neue Version von Windows 11 für im Dev-Channel registrierte Insider ein und erhöht die Build-Nummer auf 25140. Nachdem mit dem Build der letzten Woche Registerkarten im Datei-Explorer eingeführt wurden, ist dieses Update bescheidener und konzentriert sich auf die Behebung verschiedener Probleme. Es gibt eine offensichtlichere Verbesserung, die mit der Euphemia-Schriftart zu tun hat, zu der einige Sprachen gehören, die kanadische Silbenschriften verwenden, wie zum Beispiel Inuktitut. Die aktualisierte Schriftart macht mehr als 200 Zeichen besser lesbar und verbessert die Darstellung auf dem Bildschirm. Außerdem werden neue Zeichen unterstützt, die Teil des Unicode14-Standards sind. Ansonsten handelt es sich um Korrekturen, darunter auch einige, die sich auf die Registerkarten des Datei-Explorers konzentrieren

See all articles