如何使用 Webpack 生成和提供网站图标？答案

【问题标题】：How to generate and serve favicons with Webpack?如何使用 Webpack 生成和提供网站图标？
【发布时间】：2016-10-01 14:54:23
【问题描述】：

所以我设置了一个通用的 React 项目，并且需要在服务器端呈现的 Html.js 组件中提供网站图标。

我对使用this package 很感兴趣，因为它似乎会自动反弹 30 多种不同大小的网站图标。

这是我到目前为止所做的：

Html.js：

...
import faviconUrl from 'universal/images/favicon.png'

<html>
  <head>
    <link rel='icon' href={faviconUrl} />
  </head>
</html>

webpack.config.js：

...
plugins: [
  new FaviconsWebpackPlugin({logo:'universal/images/favicon.png', inject: true})
]

但是，当我构建并执行 npm start 时，我收到此错误：

[Error] SyntaxError: /universal/images/favicon.png: Unexpected character '�' (1:0) > 1 | �PNG

显然，webpack 不希望导入是二进制文件，但为什么呢？任何有关使网站图标运行的简单方法的建议或建议将不胜感激。

【问题讨论】：

【解决方案1】：

您必须使用url-loader 并在loaders 部分进行设置，例如：

{
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/,
    loader: 'url',
    query: {
        name: '[path][name].[ext]'
    }
},

【讨论】：