create-react-app项目中引入antd

create-react-app方式下引入antd

由于create-react-app构建React App的方式推荐zero-configuration（零配置），所以只能通过 npm run eject的方式来讲所有的配置项暴露出来。要注意的eject操作是不可逆转的。

进入 项目根目录 安装antd npm install antd --save

安装完 antd, 默认所有的组件都会被引入，那项目将会变得很庞大，antd提供了按需加载的方式

步骤

1. 安装babel-plugin-import
   npm install babel-plugin-import --save-dev
2. 暴露配置项
   npm run eject
3. 配置按需加载
   • 暴露配置项之后，会生成一个config的文件夹，首先我们先配置dev模式。prod模式与dev模式的配置相同。
   • 打开webpack.config.dev.js文件
     

• ** 即添加以下代码 **

   plugins: ['transform-runtime', ['import', {
      libraryName: 'antd',
      style: 'css'
    }]]

4. 运行项目npm start