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

介紹

我們在自己搭建項目的時候,有時候主管給你一張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!

推薦閱讀: