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