webpack 处理字体_如何在webpack中更优雅的处理字体图标
作者：牟金濤
字體圖標(biāo)是目前前端中最常見的一種靜態(tài)資源，目前大部分的框架或者網(wǎng)站都會將一些簡單的圖標(biāo)合并生成一個字體文件而不是合并成雪碧圖。其優(yōu)點顯而易見，字體圖標(biāo)能夠更加方便的控制圖標(biāo)的大小和顏色，這樣圖標(biāo)大小和顏色的改變不需要重新提供視覺圖。
目前來說其實生成字體圖標(biāo)的方式很多，這里舉幾個栗子，比如gulp項目中我們可以借用fontcustom來實現(xiàn)字體的打包，或者是借用 ttf2eot, ttf2woff, ttf2woff等node包去生成字體文件，當(dāng)然還有更low一點的方式你可以在每一次上線前將你的svg上傳到http://www.iconfont.cn/上打成字體包覆蓋回你的項目(額，這個方式真不推薦因為會帶來各種合并代碼和圖標(biāo)管理的問題)。
而 對于webpack項目 實際上目前npm上也有一些node包提供webpack上打包字體功能的plugin和loader，但是就以我們目前搜集到的幾個webpack上的字體處理插件都沒有達到我們的使用要求，這些plugin或者是loader有些存在bug而有些則達不到我們希望能動態(tài)插入字體并且不需要開發(fā)者太多關(guān)注字體樣式的要求，簡單的說我們希望能有一款loader能傻瓜式操作，只要配完了config，然后在代碼中引入圖標(biāo)svg就能夠完成整個字體圖標(biāo)生成插入的功能，所以我們選擇自己開發(fā)一個webpack上的字體生成工具。恩, 好吧，實際上我就是來推銷我們的icon-font-loader的( ' – ' )。
所以我們還是看一下icon-font-loader是如何使用吧！
首先照例工程目錄下安裝一下
npm install icon-font-loader —save-dev
當(dāng)前的測試項目的目錄是這樣子的
然后配置一下你的 webpack.config.js，這里說明一下icon-font-loader實際上并不是單純的loader，他是類似于extract-text-webpack-plugin這種的，一個loader和plugin的集合，你需要配置loader并實例化一個IconFontPlugin。
const IconFontPlugin = require('icon-font-loader').Plugin;
module.exports = {
...
module: {
rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', 'icon-font-loader'] }],
},
plugins: [new IconFontPlugin()],
};
然后在你的css文件中引入你的svg圖標(biāo)
.icon-arrow-left:before {
icon-font:url('../../icons/arrow-left.svg');
color:red;
}
.icon-arrow-up:before {
icon-font:url('../../icons/arrow-up.svg');
color:blue;
}
然后跑一下webpack，打開index.html
然后，恩，沒有然后了，這樣就好了。使用我們的loader不需要在頁面中引入字體樣式，不需要為dom設(shè)置字體圖標(biāo)的class，只要在你需要的用icon-font: url(path)這個自定義的css屬性，剩下的loader獲處理好
首先我們會將css中錨定的自定義屬性替換成有效的字體樣式
.icon-arrow-left:before {
icon-font:url('../../icons/arrow-left.svg');
color:red;
}
.icon-arrow-up:before {
icon-font:url('../../icons/arrow-up.svg');
color:blue;
}
以上的樣式會被處理成這種最終樣式
.icon-arrow-left:before {
font-family:'icon-font';
font-style:normal;
font-weight:normal;
font-variant:normal;
text-decoration:inherit;
text-rendering:optimizeLegibility;
text-transform:none;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
content:'\F102';
color:red;
}
.icon-arrow-up:before {
font-family:'icon-font';
font-style:normal;
font-weight:normal;
font-variant:normal;
text-decoration:inherit;
text-rendering:optimizeLegibility;
text-transform:none;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
content:'\F101';
color:blue;
}
最終我們也會在你的document中插入字體的聲明與引用，無需手動插入。
@font-face?{
font-family:?"icon-font";
src:url("icon-font.ttf?b3b2d4639cb78f9c3301a31f65766de1")?format("truetype"),
url("icon-font.eot?b3b2d4639cb78f9c3301a31f65766de1#iefix")?format("embedded-opentype"),
url("icon-font.woff?b3b2d4639cb78f9c3301a31f65766de1")?format("woff"),
url("icon-font.svg?b3b2d4639cb78f9c3301a31f65766de1#icon-font")?format("svg");
}
這其實也是我們最終目的，一條龍的打包服務(wù)，更加靈活的圖標(biāo)的引入，你可以選擇在需要的樣式中插入一個圖標(biāo)，你也可以選擇將其封裝成一個個的圖標(biāo)樣式類，當(dāng)然如果你是vue或者是regular你也可以將圖標(biāo)封裝成組件，通過傳參來控制圖標(biāo)。
當(dāng)然我們也支持webpack的hot reload，實際上不用任何多余的配置，只要style-loader加載的樣式能夠hot reload我們就能夠?qū)崿F(xiàn)hot reload。PS: 這里有些小伙伴可能對webpack的樣式熱加載有點不熟悉，webpack的樣式熱加載是通過style-loader實現(xiàn)的，style-loader會通過hot reload監(jiān)聽樣式文件模塊，每一次hot realod plugin通過websocket拿到hash值發(fā)生變化的模塊中有css樣式模塊那么style-loader會重新更新document里的style標(biāo)簽，所以如果樣式熱加載沒生效的很大可能是并未使用style-loader插入樣式，比如使用EtractTextPlugin額外生成css文件再引入這樣樣式可能就不會實現(xiàn)熱加載
我們也提供一些參數(shù)供用戶實現(xiàn)自定義的配置
1.fontName
如果你不喜歡我們的命名，你可以通過這個屬性來實現(xiàn)自定義字體庫的名字
2.output
如果對最終生成文件的路徑有要求，這個屬性可以設(shè)置字體和CSS等文件對于webpack的output的相對路徑。必須是一個相對路徑。
3.localCSSTemplate
如果你覺得我們生成的css代碼太長或者不滿足你的要求，那么你可以通過這個參數(shù)傳入hbs模板的字符串來自定義替換的樣式，詳細可以參照src下的local.css.hbs
目前該loader還在不斷的優(yōu)化更新中，我們會及時處理掉使用過程中提出來的issue與pr，所以歡迎大家使用并提出建議。我們希望這個loader最終能夠被webpack官方收錄所以如果能star一下就更好了。
項目github地址：
npm地址：
本文來自網(wǎng)易實踐者社區(qū)，經(jīng)作者牟金濤授權(quán)發(fā)布
總結(jié)
以上是生活随笔為你收集整理的webpack 处理字体_如何在webpack中更优雅的处理字体图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VS2015使用技巧
- 下一篇： ros地图显示在android,ROS地