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

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!