web-dev-qa-db-ja.com

Webpackhtml-webpack-pluginはテンプレートにファビコンをロードします

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つは、うまくいかないことを試みた私です。

webpackhtml-webpack-plugin
8
denislexic

何度も試してみましたが...それでも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"}
     ]}
 />

これが他の人に役立つことを願っています。

6
denislexic

画像がWebPackによって処理され、一致するローダーが存在することを確認する必要があります（ file-loader など）。

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

これは実際にはセットアップによって異なります（つまり、html-webpack-loaderをセットアップしているかどうか）。 [〜＃〜] faq [〜＃〜] を見て、基本を説明します。

したがって、これにいくらか沿っていると仮定します。

// webpackのどこかにconfig.js

plugins: [

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

次のようにindex.html画像をrequireinすることができます：

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

これはWebPack経由でApple-touch-icon-120x120.pngをロードしようとするため、ローダーがあることを確認する必要がありますandhtml-loaderも設定する必要があります：

//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'
      }
    } //..

   ] //..
}

<img>-タグ内にnotの画像に対してのみrequireを使用する必要があり、それらはhtml-webpack-loaderによって自動的に取得されます。 。

Html-loaderの将来のバージョンでは、この動作が変更される可能性があります-> https://github.com/webpack/html-loader/issues/17

7
Christian Ulbrich

将来これに遭遇する人のためにこれをフォローアップします。

テンプレートでこれが必要になります。

_<link href="{%=o.htmlWebpackPlugin.files.favicon%}" rel="shortcut icon">_

およびそれに対応する定義：

new HtmlWebpackPlugin({ favicon: "path/to/favicon" }),

webpack設定のpluginsにあります。

4
burce

Webpackv4.17.2とhtml-webpack-pluginv3.2.0では、次のことを行うだけで済みました。

new HtmlWebpackPlugin({
  favicon: "path/to/favicon"
}),

webpack設定のプラグインセクションにあります。

1
MattG

まだこの問題に苦しんでいる人のために、私はここで基本的にここで述べられているすべてをテストし、非常にシンプルでクリーンな解決策を見つけました：

まず、シンプルでストレートなHtmlWebpackPluginを使用します。構成でfaviconオプションを指定する必要はありません。

次に、テンプレート_<head>_でアイコンのリストを宣言します。これが「トリック」です。各アイコンにhrefを指定するときは、require、次のように：href="${require('./favicon16.ico')}"。このようにして、テンプレートに必要な数のファビコンオプションを配置できます。

説明：これについて100％確信はありませんが、HtmlWebpackPluginが（3.2.0でテストされて）HTML内の補間されたrequiresを、開発者が_html-loader_プラグインを再構成します。

0
Ricardo Fuzeto