介紹

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

準(zhǔn)備

先準(zhǔn)備要生成圖標(biāo)的原圖，可以是jpg，png，也可以是svg。我們?yōu)榱搜菔揪鸵粯觼硪环莅伞?/p>

然后在 webpack.config.js 寫個基礎(chǔ)結(jié)構(gòu)，如下：

// 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這個數(shù)組里搞事情了。

使用

我們先來安裝一下

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

我們要安裝兩個東西一個是favicons-webpack-plugin也就是插件主體，而另一個就是favicons，它是用于生成網(wǎng)站圖標(biāo)及其相關(guān)文件的 Node.js 模塊。其實(shí)favicons-webpack-plugin本身就是一次對favicons的借用。

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

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

言歸正傳，我們剛寫的代碼，執(zhí)行打包先康康會發(fā)生什么變化吧:

圖片目錄下已經(jīng)生成了格式各樣的圖標(biāo)。

index.html里也自動給引用了這些圖片。

我們再運(yùn)行一下，康康網(wǎng)站圖標(biāo)是否有啥變化吧。

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

但是，你可能會想，我用不了這么多圖標(biāo)啊，我就想生成網(wǎng)站的favicon.ico，這可如何是好？

別急，剛才說了這個插件就是對favicons的借用，那么favicons有的這里也可以有。

上面是favicons一部分源碼，這部分說了能生成什么圖標(biāo)的開關(guān)，接下來，我們就在剛才的基礎(chǔ)上改動一下吧。

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

除了可以有設(shè)置圖標(biāo)種類開關(guān)外，還可以設(shè)置一些別的比如app名，app的描述，主體色，背景色等等，這里就不一一贅述了，主要都是看favicons 當(dāng)中的配置。

這里，我們僅想要網(wǎng)站圖標(biāo)，那么就可以將其他的關(guān)閉掉，然后再去打包構(gòu)建，就會發(fā)現(xiàn)圖標(biāo)僅剩下favicons的了。

兼容

因?yàn)閒avicons-webpack-plugin與html-webpack-plugin相關(guān)聯(lián)的，所以一些特定版本提前一定要安裝好，不要出現(xiàn)兼容問題。

• 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 兼容

結(jié)語

類似于favicons-webpack-plugin的插件還有很多但是基本配置和操作都大差不差。插件工具就是這樣，好與壞就看你怎么用了，至少我們?nèi)绻罱?xiàng)目時用了它，可以自動生成一系列的圖標(biāo)，省去一些苦惱，圖一個方便省心罷了。

到此這篇關(guān)于webpack如何自動生成網(wǎng)站圖標(biāo)的文章就介紹到這了,更多相關(guān)webpack自動生成網(wǎng)站圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論