webpack熱更新問題和antd design字型表徵圖庫擴充

標籤：blank   官方   分離   開啟   美的   rac   text   images   theme   

附一張上周末參加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字型表徵圖庫擴充