Javascript 如何使用网页包生成和服务Favicon？_Javascript_Node.js_Reactjs_Webpack_Favicon

Javascript 如何使用网页包生成和服务Favicon？

javascript node.js reactjs webpack

Javascript 如何使用网页包生成和服务Favicon？,javascript,node.js,reactjs,webpack,favicon,Javascript,Node.js,Reactjs,Webpack,Favicon,因此，我已经设置了一个universal React项目，需要在一个呈现为服务器端的Html.js组件中为favicons提供服务我对使用感兴趣，因为它似乎可以自动反弹30+个不同大小的Favicon 以下是我迄今为止所做的工作： Html.js： ... import faviconUrl from 'universal/images/favicon.png' <html> <head> <link rel='icon' href={favicon

因此，我已经设置了一个universal React项目，需要在一个呈现为服务器端的Html.js组件中为favicons提供服务

我对使用感兴趣，因为它似乎可以自动反弹30+个不同大小的Favicon

以下是我迄今为止所做的工作：

Html.js：

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

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

...
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并不期望导入是一个二进制文件，但为什么呢？如果您有任何关于如何使用favicons的简单方法的建议，我们将不胜感激。

您必须在

loaders

部分使用并设置它，如：

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

您必须在

loaders

部分使用并设置它，如：

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

如果堆栈中碰巧有HtmlWebpackPlugin，则有一个用于favicons的值。如果堆栈中碰巧有HtmlWebpackPlugin，则有一个用于favicons的值。