记一次favicon.ico的折腾

本文主要是介绍记一次favicon.ico的折腾，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

某项目需要将前端和后台整合在一起 我也不知道为啥要整合 上面有要求就整呗

正常前端npm run build打包后 dist内会根据设置自动生成favicon.ico文件在根目录下
但由于前后端整合 需要打包后将图标放在dist下的static文件夹里

需要的效果 打包后 index.html里

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

默认生成的是在dist根目录下
改成

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

尝试自定义favicon打包路径 下载html-loader 分别试了0.55和0.54版本 均会报错 （可能是我本地依赖的原因）
webpack.base.conf.js里的rules 配置 url-loader和html-loader 正常情况下应该能实现换路径了 但我的不知道为啥就一直报错

后来采用 直接打包前在项目里的index.html中指定href=./static/favicon.ico 从static里获取
并且在webpack.prod.conf.js里的

new CopyWebpackPlugin([{from: './favicon.ico',to: ... static的代表变量}])],

单独指定一下favicon.ico存放的位置为static下

按上所示修改 会生成两个link标签 一个在staic下 一个在根目录下
将HtmlWebPackPlugin里的favicon：resolve(‘favicon.ico’)去掉即可

这篇关于记一次favicon.ico的折腾的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---