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'访问我的应用程序时，该页面的浏览器选项卡中没有显示Favicon，控制台中没有404，并且开发人员工具网络选项卡中没有关于favicon的请求？现在我应该使用外部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]'
      },

我无法想到当我使用localhost网址时，标签中没有显示favicon的原因或原因？如果有人经历过这个并解决了这个问题，我们将不胜感激。

请注意，之前没有缓存Favicon，因为我更改了favicon名称，位置并清除了浏览器缓存。

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缓存非常糟糕。我建议您使用通常不使用的浏览器测试您的图标（因此它不会缓存您的图标）。
运行favicon checker。由于您的网站是在本地托管的，因此您必须使用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" },
      ],
    }),
  ]
}

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

Webpack Dev Server - favicon不在localhost上显示，但适用于外部URL

4 个答案: