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

Question

我正在将 Webpack 与 html-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，但它们最终没有出现在我的构建文件夹中。

注意:前 3 个是我试图做一些不起作用的事情。

Answer 1

您需要确保图像由 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 自动拾取。

future 版本的 html-loader 可能会改变这种行为 -> https://github.com/webpack/html-loader/issues/17