webpack 处理字体_如何在webpack中更优雅的处理字体图标
作者：牟金濤
字體圖標是目前前端中最常見的一種靜態(tài)資源，目前大部分的框架或者網(wǎng)站都會將一些簡單的圖標合并生成一個字體文件而不是合并成雪碧圖。其優(yōu)點顯而易見，字體圖標能夠更加方便的控制圖標的大小和顏色，這樣圖標大小和顏色的改變不需要重新提供視覺圖。
目前來說其實生成字體圖標的方式很多，這里舉幾個栗子，比如gulp項目中我們可以借用fontcustom來實現(xiàn)字體的打包，或者是借用 ttf2eot, ttf2woff, ttf2woff等node包去生成字體文件，當然還有更low一點的方式你可以在每一次上線前將你的svg上傳到http://www.iconfont.cn/上打成字體包覆蓋回你的項目(額，這個方式真不推薦因為會帶來各種合并代碼和圖標管理的問題)。
而 對于webpack項目 實際上目前npm上也有一些node包提供webpack上打包字體功能的plugin和loader，但是就以我們目前搜集到的幾個webpack上的字體處理插件都沒有達到我們的使用要求，這些plugin或者是loader有些存在bug而有些則達不到我們希望能動態(tài)插入字體并且不需要開發(fā)者太多關注字體樣式的要求，簡單的說我們希望能有一款loader能傻瓜式操作，只要配完了config，然后在代碼中引入圖標svg就能夠完成整個字體圖標生成插入的功能，所以我們選擇自己開發(fā)一個webpack上的字體生成工具。恩, 好吧，實際上我就是來推銷我們的icon-font-loader的( ' – ' )。
所以我們還是看一下icon-font-loader是如何使用吧！
首先照例工程目錄下安裝一下
npm install icon-font-loader —save-dev
當前的測試項目的目錄是這樣子的
然后配置一下你的 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圖標
.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設置字體圖標的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");
}
這其實也是我們最終目的，一條龍的打包服務，更加靈活的圖標的引入，你可以選擇在需要的樣式中插入一個圖標，你也可以選擇將其封裝成一個個的圖標樣式類，當然如果你是vue或者是regular你也可以將圖標封裝成組件，通過傳參來控制圖標。
當然我們也支持webpack的hot reload，實際上不用任何多余的配置，只要style-loader加載的樣式能夠hot reload我們就能夠實現(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標簽，所以如果樣式熱加載沒生效的很大可能是并未使用style-loader插入樣式，比如使用EtractTextPlugin額外生成css文件再引入這樣樣式可能就不會實現(xiàn)熱加載
我們也提供一些參數(shù)供用戶實現(xiàn)自定義的配置
1.fontName
如果你不喜歡我們的命名，你可以通過這個屬性來實現(xiàn)自定義字體庫的名字
2.output
如果對最終生成文件的路徑有要求，這個屬性可以設置字體和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)作者牟金濤授權發(fā)布
總結
以上是生活随笔為你收集整理的webpack 处理字体_如何在webpack中更优雅的处理字体图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VS2015使用技巧
- 下一篇： ros地图显示在android,ROS地