附一張上周末參加jsconf的照片。。。。。

標題也不知道怎麽寫好，真是尷尬。不過話說回來，距離上一次寫文快兩個月了，最近有點忙，一直在開發新項目，

今天剛剛閑下來，項目準備提測。借這個功夫寫點東西，把新項目上學到的一些好的幹活分享一下，以便之後開發的

時候能爛熟於心。

本次分享兩個幹貨，正文從這裏開始：

1、很多同學在開發項目前端項目的時候會遇到一個比較影響開發體驗的事情，就是在更新樣式文件的時候，頁面不會熱更新。當然前提是在webpack配置項裏用了

‘extract-text-webpack-plugin’這個分離css樣式的插件。當我開啟webpack的HotModuleReplacementPlugin 這個熱更新插件的時候，修改js或jsx文件的時候，項目會熱更新，但加了‘extract-text-webpack-plugin’這個插件的時候就不行了。請教了一個同事，他給出的答案是在寫loader的時候加一個‘css-hot-loader’如下圖

插件地址在這。

2、前面是開胃小菜，提高開發體驗。那麽接下來要分享的，估計很多前端同學經常會碰到的問題。字體圖標問題。

很多人都知道阿裏媽媽有個icon字體庫叫iconfont，早些年我就知道了這個牛逼的玩意兒，但是一直沒有能正確的使用它，

這次新項目真正的比較完美的用上了這個庫。樓主廢話真的是多。。。。

之前很多同學都會像這樣使用圖標字體：

即創建一個fonts文件夾，拿來放圖表字體。然後在iconfont裏面各種找好看的圖標，然後更新進去。然後webpack裏的配置就是這樣

巴拉巴拉的寫loader。。。。我覺得是有點煩的。

正確的打開方式是這樣的：

首先進入iconfont首頁

會有一個圖標管理的選項，下拉菜單裏有一個我的項目，進入我的項目。

新建一個自己的字體庫項目，然後在iconfont的首頁搜索自己喜歡的圖標然後加入項目。如下圖所示

加入購物車之後，添加至之前新建的項目裏，然後你的項目就會是下面這個樣子：

註意這裏的紅色箭頭，後面會有用到的。

接下來就是把你這個新建的圖標項目用到你的開發項目裏去，來，我們看代碼，（前提是你已經成功配置了antd這個阿裏開源的組件庫）

解釋一下，首先在你的項目src（看個人項目結構而定）目錄下新建一個static文件夾用來放置antd的主題配置文件，在theme.js裏寫好這樣的配置項

標了紅色箭頭的是之前iconfont我的項目裏的cdn路徑，裏面有你在iconfont裏找的圖標，可以在瀏覽器打開看看源碼。

這樣配置了之後，怎麽拓展antd的Icon呢？？？答案在webpack的配置項裏，代碼如下：

首先獲取這個theme配置項，然後通過less-loader這個插件來實現配置

antd的官方網站也有說明

當然antd的官方網站說的是修改主題，但是我們通過這種形式把字體庫的樣式也順帶加進去。

然後我們要怎麽用呢？？？代碼如下

首先在static文件夾下創建一個iocn.less文件，為你之前在iconfont裏找的各種圖標命名，前面統一加anticon，後面的自取。content在我的項目裏相應的圖標上有，可以自行查找，這裏不再贅述。

然後在你的全局樣式文件裏引入icon.less這個文件,並且在根目錄倒入這個全局樣式文件。

接下來在相應的文件中就可以引用你拓展出來的icon圖標，舉個例子

大家會註意到，antd的Button組件的默認顏色和boder-radius都變了，這是因為在之前的theme.js配置項裏，

我把主題字段primary的顏色改成了‘#5877fa’，所以大家在開發的時候想改變主題色或者是antd的其他樣式，可以統一在這裏修改，或者是在根結點頁面引入的css

樣式文件裏做修改。

最後，有不對的地方，望同學們積極評論，反正我也不會理你，以上。

webpack熱更新問題和antd design字體圖標庫擴展