【webpack5配置favicon.ico】

项目场景：

一个简单的html页面，配置了webpack5去进行打包，没有用任何框架。纯html+ts+less

---

问题描述

GET http://localhost:8080/src/favicon.ico 404 (Not Found)
运行起来回报这个错误，在入口文件index.html页面添加下面代码，不行

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

还是会报错，找不到图片，但是换成网页链接就可以
这个是可以的（网页链接，没有直接从本地引入）：

<link rel="icon" href="http://gf-yuntu.oss-cn-beijing.aliyuncs.com/website/officialWebsite/imgs/web_head.png" type="image/x-icon">

---

原因分析：

可能是webpack5的原因，图片地址的引入会受影响，不能直接这么引入吧。也有可能是我猜错了，反正我也不知道为什么会这样。哼，气死。

---

解决方案：

在webpack.config.js中增加

const HTMLWebpackPlugin = require('html-webpack-plugin');

...
plugins: [
    new HTMLWebpackPlugin({ 
      favicon: path.resolve(__dirname, './src/favicon.ico'), // 在这里配置ico图标
      template: "./src/index.html" // 这里设置入口文件
    })
  ],
...

没有html-webpack-plugin的话，先下载 npm i -D html-webpack-plugin