WebPack Dev Server- Favicon不显示Localhost，而是在外部URL上工作

Question

我有一个奇怪的问题，我想知道是否有人经历过。我的应用程序中有Webpack捆绑，服务以及介于两者之间的所有内容。我已经注意到，当我从墨西哥文件中编译和运行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。P>

在我的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 URL时，我想不出什么或为什么在选项卡中显示什么？如果有人经历了这一问题并解决了问题和建议，将不胜感激。

请注意，由于我更改了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',
    }),
  ],

btw-从Chrome 80开始，您也可以使用favicon.svg Favicons。

Answer 2

显然您的粉丝应该起作用，但行不通。您可能想尝试两件事：

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

披露：我是Realfavicongonerator的作者

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" },
      ],
    }),
  ]
}

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