Webpack html-webpack-плагин загрузки фавиконов в шаблоне

Я использую 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, с или без html-webpack-plugin?

Я пробовал добавлять их как extraFiles как документы говорят, но они не до конца в моей папке build.

Примечание: первые 3 я пытался что-то, что не сработало.

6
html-webpack-plugin webpack

4 ответов

вам нужно убедиться, что изображения обрабатываются WebPack и, таким образом, для них существует соответствующий загрузчик (например,).

чтобы это работало, вы должны явно требовать файлы в соответствующих атрибутах. Чтобы иметь возможность явно требовать файлы в индексе.HTML вы должны использовать загрузчик в свою очередь для индексирования.HTML-код , что позволяет обрабатывать JS inline.

Это действительно зависит от вашей установки (т. е. есть ли у вас настройка html-webpack-погрузчик); взгляните на часто задаваемые вопросы, объясняя основы.

Итак, предполагая, что у вас есть несколько вдоль этого:

/ / где-то в конфигурации webpack.js

plugins: [

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

вы можете требуются на ваш индекс.html изображения, как это:

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

Это попытается загрузить apple-touch-иконка-120x120.формат PNG через WebPack, поэтому вы должны убедиться, что для этого есть загрузчик и 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'
      }
    } //..

   ] //..
}

вам нужно использовать только require для изображений, которые являются не внутри <img> - теги, те будут автоматически подобраны html-webpack-loader.

будущие версии html-loader могут изменить это поведение -> https://github.com/webpack/html-loader/issues/17

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"}
     ]}
 />

надеюсь, это поможет другим.

6

этого для всех, кто сталкивается с этим в будущем.

вам нужно это в вашем шаблоне:

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

и соответствующее ему определение:

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

на plugins вашей конфигурации webpack.

4

С Webpack v4.17.2, и html-webpack-плагин v3.2.0, я только должен был сделать:

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

в разделе Плагины конфигурации webpack.

0