【webpack5配置favicon.ico】

最新推荐文章于 2024-08-26 09:33:54 发布

Min_Fox

最新推荐文章于 2024-08-26 09:33:54 发布

阅读量1k

点赞数

分类专栏： webpack 文章标签： javascript webpack 前端

本文链接：https://blog.csdn.net/min_fox/article/details/125396939

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在webpack5环境下，纯html+ts+less项目中遇到引入本地favicon.ico报404错误。尝试在index.html直接引用无效。解决方法是在webpack.config.js中引入html-webpack-plugin插件，并配置favicon路径，确保正确引用。

摘要由CSDN通过智能技术生成

项目场景：

一个简单的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" // 这里设置入口文件
    })
  ],
...