15

我正在使用 Webpackhtml-webpack-plugin及其提供的模板。我想在标题中添加一个网站图标列表：

<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 构建中包含所有网站图标，无论是否包含html-webpack-plugin？

我尝试像文档说的那样将它们添加为额外文件，但它们最终没有出现在我的构建文件夹中。

注意：前 3 个是我尝试的一些不起作用的东西。

4

7 回答 7

19

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

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

这个真的取决于你的设置（即你是否有设置 html-webpack- loader）；查看常见问题解答，解释基础知识。

因此，假设您对此有所了解：

//在你的 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

于 2017-01-14T17:56:08.397 回答
13

使用 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 配置的插件部分。

于 2018-09-14T08:13:53.770 回答
10

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

你需要在你的模板中：

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

及其对应的定义：

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

在plugins你的 webpack 配置中。

于 2018-04-01T05:21:25.130 回答
7

经过多次试验......仍然无法使其与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"}
     ]}
 />

希望这对其他人有帮助。

于 2016-03-10T19:02:31.483 回答
1

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

您可以使用copy-webpack-plugin，它只会将您指定的文件复制到输出文件夹。

要将所有资产从“../src/assets/favicons”复制到“favicons”输出文件夹，请执行以下操作：

      plugins: [
        new CopyWebpackPlugin([
          { from: `${__dirname}/../src/assets/favicons`, to: 'favicons' }
        ])
      ]

注意：${__dirname} 将解析到包含 webpack 配置文件的文件夹。

于 2019-05-01T22:06:12.053 回答
1

对于仍在为这个问题苦苦挣扎的人，我在这里基本上测试了这里所说的一切，并找到了一个非常简单和干净的解决方案：

一、使用HtmlWebpackPlugin，简单直接。不需要在其配置中指定favicon选项。

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

说明：我对此不是 100% 确定，但似乎 HtmlWebpackPlugin 现在（在 3.2.0 测试）requires自动处理在 HTML 中插值，而不需要开发人员重新配置html-loader插件。

于 2019-08-08T14:53:06.887 回答
0

对我来说最好的解决方案： favicons-webpak-plugin

网络包配置：

const path = require('path');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

...
  plugins: [
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, 'dist/index.html'),
      template: 'index.html',
    }),
    new FaviconsWebpackPlugin({
      logo: path.resolve(__dirname, 'src/img/icons/favicon-512.png'),
      prefix: '',
      publicPath: '../favicons',
      outputPath: path.resolve(__dirname, 'dist/favicons'),
      inject: (htmlPlugin) => 
        path.basename(htmlPlugin.options.filename) === 'index.html',
    }),
  ],

结果：

  • logl src => src/img/icons/favicon-512.png
  • 输出文件 => dist/favicons/
  • 包含到 index.htm => dist/index.html
  • 它看起来像 => <link rel="shortcut icon" href="favicons/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16 .png">...
于 2021-08-27T10:45:04.787 回答