原文链接：https://blog.csdn.net/guzhao593/article/details/93972303
这篇文章介绍一下使用webpack打包的单页面项目如何设置favicon.icon文件
第一种方式：放在根目录的实现
首先，将favicon放在项目的根目录下
然后：
1、找到build下的webpack.dev.conf.js文件
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico') // 在此处设置
})
2、找到build下的webpack.prod.conf.js文件
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico') // 在此处设置
})
最后：
执行npm run dev就可以看到网站标签上已经显示favicon图标
执行npm run build就可以看到打包的dist文件夹根目录中多了一个favicon.ico图标
第二种方式：link标签的实现
作为单页面应用其实是不需要第二种方式的，这里只是为了实现。
首先：
设置link标签
<link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon">
其次：
ico的文件地址是./img/logo.ico，所以我们的目标就是要将ico文件在打包时放入到img文件夹中。看起来很简单，直接在项目中的img文件夹中加入logo.ico不就行了行吗？打包完之后，在img文件夹中并没有logo.ico这个文件，为什么？原因在单页面应用中，在index.html中的引用的文件并不会被打包，那怎么解决呢？
这时要用到一个plugin：CopyWebpackPlugin，配置如下：
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../src/img/logo.ico'),
to: path.resolve(__dirname, '../dist/assets/img')
}
])
最后：执行npm run build就可以了
