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

样式文件里作修改。

最后，有不对的地方，望同窗们积极评论，反正我也不会理你，以上。