安裝和初始化

1. 首先安裝 create-react-app 工具以及yarn：
   $ npm install -g create-react-app yarn
2. 然后新建一個項目：
   $ create-react-app react_with_antd
   工具會自動初始化一個腳手架并安裝 React 項目的各種必要依賴，如果在過程中出現(xiàn)網(wǎng)絡(luò)問題，請嘗試配置代理或使用其他 npm registry（cnpm）。
3. 進(jìn)入項目并啟動。

$ 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 數(shù)組配置增加 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單獨(dú)配置一條loader規(guī)則，同樣是修改配置webpack.config.dev.js文件，在原有的cssloader規(guī)則下面再增加一個cssloader規(guī)則：
   
   image.png
   
   ::注意：兩個不同規(guī)則的include與exclude一定要都寫上。::

增加Javascript Decorators支持

1. 首先安裝babel對應(yīng)的插件
   $ 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::