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

我有一个奇怪的问题，我想知道是否有人遇到过这种情况。我的应用程序中有 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
 --------------------------------------

现在，当我通过“localhost”访问我的应用程序时，该页面的浏览器选项卡中没有显示收藏夹图标，控制台中没有 404，并且开发人员工具网络选项卡中没有对收藏夹图标的请求？现在我应该使用外部 URL 并在浏览器中键入 http://10.101.51.117:3002，Favicon 在页面选项卡中，但是在 Developer Tools Network 选项卡中没有对 favicon 的请求。

现在，当我在浏览器中直接调用 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 时，我想不出是什么或为什么在选项卡中没有显示收藏夹图标？如果有人经历过这种情况并解决了问题，我们将不胜感激。

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

最佳答案

如果您使用的是 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 图标。

关于webpack-dev-server - Webpack Dev Server - 图标未显示在本地主机上，但适用于外部 URL，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47573912/