antd在HTML文件里引用,使用webpack配置antd，在webpack中引入antd并按需加载使用的组件...

固然你能够用create-react-app一把梭来配置antd，可是我更倾向于使用webpack来配置。javascript

首先使用npm安装antd：css

$ npm install antd --save

安装完成以后就能够引入相应的组件和组件样式html

示例

import { DatePicker } from 'antd';

ReactDOM.render(, mountNode);

引入样式：java

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

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

安装babel-plugin-import:webpack

npm install babel-plugin-import -D

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

{

"presets":[

"@babel/preset-env",

"@babel/preset-react"

],

"plugins":[[

"import",{

"libraryName":"antd",

"libraryDirectory":"es",

"style":"css"

}]

]

}

而后只需从 antd 引入模块便可，无需单独引入样式。等同于下面手动引入的方式。github // babel-plugin-import 会帮助你加载 JS 和 CSS

import { DatePicker } from 'antd';

手动引入web 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

解决：安装插件：

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官网