Webpack 开发服务器 - 网站图标未显示在本地主机上，但适用于外部 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
 --------------------------------------

现在，当我通过“localhost”访问我的应用程序时，该页面的浏览器选项卡中没有显示任何图标，控制台中没有 404，并且开发人员工具网络选项卡中没有对图标的请求？现在我应该使用外部 URL 并在浏览器中输入 http://10.101.51.117:3002，Favicon 位于页面选项卡中，但开发人员工具网络选项卡中没有对 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 时，图标没有显示在选项卡中是什么或为什么？如果有人经历过此问题并解决了问题并提供建议，我们将不胜感激。

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

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

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

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

披露：我是 RealFaviconGenerator 的作者

Answer 3

我会像这样使用文件加载器：

安装包

 npm i --save-dev file-loader

然后将以下内容添加到您的 webpack 配置中（默认 webpack.config.js）

{
    test: /\.(png|svg|jpg|gif|ico)$/,
    use: ['file-loader?name=[name].[ext]']
}

这应该将文件移动到您的 dist 文件夹中。

Answer 4

如何使用

copy-webpack-plugin

复制 favicon.ico。

// File: webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  ...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "favicon.ico" },
      ],
    }),
  ]
}

不要忘记重新加载浏览器页面忽略缓存。

Answer 5

在本地主机中打开使用开发服务器。尝试更改 devServer 的端口。当我将其从5000更改为8080时，我的工作正常。

module.exports = {
    devServer: {
        static: {
          directory: path.join(__dirname, 'dist'),
        },
        historyApiFallback: true,
        allowedHosts: [
          'all'
        ],
        port: 8080,
      },
};

就我而言，可能的原因是端口5000可能已被另一个进程使用。我能想到的是因为我也在开发 Flask 应用程序，默认端口是5000。