2017-11-30 7 views
0

私は奇妙な問題があります。私はバンドル、サービス、およびその間のすべてのために私のアプリでwebpackを持っています。私はコンパイルして、すべてが期待行くように、私の一気ファイルから、私の端末にWebPACKの-devserverを実行したときに、私は次のよう得ることに気づいた:今Webpack Dev Server - faviconローカルホストでは表示されませんが外部URLで動作します

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 
-------------------------------------- 

私は「localhostの」を介して私のアプリにアクセスしたときに何のファビコンが表示されませんそのページのブラウザタブには404がコンソールになく、開発者ツールの[ネットワーク]タブにfaviconのリクエストはありませんか?ここで外部URLを使用して、Faviconがページタブにあるブラウザにhttp://10.101.51.117:3002と入力する必要がありますが、開発者ツールの[ネットワーク]タブにfaviconのリクエストはありません。

ブラウザでfaviconにhttp://localhost:3002/assets/favicon.icoを直接呼び出すと、faviconがブラウザウィンドウに表示されるので、サーバがFaviconをバンドルしているようです。

私はタグにそこに奇妙な <link rel="shortcut icon" href="assets/favicon.ico">何もありませんし、私の webpack.common.jsファイルに私は「

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]' 
     }, 

(私は簡単にするためにここにいくつかの項目を削除した)ことができ、次のしている私のHTMLで

localhost URLを使用しているときに、faviconがタブに表示されていない理由や理由を考えませんか?誰もがこれを経験して問題を解決し、助言をいただければ幸いです。

favicon名、場所を変更してブラウザキャッシュをクリアしたので、Faviconは以前からキャッシュされていないことに注意してください。

答えて

1

あなたのfaviconはうまくいくはずですが、そうではありません。試してみたいことが2つあります:

  • ファビコンのキャッシュは非常に厄介です。通常は使用しないブラウザであなたのfaviconをテストすることをお勧めします(アイコンがキャッシュされませんでした)。
  • favicon checkerを実行してください。あなたのサイトはローカルでホストされているので、外部からアクセスできるようにするにはngrokを使用する必要があります。

開示:私はRealFaviconGeneratorの著者です

関連する問題