Index.html 模板未加载 HtmlWebpackPlugin 的图标

Question

我正在尝试使用作为HtmlWebpackPlugin模板的index.html加载favicon ，但它没有加载。

这就是我的Webpack配置的样子：

'use strict'

const webpack = require('webpack')
const { join, resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: join(__dirname, 'src', 'index'),
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  },
  devServer: {
    contentBase: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: join(__dirname, 'public', 'index.html')
    })
  ]
}

那是我的index.html ：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="shortcut icon" href="favicon.ico">

  <title>React App</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>

  <div id="root"></div>
</body>

</html>

Answer 1

HTMLWebpackPlugin 不会解析 HTML 来查找您的资源。 您需要在模板中像这样包含它：

索引.html

<link rel="shortcut icon" href="${require('./favicon.ico')}">

您还需要为.ico文件包含file-loader ：

webpack.config.js

{
   test: /\.ico$/,
   loader: 'file-loader'
}

Answer 2

HtmlWebpackPlugin有一个名为favicon的选项，它允许您在开发或生产中将图标链接注入到标题中。

        new HtmlWebpackPlugin({
            title: "Title Here",
            template: "./src/index.html",
            favicon: "./src/favicon.ico",
            inject: "body",
        })

您还应该有一个rule来抓取图标，并将其导入到您的打包文件中。

            // # Target: favicon
            {
                test: /\.ico$/i,
                type: "asset/resource",
                // Use 'generator' to output unique name (based on webpack pattern e.g. [name], [ext], etc.)
                generator: {
                    filename: "[name][ext][query]"
                }
            },

注意：我正在为 Webpack 5 写作

我不确定 Webpack 4 是否具有type: "asset/resource"功能，但我假设您可以使用file-loader及其选项实现相同的功能。

            {
                test: /\.ico$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]"
                    }
                }
            },

*不保证 Webpack 4 。

Index.html 模板未加载 HtmlWebpackPlugin 的图标

问题描述

2 个解决方案

解决方案1
5 2018-08-26 08:38:14

解决方案2
1 2021-03-23 10:27:16

Index.html 模板未加载 HtmlWebpackPlugin 的图标

问题描述

2 个解决方案

解决方案1 5 2018-08-26 08:38:14

解决方案2 1 2021-03-23 10:27:16

解决方案1
5 2018-08-26 08:38:14

解决方案2
1 2021-03-23 10:27:16