Webpack Hot update issues and Antd design font icon Library Extensions

Attach a photo of jsconf at the weekend ...

The title also did not know how to write well, really embarrassed. But then again, the distance from the last written text two months, recently a little busy, has been developing new projects,

The project is ready to be tested today just idle. Take this kung fu to write something and share some of the good work that the new project has learned so that later development

Time can be used to heart.

This time share two dry goods, the text starts here:

1, Many students in the development Project front-end project will encounter a more impact on the development experience, that is, when updating the style file, the page will not be hot update. Of course, the premise is to use the Webpack configuration item.

' Extract-text-webpack-plugin ' this plugin for separating CSS styles. When I open Webpack hotmodulereplacementplugin this hot update plug-in, modify JS or jsx file, the project will be hot update, but added ' Extract-text-webpack-plugin ' This plugin will not be the time. Consulted a colleague, he gave the answer is to write loader when adding a ' css-hot-loader ' as

The plugin address is here.

2, the front is an appetizer, improve the development experience. So the next thing to share, it is estimated that many front-end classmates often encounter problems. Font icon problem.

A lot of people know Ali mother has an icon font library called Iconfont, early years I knew this thing, but has not been able to use it correctly,

This new project is really a perfect use of this library. Landlord nonsense really is more ....

Many of our classmates used icon fonts like this:

That is, create a Fonts folder to put the chart font. Then in the iconfont inside the various look for good-looking icons, and then update in. And then the configuration in Webpack is like this.

Balabala's writing loader .... I think it's kind of annoying.

The correct way to open it is this:

First go to Iconfont home

There will be an icon management option, and a drop-down menu has one of my items to go into my project.

Create a new Font library item, then search your favorite icon on Iconfont's homepage and join the project. As shown

After adding to the cart, add to the previously created project, and your project will look like this:

Note the Red Arrows here, which will be useful later.

The next step is to use your new icon project in your development project, we look at the code, (if you have successfully configured ANTD this Ali Open Source component library)

Explain, first in your project SRC (look at the individual project structure) under the directory of a new static folder to place antd theme configuration file, in Theme.js write such configuration items

The red Arrow is the Iconfont in my project before the CDN path, inside you find in the Iconfont icon, you can open the browser to see the source.

After this configuration, how to expand the Antd icon??? The answer is in the Webpack configuration item, the code is as follows:

First get the theme configuration item and then configure it by Less-loader this plugin

Antd's official website also explains

Of course, Antd's official website is about modifying the theme, but in this way we add the style of the font library in passing.

Then how do we use it??? The code is as follows

First create a iocn.less file under the static folder, for the various icons you found in the Iconfont before naming, the front unified plus anticon, behind the pickup. The content is available on the corresponding icon in my project and can be found on your own, not here.

Then introduce the icon.less file in your global style file, and pour this global style file into the root directory.

Next, you can refer to the icon that you have expanded in the corresponding file, for example

You will notice that the default color and Boder-radius of the Antd button component are changed, because in the previous Theme.js configuration item,

I changed the color of the Subject field primary to ' #5877fa ', so you want to change the theme color or the other style of antd in the development, you can modify it here, or the CSS introduced in the root node page.

Changes in the style file.

Finally, there is the wrong place, look at the students positive comments, anyway, I will not talk to you, above.

Webpack Hot update issues and Antd design font icon Library Extensions