2016-07-23 1 views
1

私は普遍的なReactプロジェクトをセットアップしており、サーバサイドでレンダリングされるHtml.jsコンポーネントにfaviconを提供する必要があります。Webpackでファビコンを生成して提供するには?

私は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

ampedandwired/html-webpack-plugin#configuration)を使用してください。 – Season

答えて

0

あなたが好きurl-loaderを使用してloadersセクションにそれを設定する必要があります:あなたは、スタック内の_HtmlWebpackPlugin_を持って起こる場合は、[構成設定](https://github.com/がある

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