webpack 处理网页小图标favicon

版权声明：欢迎转载，转载请注明来源，谢谢！ https://blog.csdn.net/a8725585/article/details/82426751

问题现象：

vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖，因此设置小图标的时候按原来的方法会出现问题
在页面源文件index.html的标签之间插入

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

仍然无法加载小图标

---

解决方法：

HtmlWebpackPlugin插件中加入小图标
vue脚手架时修改webpack.dev.conf.js配置文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: './favicon.ico', // 添加小图标
      inject: true
    }),

不要忘记webpack.prod.conf.js中也需要添加哦

注：( favicon放入根目录(就是src同级的目录)，favicon是以根目录为相对路径，而不是webpack.dev.conf.js配置文件为相对路径。)
修改完配置项后，重新npm run dev 刷新页面后小图标就出来了