使用webpack配置antd，在webpack中引入antd并按需加载使用的组件

当然你可以用create-react-app一把梭来配置antd，但是我更倾向于使用webpack来配置。

首先使用npm安装antd：

$ npm install antd --save

安装完成之后就可以引入相应的组件和组件样式

示例

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

引入样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

但是这种我们会把整个antd的样式文件引入，这不是我们所需要的，我们还可以来配置按需加载样式文件，并且仅仅引入用到的组件的样式，并且不用特地去import css文件，当引入组件的时候自动引入样式：使用 babel-plugin-import。

安装babel-plugin-import:

npm install babel-plugin-import -D

配置.babelrc文件中的plugins加上之前的preset-env：

{
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins":[[
        "import",{
            "libraryName":"antd",
            "libraryDirectory":"es",
            "style":"css"
        }]
    ]
}

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

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

• 手动引入

  import DatePicker from 'antd/es/date-picker'; // 加载 JS
  import 'antd/es/date-picker/style/css'; // 加载 CSS
  // import 'antd/es/date-picker/style';         // 加载 LESS

另外当你配置完成之后你的组件可能是用类来写的，这时候打包可能会报一个错误：syntax 'classProperties' isn't currently enabled的错误，当使用了一些JavaScript的一些新特性的时候，但是有没有在webpack.config.js里面或者是.babelrc文件中配置相关插件的时候出现。

解决：安装插件：

npm i -D @babel/plugin-proposal-class-properties

配置插件：

{
    "presets":[
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins":[[
        "import",{
            "libraryName":"antd",
            "libraryDirectory":"es",
            "style":"css"
        }],
        ["@babel/plugin-proposal-class-properties"]
    ]
}

当然你也可以使用react中的hooks来写这些组件就没问题了

更多方式请参考antd官网：antd官网