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

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

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

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

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

/ / где-то в вашем webpack config.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-icon-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-загрузчика могут изменить это поведение - > https://github.com/webpack/html-loader/issues/17

Следить за этим для всех, кто столкнется с этим в будущем.

Вам понадобится это в вашем шаблоне:

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

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

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

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

С Webpack v4. 17. 2 и html-webpack-plugin v3. 2. 0, мне нужно было только сделать:

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

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