上一篇文章:如何给网站设置favicon.ico图标,介绍了favicon.ico是什么,怎么配置,有哪几种方式。
但发现webpack打包的单页面项目却与普通项目不同,所以这篇文章介绍一下使用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
就可以了