Webpack html-webpack-plugin 在模板中加载网站图标

Question

我将 Webpack 与 html-webpack-plugin 及其提供的模板一起使用。我想在 header 中添加一个图标列表：

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

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

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

Answer 1

经过无数次试验...仍然无法使其与 html-webpack-plugin 一起使用，我确实找到了一个新库，它可以帮助处理与标题、描述、关键字...以及几乎所有相关的所有内容任何类型的 header 称为 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-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'
      }
    } //..

   ] //..
}

您只需要对 <img> 内而非的图像使用 require - 标签，这些将被 html-webpack-loader 自动拾取。

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

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",
  filename: "index.html",
  template: "./path/to/index.html",
}),

在 webpack 配置的插件部分。

Answer 5

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

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

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

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

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

Answer 6

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

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

其次，在模板中声明您的图标列表 <head>。这里是"trick"：当为每个图标指定href时，写成require，像这样：href="${require('./favicon16.ico')}" .这样，您可以在模板中放置任意数量的网站图标选项。

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

Answer 7

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

webpack 配置：

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/img/icons/favicon-512.png
输出文件 => dist/favicons/
包含到 index.htm => dist/index.html
看起来像 => ...

Webpack html-webpack-plugin 在模板中加载网站图标

Webpack html-webpack-plugin load favicons in template

webpack

html-webpack-plugin