create-react-app中按需加载引入Ant Design

我选择使用react官方推荐的构建工具，create-react-app+webpack来快速搭建项目，蚂蚁金服的AntDesign这个ui框架能满80%的平时需求，强力主推。

下面我就是讲webpack下的按需加载（浏览器引入就略过了）的配置方法。分为两种babel-plugin-import（推荐）和手动引入

我的版本信息

"webpack": "3.8.1",
"react": "^16.3.2",

下载包

npm install antd -S

yarn add antd

按需加载

    babel-plugin-import（推荐）

        下载包     

          

npm install babel-plugin-import -D

          webpack 配置

            在webpack.config.dev.js中添加下面的代码

        

// Process JS with Babel.
  {
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader: require.resolve('babel-loader'),
                        options: {
                            "plugins": [
                                ["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css"}] // `style: true` 会加载 less 文件
                            ],
                            // This is a feature of `babel-loader` for webpack (not Babel itself).
                            // It enables caching results in ./node_modules/.cache/babel-loader/
                            // directory for faster rebuilds.
                            cacheDirectory: true,
                        },
   },

            然后只需从antd引入模块即可，无需单独引入样式，等同于下面手动引入的方式

    //babel-plugin-import会帮助你加载JS和CSS
    import {DatePicker} from 'antd'

    手动引入
        

import DataPicker from 'antd/lib/date-pcker';//加载JS
import 'antd/lib/date-picker/style/css';//加载CSS
//import 'antd/lib/data-picker/style';//加载less