Webpack Dev Server - Favicon wird nicht auf localhost angezeigt, funktioniert aber mit externer URL

Question

Ich habe ein seltsames Problem, ich habe mich gefragt, ob jemand das erlebt hat. Ich habe Webpack in meiner App zu bündeln, zu servieren und alles dazwischen. Ich habe bemerkt, dass, wenn ich kompilieren und ausführen webpack-devserver von meiner großen Schluck Datei geht alles wie erwartet und in meinem Terminal ich folgendes:

webpack: Compiled successfully. 

2017-11-30T11:46:05.288Z - error: 
[Browsersync] Proxying: http://localhost:3001 
[Browsersync] Access URLs: 
-------------------------------------- 
     Local: http://localhost:3002 
    External: http://10.101.51.117:3002 
-------------------------------------- 
      UI: http://localhost:3003 
UI External: http://10.101.51.117:3003 
-------------------------------------- 

Nun, wenn ich meine app über Zugriff auf ‚localhost‘ kein Favicon angezeigt In der Browser-Registerkarte für diese Seite gibt es keine 404 in der Konsole und es gibt keine Anfrage für das Favicon in der Developer Tools Network Tab? Jetzt sollte ich die externe URL verwenden und http://10.101.51.117:3002 in den Browser eingeben, das Favicon ist dort in der Seitenregisterkarte, aber es gibt keine Anfrage für das Favicon in der Developer Tools Netzwerk Registerkarte.

Jetzt, wenn ich einen direkten Anruf im Browser zum Favicon zu http://localhost:3002/assets/favicon.ico mache, wird das Favicon im Browserfenster geliefert, so scheint es, als ob Server das Favicon bündelt?

In meinem HTML habe ich den Tag <link rel="shortcut icon" href="assets/favicon.ico"> nichts dort fremd und in meinem webpack.common.js Datei Ich habe folgendes (ich einige Elemente hier der Einfachheit halber entfernt)

module.exports = { 
    // lots of things here.. 
    module: { 
    rules: [ 
    // stuff here has been removed 
     { 
     test: /\.html$/, 
     use: 'html-loader' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/, 
     use: 'file-loader?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.(ico)$/, 
     use: 'file-loader?name=assets/[name].[ext]' 
     }, 

ich kann‘ Was denkst du, oder warum das Favicon nicht in der Registerkarte angezeigt wird, wenn ich die Localhost-URL verwende? Wenn jemand dies erfahren hat und das Problem gelöst hat, wäre der Rat willkommen.

Bitte beachten Sie, dass das Favicon nicht zwischengespeichert wird, da ich den Namen des Favicons und den Ort geändert habe und den Cache des Browsers gelöscht habe.

Answer 1

Offensichtlich sollte Ihr Favicon funktionieren, tut es aber nicht. Zwei Dinge, die Sie ausprobieren möchten:

• Favicon Caching ist SEHR scheußlich. Ich schlage vor, dass Sie Ihr Favicon mit einem Browser testen, den Sie normalerweise nicht verwenden (so dass Ihr Icon nicht zwischengespeichert wurde).
• Führen Sie die . Da Ihre Website lokal gehostet wird, müssen Sie ngrok verwenden, um von außen zugänglich zu machen.

Disclosure: Ich bin der Autor von RealFaviconGenerator