您好,登錄后才能下訂單哦!
這篇文章主要介紹webpack怎么自動(dòng)生成網(wǎng)站圖標(biāo),文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
我們?cè)谧约捍罱?xiàng)目的時(shí)候,有時(shí)候主管給你一張logo圖片,讓你自己想辦法變成網(wǎng)站圖標(biāo),有時(shí)候項(xiàng)目需求里不僅僅是多種尺寸的favicon.ico,還有安卓和ios在apple-touch-icon這類私有屬性的各種尺寸需要icon,其實(shí)到是有些在線工具或者本地軟件讓你去使用,但是就是有點(diǎn)煩躁,有沒有考慮過完全無視這個(gè)任務(wù),讓項(xiàng)目構(gòu)建打包之后自己生成,不用再去費(fèi)心了。本期我們就給大家介紹這樣一個(gè)自動(dòng)將圖片處理成網(wǎng)站圖標(biāo)的插件 html-webpack-plugin。他可以自動(dòng)幫我們把需要各種格式各種尺寸自動(dòng)生成,就是這么方便省心。
先準(zhǔn)備要生成圖標(biāo)的原圖,可以是jpg,png,也可以是svg。我們?yōu)榱搜菔揪鸵粯觼硪环莅伞?/p>
然后在 webpack.config.js 寫個(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ù)組里搞事情了。
我們先來安裝一下
# 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)
十分的簡單,我們先要配置好要生成的那圖片的路徑,還有生成圖片后的位置,至于mode和devMode分別是打包和生產(chǎn)的兩種模式。webapp與light顧名思義就是構(gòu)建之后的圖片是否完全滿足生成需要,一般生產(chǎn)環(huán)境下為了更快打開調(diào)試頁面都會(huì)選用light,這樣他就會(huì)生成一個(gè)圖標(biāo),以最快速度去構(gòu)建。而webapp則會(huì)生成一堆圖標(biāo)。
言歸正傳,我們剛寫的代碼,執(zhí)行打包先康康會(huì)發(fā)生什么變化吧:
圖片目錄下已經(jīng)生成了格式各樣的圖標(biāo)。
index.html里也自動(dòng)給引用了這些圖片。
我們?cè)龠\(yùn)行一下,康康網(wǎng)站圖標(biāo)是否有啥變化吧。
還記得剛才是做了三種格式的圖片嗎,剛都測(cè)了一下,都可以很好的展示出來。
但是,你可能會(huì)想,我用不了這么多圖標(biāo)啊,我就想生成網(wǎng)站的favicon.ico,這可如何是好?
別急,剛才說了這個(gè)插件就是對(duì)favicons的借用,那么favicons有的這里也可以有。
上面是favicons一部分源碼,這部分說了能生成什么圖標(biāo)的開關(guān),接下來,我們就在剛才的基礎(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)種類開關(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)兼容問題。
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的插件還有很多但是基本配置和操作都大差不差。插件工具就是這樣,好與壞就看你怎么用了,至少我們?nèi)绻罱?xiàng)目時(shí)用了它,可以自動(dòng)生成一系列的圖標(biāo),省去一些苦惱,圖一個(gè)方便省心罷了。
以上是“webpack怎么自動(dòng)生成網(wǎng)站圖標(biāo)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。