Webpack Dev Server - 图标未显示在本地主机上，但适用于外部 URL

Question

我有一个奇怪的问题，我想知道是否有人遇到过这种情况。我的应用程序中有 webpack 可以捆绑、提供服务以及介于两者之间的所有内容。我注意到，当我从我的 gulp 文件编译和运行 webpack-devserver 时，一切都按预期进行，在我的终端中，我得到以下信息：

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，并且开发人员工具网络选项卡中没有对收藏夹图标的请求？现在我应该使用外部 URL 并在浏览器中输入http://10.101.51.117:3002 网站图标在页面选项卡中，但是开发人员工具网络选项卡中没有对网站图标的请求。

现在，当我在浏览器中直接调用 favicon 到http://localhost:3002/assets/favicon.ico 时，favicon 在浏览器窗口中提供，所以看起来服务器正在捆绑 Favicon？

在我的 HTML 中，我的标签<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]'
      },

当我使用本地主机 URL 时，我想不出是什么或为什么在选项卡中没有显示收藏夹图标？如果有人经历过这种情况并解决了问题，我们将不胜感激。

请注意，由于我更改了网站图标名称、位置并清除了浏览器缓存，因此之前没有缓存网站图标。

Answer 1

如果您正在使用，HtmlWebpackPlugin那么您可以favicon: './src/assets/favicon.ico',在那里包含财产。

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
      favicon: './src/assets/favicon.ico',
      filename: './index.html',
    }),
  ],

顺便说一句 - 从 Chrome 80 开始，您也可以使用favicon.svg网站图标。

Answer 2

显然你的网站图标应该可以工作，但没有。您可能想尝试以下两件事：

• 网站图标缓存非常糟糕。我建议您使用您通常不使用的浏览器测试您的网站图标（因此它不会缓存您的图标）。
• 运行图标检查器。由于您的网站是在本地托管的，因此您必须使用ngrok才能从外部访问。

披露：我是 RealFaviconGenerator 的作者