介紹

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

準(zhǔn)備

先準(zhǔn)備要生成圖標(biāo)的原圖，可以是jpg，png，也可以是svg。我們?yōu)榱搜菔揪鸵粯觼?lái)一份吧。

然后在 webpack.config.js 寫(xiě)個(gè)基礎(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這個(gè)數(shù)組里搞事情了。

使用

我們先來(lái)安裝一下

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

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

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  logo : './public/static/src/logo.svg', // 目標(biāo)圖標(biāo)路徑
  cache : true,  // 啟用緩存并可選擇指定存儲(chǔ)緩存數(shù)據(jù)的路徑，禁用緩存可能會(huì)增加構(gòu)建時(shí)間
  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)

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

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

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

index.html里也自動(dòng)給引用了這些圖片。

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

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

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

別急，剛才說(shuō)了這個(gè)插件就是對(duì)favicons的借用，那么favicons有的這里也可以有。

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

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 啟動(dòng)圖像
      favicons : true ,        // 網(wǎng)站圖標(biāo)
      yandex : false,          // Yandex 圖標(biāo)
    }
  }

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

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

兼容

因?yàn)閒avicons-webpack-plugin與html-webpack-plugin相關(guān)聯(lián)的，所以一些特定版本提前一定要安裝好，不要出現(xiàn)兼容問(wè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é)語(yǔ)

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

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

最新評(píng)論