安装和初始化

1. 首先安装 create-react-app 工具以及yarn：
   $ npm install -g create-react-app yarn
2. 然后新建一个项目：
   $ create-react-app react_with_antd
   工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry（cnpm）。
3. 进入项目并启动。

$ cd react_with_antd
$ yarn start    

安装antd package

从 yarn 或 npm 安装并引入 antd。
$ yarn add antd

使用 babel-plugin-import 配置按需加载

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件，我们需要安装它并修改webpack.config.dev.js文件。

1. 安装：
   $ yarn add babel-plugin-import --save-dev
2. 暴露出配置：
   yarn run eject
3. 修改webpack.config.dev.js：
   
   image.png
   
   ::注意：由于 create-react-app eject 之后的配置中没有 .babelrc 文件，所以需要把配置放到 webpack.config.js 或 package.json 的 babel 属性中。::

高级配置

添加less配置

1. 安装less-loader和less
   $ npm install less-loader less --save-dev
2. 修改webpack配置
   修改webpack.config.dev.js配置文件：
   • test: /\.css$/ 改为 /\.(css|less)$/
   • test: /\.css$/ 的 use 数组配置增加 less-loader
     
     image.png

增加CSS Modules支持

1. CSS Modules 配置
   修改webpack.config.dev.js配置文件：
   • cssloader中添加配置项{modules: true}即可：
     
     image.png
2. 解决css-modules与其他全局css冲突（antd不能与css-modules混用）
   由于antd 和 Css Modules 不能混用，也可能与其他样式包不能混用，所以要针对/node_modules单独配置一条loader规则，同样是修改配置webpack.config.dev.js文件，在原有的cssloader规则下面再增加一个cssloader规则：
   
   image.png
   
   ::注意：两个不同规则的include与exclude一定要都写上。::

增加Javascript Decorators支持

1. 首先安装babel对应的插件
   $ npm install babel-plugin-transform-decorators-legacy --save-dev
2. 修改webpack.config.dev.js配置文件：
   • babel-loader plugins中加入”transform-decorators-legacy”
     
     image.png

::注意：文档中提到的所有需要修改webpack.config.dev.js的地方都需要同时修改webpack.config.prod.js::