使用webpack打包的单页面项目如何设置favicon.icon文件

上一篇文章：如何给网站设置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就可以了