webpack如何自動生成網站圖標詳解

Posted on by

介紹

我們在自己搭建項目的時候，有時候主管給你一張logo圖片，讓你自己想辦法變成網站圖標，有時候項目需求裡不僅僅是多種尺寸的favicon.ico，還有安卓和ios在apple-touch-icon這類私有屬性的各種尺寸需要icon，其實到是有些在線工具或者本地軟件讓你去使用，但是就是有點煩躁，有沒有考慮過完全無視這個任務，讓項目構建打包之後自己生成，不用再去費心瞭。本期我們就給大傢介紹這樣一個自動將圖片處理成網站圖標的插件 —— html-webpack-plugin。他可以自動幫我們把需要各種格式各種尺寸自動生成，就是這麼方便省心。

準備

先準備要生成圖標的原圖，可以是jpg，png，也可以是svg。我們為瞭演示就一樣來一份吧。

然後在 webpack.config.js 寫個基礎結構，如下：

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const plugins = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: path.resolve(__dirname, "public/index.html")
  })
]
module.exports = {
  // ...
  plugins
}

後面，我們就要在plugins這個數組裡搞事情瞭。

使用

我們先來安裝一下

# NPM
npm i -D favicons favicons-webpack-plugin
# YARN
yarn add -D favicons favicons-webpack-plugin

我們要安裝兩個東西一個是favicons-webpack-plugin也就是插件主體，而另一個就是favicons，它是用於生成網站圖標及其相關文件的 Node.js 模塊。其實favicons-webpack-plugin本身就是一次對favicons的借用。

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  logo : './public/static/src/logo.svg', // 目標圖標路徑
  cache : true,  // 啟用緩存並可選擇指定存儲緩存數據的路徑，禁用緩存可能會增加構建時間
  prefix : 'assets/logo/' ,   // 生成資產的前綴路徑
  mode : 'webapp' ,  // 打包模式，默認為auto,可選webapp/light/auto 
  devMode : 'light', // 生產模式，默認為light,可選webapp/light 
})
plugins.push(faviconsWebpackPlugin)

十分的簡單，我們先要配置好要生成的那圖片的路徑，還有生成圖片後的位置，至於mode和devMode分別是打包和生產的兩種模式。webapp與light顧名思義就是構建之後的圖片是否完全滿足生成需要，一般生產環境下為瞭更快打開調試頁面都會選用light，這樣他就會生成一個圖標，以最快速度去構建。而webapp則會生成一堆圖標。

言歸正傳，我們剛寫的代碼，執行打包先康康會發生什麼變化吧:

圖片目錄下已經生成瞭格式各樣的圖標。

index.html裡也自動給引用瞭這些圖片。

我們再運行一下，康康網站圖標是否有啥變化吧。

還記得剛才是做瞭三種格式的圖片嗎，剛都測瞭一下，都可以很好的展示出來。

但是，你可能會想，我用不瞭這麼多圖標啊，我就想生成網站的favicon.ico，這可如何是好？

別急，剛才說瞭這個插件就是對favicons的借用，那麼favicons有的這裡也可以有。

上面是favicons一部分源碼，這部分說瞭能生成什麼圖標的開關，接下來，我們就在剛才的基礎上改動一下吧。

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  // ...
  favicons: {
    appName: "",
    appDescription: "",
    developerName: "",
    developerURL: null,
    background: '#fff',
    theme_color: '#666',
    icons: {
      firefox:false,           // Firefox OS 圖標
      windows:false,           // Windows 8 圖標
      coast: false,            // Opera 圖標
      android : false ,        // Android 主屏幕圖標
      appleIcon : false,       // Apple 觸摸圖標
      appleStartup : false,    // Apple 啟動圖像
      favicons : true ,        // 網站圖標
      yandex : false,          // Yandex 圖標
    }
  }

除瞭可以有設置圖標種類開關外，還可以設置一些別的比如app名，app的描述，主體色，背景色等等，這裡就不一一贅述瞭，主要都是看favicons 當中的配置。

這裡，我們僅想要網站圖標，那麼就可以將其他的關閉掉，然後再去打包構建，就會發現圖標僅剩下favicons的瞭。

兼容

因為favicons-webpack-plugin與html-webpack-plugin相關聯的，所以一些特定版本提前一定要安裝好，不要出現兼容問題。

  • favicons-webpack-plugin 2.x 與 html-webpack-plugin 3.x 兼容

  • favicons-webpack-plugin 3.x – 4.x 與 html-webpack-plugin 4.x 兼容

  • favicons-webpack-plugin 5.x與 html-webpack-plugin 5.x 兼容

結語

類似於favicons-webpack-plugin的插件還有很多但是基本配置和操作都大差不差。插件工具就是這樣，好與壞就看你怎麼用瞭，至少我們如果搭建項目時用瞭它，可以自動生成一系列的圖標，省去一些苦惱，圖一個方便省心罷瞭。

到此這篇關於webpack如何自動生成網站圖標的文章就介紹到這瞭,更多相關webpack自動生成網站圖標內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：