Question

我正在使用带有html-webpack-plugin的Webpack及其提供的模板。我想在标题中添加一个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">

如果有或没有html-webpack-plugin，我如何在我的webpack构建中包含所有favicon？

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

注意：前三个是我试图做不起作用的东西。

Answer 1

您需要确保图像由WebPack处理，因此存在匹配的加载器（例如file-loader）。

要使其正常工作，您必须明确要求相应属性中的文件。为了能够明确要求index.html中的文件，你必须依次为index.html 本身使用加载器，这允许处理JS内联。

这个真的取决于你的设置（即你是否设置了html-webpack- loader ）;看一下FAQ，解释基础知识。

所以假设你有一点：

// webpack config.js中的某个地方

plugins: [

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

你可以

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

这将尝试通过WebPack加载 apple-touch-icon-120x120.png ，因此您必须确保有一个加载器和 html-加载器也需要配置：

//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> - 标签内不的图像使用require，html-webpack-loader就会自动拾取这些图像。

html-loader的未来版本可能会改变此行为 - ＆gt; https://github.com/webpack/html-loader/issues/17

Answer 2

经过多次试验......仍未设法使其与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 3

对未来遇到此问题的任何人采取此行动。

您需要在模板中使用此功能：

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

及其相应的定义：

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

在你的webpack配置的plugins中。

Answer 4

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

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

在webpack配置的“插件”部分。

Answer 5

对于正在寻找解决方案的任何人，

只需使用Copy-Webpack-Plugin。

要将所有资产从“收藏夹/”复制到“收藏夹/”，请执行以下操作：

  plugins: [
    new CopyWebpackPlugin([
      { from: `${__dirname}/public/favicon`, to: 'favicon' }
    ])
  ]

Answer 6

对于仍然在这个问题上挣扎的任何人，我基本上在这里测试了这里所说的所有内容，并找到了一个非常简单干净的解决方案：

首先，使用HtmlWebpackPlugin，简单而直接。无需在其配置中指定 favicon 选项。

第二，在模板<head>中声明图标列表。这是“技巧”：为每个图标指定 href 时，请写为 require ，如下所示：href="${require('./favicon16.ico')}"。这样，您可以在模板中放置任意数量的网站图标选项。

说明：我对此不是100％肯定，但似乎HtmlWebpackPlugin现在（在3.2.0版进行测试）可以自动处理HTML中插值的requires，而无需开发人员重新配置html-loader插件。

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

6 个答案: