2017-11-30 4 views
0

이상한 문제가 있습니다. 누구든지이 문제를 경험했는지 궁금합니다. 내 앱에서 webpack을 묶어서 제공하고 중간에 모든 것을 제공합니다. 내가 컴파일하고 모든 것이 예상 간다 나의 꿀꺽 파일에서 내 터미널에서 웹팩-devserver을 실행할 때 나는 다음과 같은 얻을 것으로 나타났습니다 : 이제Webpack Dev Server - favicon 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 
-------------------------------------- 

내가 '로컬 호스트'를 통해 내 응용 프로그램에 액세스 할 때 더 파비콘이 표시되지 않습니다 해당 페이지의 브라우저 탭에는 콘솔에 404가없고 개발자 도구 네트워크 탭에 favicon에 대한 요청이 없습니다. 이제 외부 URL을 사용하고 Favicon이 페이지 탭에있는 브라우저에 http://10.101.51.117:3002을 입력해야하지만 개발자 도구 네트워크 탭에 favicon에 대한 요청이 없습니다.

http://localhost:3002/assets/favicon.ico에 대한 favicon의 브라우저에서 직접 호출을하면 favicon이 브라우저 창에서 제공되므로 서버가 Favicon을 번들로 묶어 놓은 것처럼 보입니다. 내 HTML에서

나는 '내가 할 수있는이 이상하고 내 webpack.common.js의 태그 <link rel="shortcut icon" href="assets/favicon.ico"> 아무것도 파일 내가 (나는 편의상 여기에 일부 항목을 삭제 한) 다음 한

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

이 없습니다 내가 왜 localhost URL을 사용할 때 favicon이 탭에 표시되지 않는지 생각하지 마십시오. 누구든지이 경험을하고 문제를 해결하고 조언을 주시면 감사하겠습니다.

favicon 이름, 위치가 변경되어 브라우저 캐시가 지워졌으므로 Favicon이 캐시되지 않습니다.

답변

1

당신의 favicon은 작동해야하지만 그렇지 않습니다. 시도해 볼만한 두 가지 :

  • Favicon 캐싱은 매우 불쾌합니다. 일반적으로 사용하지 않는 브라우저로 favicon을 테스트 해 보시기 바랍니다 (아이콘이 캐시되지 않았 음).
  • favicon checker을 실행하십시오. 사이트가 로컬로 호스팅되므로 외부에서 액세스 할 수있게하려면 ngrok을 사용해야합니다.

공개 사항 : 저는 RealFaviconGenerator의 저자입니다.

관련 문제