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


附一張上周末參加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

樣式文件里做修改。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM