Webpack html-webpack-plugin在模板中加载favicon

Question

我正在使用Webpack html-webpack-plugin及其提供的模板.我想在标题中添加一个favicon列表:

<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">

如何在我的webpack构建中包含所有favicons,有或没有html-webpack-plugin？

我尝试将它们添加为文档所说的extraFiles,但它们不会最终出现在我的构建文件夹中.

注意:前三个是我尝试了一些不起作用的东西.

Answer 1

您需要确保图像由WebPack处理,因此存在匹配的加载器(例如文件加载器).

为此,您必须明确要求相应属性中的文件.为了能够明确要求index.html中的文件,你必须依次为index.html 本身使用一个加载器,这允许处理JS内联.

这个真的取决于你的设置(即你是否设置了html-webpack- loader); 看看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')}">

这将尝试通过WebPack 加载apple-touch-icon-120x120.png,因此您必须确保它有一个加载器,并且还需要配置html-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'
      }
    } //..

   ] //..
}

你只需要对不在里面的图像使用require <img>- 标签,这些将由html-webpack-loader自动拾取.

未来版本的html-loader可能会改变这种行为 - > https://github.com/webpack/html-loader/issues/17

Answer 2

使用 Webpack v4.17.2 和 html-webpack-plugin v3.2.0，我只需要做：

new HtmlWebPackPlugin({
  favicon: "./path/to/favicon",
  filename: "index.html",
  template: "./path/to/index.html",
}),

在 webpack 配置的插件部分。

Answer 3

为将来遇到此问题的任何人跟进此问题。

你需要在你的模板中使用它：

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

及其相应的定义：

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

在plugins你的 webpack 配置中。

Answer 4

经过多次试验......仍然没有设法使用它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"}
     ]}
 />

希望这有助于其他人.