使用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就可以了