Webpack html-webpack-pluginテンプレート内のfaviconをロードする

Question

私はhtml-webpack-pluginと提供テンプレートでWebpackを使用しています。 私はヘッダにファビコンのリストを追加したい：

<link rel="apple-touch-icon" sizes="57x57" href="<%= htmlWebpackPlugin.extraFiles.apple-touch-icon-57x57 %>"> 
<link rel="apple-touch-icon" sizes="60x60" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav60%>"> 
<link rel="apple-touch-icon" sizes="72x72" href="<%= htmlWebpackPlugin.extraFiles.favicons.fav72%>"> 
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png"> 
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32"> 
<link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192"> 
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96"> 
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16"> 
<link rel="manifest" href="favicons/manifest.json"> 
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#e53935"> 
<meta name="msapplication-TileColor" content="#da532c"> 
<meta name="msapplication-TileImage" content="favicon/mstile-144x144.png"> 
<meta name="theme-color" content="#e53935"> 

私はとかhtml-webpack-pluginせずに、私のWebPACKのビルドですべてのファビコンを含めることができますどのように？

ドキュメントのようにextraFilesとして追加しようとしましたが、私のビルドフォルダには入りません。

注：最初の3つは私がうまくいかないものを試していたことでした。

Answer 1

まだ多くの試練が... html-webpack-pluginで動作するようにはなっていないが、タイトル、説明、キーワード、およびほぼすべてのヘッダーに関連するすべてのものを手助けする新しいライブラリを見つけたあなたがここでそれを見つけることができますreact-helmet

と呼ば：https://github.com/nfl/react-helmet

基本的にはこれが他の人を助け希望

<Helmet 
    link={[ 
     {"rel": "apple-touch-icon", "href": require('apple-touch-icon-57x57.png'), "sizes": "57x57"} 
    ]} 
/> 

あなたの主成分でこのような何かを追加します。

Answer 2

イメージはWebPackで処理されているため、一致するローダーが存在することを確認する必要があります（file-loaderなど）。

これが機能するには、ファイルを対応する属性に明示的に要求する必要があります。明示的にindex.html内のファイルを要求できるようにするには、index.html 自身のローダーを使用してというJSインライン処理が可能なローダーを使用する必要があります。

これは本当にセットアップに依存します（つまり、html-webpack-ローダーをセットアップしたかどうかは、です）。 FAQを見て、基本を説明してください。

ですから、この沿ってやや持ち、仮定：

//どこかのWebPACKのconfig.jsの中

plugins: [ 

    new HtmlWebpackPlugin({ 
    template: 'index.html', 
    inject: 'head', 
    }) //.. 
] 

あなたはそのようなであなたのindex.html画像必要とすることができます

を

<link rel="apple-touch-icon" sizes="120x120" href="${require('./favicons/apple-touch-icon-120x120.png')}"> 

これはロードしようとしますapple-touch-icon-120x120.pn

//somewhere in your webpack.config.js 
module: { 
    loaders: [ 
    { 
     test: /\.png$/, 
     loader: 'file?name=assets/icons/[name].[hash].[ext]' 
    }, 

    { 
     test: /\.html$/, 
     loader: 'html', 
     query: { 
     interpolate: 'require' 
     } 
    } //.. 

    ] //.. 
} 

あなたが唯一のない画像に必要な使用する必要があります：WebPACKを経由グラムは、あなたは、HTMLローダーが同様に設定する必要があり、それとローダがあることを確認する必要がありますので、 inside <img> - タグは、html-webpack-loaderによって自動的に取得されます。HTMLローダーの

将来のバージョンでこの動作を変更する場合があります - >https://github.com/webpack/html-loader/issues/17