Webpack html-webpack-plugin在模板中加载收藏图标

omvjsjqw 于 2023-05-18 发布在 Webpack

关注(0)|答案(8)|浏览(219)

我使用Webpack和html-webpack-plugin以及他们提供的模板。我想在标题中添加一个favicons列表：

<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 build中包含所有的favicon，有或没有html-webpack-plugin？
我试着像文档说的那样将它们添加为extraFiles，但它们最终不会出现在我的构建文件夹中。

注：前三个是我试图做一些不起作用的事情。*

webpack

来源：https://stackoverflow.com/questions/35239733/webpack-html-webpack-plugin-load-favicons-in-template

8条答案

按热度按时间

pnwntuvh1#

您需要确保图像由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>- tags内的图片使用require，这些图片会被html-webpack-loader自动拾取。
html-loader的未来版本可能会改变这种行为-> https://github.com/webpack/html-loader/issues/17

赞(0）回复(0）举报 2023-05-18

eqfvzcg82#

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

赞(0）回复(0）举报 2023-05-18

eyh26e7m3#

为以后遇到的任何人跟进此事。
你需要在你的模板中这样做：
<link href="{%=o.htmlWebpackPlugin.files.favicon%}" rel="shortcut icon">
及其相应定义：
new HtmlWebpackPlugin({ favicon: "path/to/favicon" }),
在webpack配置的plugins中。

赞(0）回复(0）举报 2023-05-18

woobm2wo4#

经过无数次的尝试......仍然没有设法使它与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"}
     ]}
 />

希望这对其他人有帮助。

赞(0）回复(0）举报 2023-05-18

brccelvz5#

对于任何正在寻找解决方案的人来说，
您可以使用copy-webpack-plugin，这将简单地复制您指定的文件到输出文件夹。
要将所有资源从'../src/assets/favicons'复制到'favicons'输出文件夹，请执行以下操作：

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

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

赞(0）回复(0）举报 2023-05-18

xqk2d5yq6#

对于任何仍然在这个问题上挣扎的人，我在这里测试了这里所说的基本上所有内容，并找到了一个非常简单和干净的解决方案：
首先，使用HtmlWebpackPlugin，简单而直接。不需要在其配置中指定 favicon 选项。
其次，在模板<head>中声明图标列表。下面是“窍门”：当为每个图标指定 href 时，写为 require，如下所示：href="${require('./favicon16.ico')}"。这样，您可以在模板中放置任意多的favicon选项。

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

赞(0）回复(0）举报 2023-05-18

8fq7wneg7#

对我来说最好的解决方案：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 => src/img/icons/favicon-512.png
output files => dist/favicons/
包含到index.htm => dist/index.html
看起来像是=>

赞(0）回复(0）举报 2023-05-18

n3ipq98p8#

如果你使用HtmlWebpackPlugin的高级配置，使用template和templateParameters作为函数，你可能会发现很难像我们一样实现，特别是如果你使用inject: false。
resource for advanced config setup
要点是将favicon传递给HtmlWebpackPlugin本身，然后在templateParameters()内部使用它作为来自assets.favicon的参数：

new HtmlWebpackPlugin({
  // 1. Your favicon goes here
  favicon: "path/to/favicon.ico",

  inject: false,
  template: "path/to/index.html",
  templateParameters: (compilation, assets, assetTags, options) => {
    // Compute stuff to be used as template parameters..
    const foo = "bar";

    return {
      compilation,
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        tags: assetTags,
        files: assets,
        options,
      },

      // 2. Take 'favicon' from 'assets' so webpack
      // will be aware of its relative location
      favicon: assets.favicon,

      // This is why you used advanced settings...
      // You needed something custom
      foo,
    };
  },
})

赞(0）回复(0）举报 2023-05-18

我来回答

Webpack html-webpack-plugin在模板中加载收藏图标

8条答案

相关问题

热门标签

最新问答