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

否认词

我正在使用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

我尝试像文档所说的那样将它们添加为extraFiles,但是它们并没有出现在我的build文件夹中。

注意:前3个是我尝试执行的操作无效。

否认词

经过无数次试用...仍然无法使其正常运行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"}
     ]}
 />

希望这对其他人有帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Webpack插件'html-webpack-plugin'的EJS模板

来自分类Dev

使用Webpack替换HTML模板中的按钮

来自分类Dev

使用Webpack替换HTML模板中的按钮

来自分类Dev

内联样式和html-webpack-plugin

来自分类Dev

Webpack和Angular HTML图像加载

来自分类Dev

如何从 webpack 中的 raw-loader 中排除 html-webpack-plugin 模板

来自分类Dev

html-webpack-plugin 输出 html ,内部主体为空

来自分类Dev

如何在带有HTML Webpack插件的webpack构建中包括多个图标?

来自分类Dev

如何使用webpack在ngDialog模板中找到html文件?

来自分类Dev

Webpack 删除空的 html 标签?

来自分类Dev

html-webpack-plugin 没有插入 options.title

来自分类Dev

Webpack:如何将原始HTML加载为React JSX?

来自分类Dev

使用webpack代码拆分,如何加载块和HTML布局?

来自分类Dev

Webpack:如何将原始HTML加载为React JSX?

来自分类Dev

使用带有 webpack 的 angularjs 时无法加载 html 文件

来自分类Dev

webpack 2延迟加载

来自分类Dev

Webpack未加载CSS

来自分类Dev

Webpack加载程序,包括

来自分类Dev

Webpack + TypeScript +模块加载

来自分类Dev

webpack 2延迟加载

来自分类Dev

Webpack:图像无法加载

来自分类Dev

Webpack - 模块何时加载?

来自分类Dev

Webpack 加载遗留代码

来自分类Dev

Vue + html-webpack-plugin无法加载index.html生成

来自分类Dev

Webpack监视模式不适用于html-webpack和clean-webpack插件

来自分类Dev

在 webpack 中加载 css 文件时出错

来自分类Dev

反应未通过Webpack加载的图标

来自分类Dev

反应未通过Webpack加载的图标

来自分类Dev

如何在 html-webpack-plugin 中使用 ./ 而不是 / bundle src 构建 index.html