Question

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

我对使用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并不期望导入是二进制文件，但为什么呢？任何关于如何获得捐赠的简单方法的建议或建议都将受到赞赏。

Answer 1

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

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