了解antd提供的构建方式，以下将使用最基础的webpack方式进行打包。

作者：黄明
链接：https://www.zhihu.com/question/45088537/answer/98388635
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

没有去了解antd提供的构建方式，以下将使用最基础的webpack方式进行打包。

关于第一个问题：如何使用webpack进行构建操作

1.准备:
npm安装以下组件

a.安装react/antd:

npm install react react-dom antd --save

b.安装webpack/less:

npm install webpack less --save-dev

webpack根据需要选择使用-g安装

c.安装babel-loader以及其他相关package:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

d.选择安装style-loader/css-loader

npm install style-loader css-loader --save-dev

2. 配置webpack.config.js
具体配置可以查看webpack提供的例子，主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader

3. 编写我们的文件(例如: demo-antd.jsx)
<img src="https://i-blog.csdnimg.cn/blog_migrate/607b6157b646b05f98ce05ef769190bf.jpeg" data-rawwidth="1148" data-rawheight="552" class="origin_image zh-lightbox-thumb" width="1148" data-original="https://pic2.zhimg.com/828231444dd7b2842b5fd77e45ed568d_r.jpg"> 只使用了antd提供的Button组件。
ps: 对比

import { Button } from 'antd';

和

import Button from 'antd/lib/button';

后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。

4. 执行构建

webpack ./demo-antd.jsx demo-antd-bundle.js

将生成demo-antd-bundle.js文件

5. 在页面中引入bundle文件(demo-antd-bundle.js)

执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。

这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。

因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。

看一下antd的文件结构:

antd
├── CHANGELOG.md
├── LICENSE
├── README.md
├── lib // 包含所有React组件的文件夹
├── node_modules
├── package.json
└── style // 包含所有样式组件的文件夹

antd作为一个React组件库，将所有的React组件都放在lib/文件夹下，在问题一第3步中使用import引入即可。
antd对于样式的做法，是将样式从js文件中分离出来，单独放在style文件夹中，既然如此，我们只好查看style的文件结构

antd/style
├── README.md
├── components // 可能是我们所需要的组件样式文件夹
├── core
├── index.less // 可能是入口文件
├── mixins
└── themes

从名字上大致猜出，components文件夹可能是我们需要使用的，我们找到样式文件(button.less)并尝试使用less转换成css

lessc /path/to/antd/style/components/button.less /path/to/dest/demo-antd-style.css

(好吧，这里其实已经回到问题一了)

以上是问题一的大致思路吧。

以下是你使用上面方法构建会遇到的一些小坑，请看完
1. 发现lessc报错，错误大致上是：某些less变量在未定义的情况下被使用了。

a. 检查入口文件style/index.less，顺着入口文件稍微看下每个被import的less文件，最终找到了定义变量用的文件 style/themes/default/custom.less

b. 编写我们的less文件(demo-antd.less)

@import "/path/to/antd/style/themes/default/custom.less";
@import "/path/to/antd/components/button.less";

c. 使用less转换成css

lessc /path/to/demo-antd.less demo-antd-style.css

d.
在html中引入该css文件
或者
使用style-loader+css-loader，以webpack方式引入样式文件