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

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

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

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

時候能爛熟於心。

 

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

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

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

插件地址在這。

 

二、前面是開胃小菜，提升開發體驗。那麼接下來要分享的，估計不少前端同窗常常會碰到的問題。字體圖標問題。

不少人都知道阿里媽媽有個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

樣式文件裏作修改。

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