【秃头计2】使用webpack打包的单页面项目如何设置favic

原文链接：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就可以了