react配置antd按需加载的使用

 更新时间:2019年02月11日 09:27:20   作者:well2049  
这篇文章主要介绍了react配置antd按需加载的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

我目前使用的antd版本是2.13。现在最新的是3.0.1。

脚手架工具就是create-react-app。创建完成项目后,需添加配置,执行yarn eject 也就是打开配置的文档。

然后安装第三方依赖yarn add babel-plugin-import --save-dev

找到config文件夹。里面有2个配置文档,

webpack.config.dev.js和webpack.config.prod.js

添加配置时一定要保持文档的一致性。我就是犯了错误,值配置了开发的没有配置正式文档导致错误。

首先打开webpack.config.dev.js

在147行添加这段代码

plugins: [
            ['import', [{ libraryName: "antd", style: 'css' }]],
          ],

 

同样的配置在webpack.config.prod.js里面也需要添加。

这样就真正实现了按需加载,就不会再报黄色的警告。

还有第二种简单的方式,就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖:yarn add babel-plugin-import --save-dev

"babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   [
    "import",
    {
     "libraryName": "antd",
     "style": "css"
    }
   ]
  ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React中上传图片到七牛的示例代码

    React中上传图片到七牛的示例代码

    本篇文章主要介绍了React中上传图片到七牛的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • ReactNative-JS 调用原生方法实例代码

    ReactNative-JS 调用原生方法实例代码

    这篇文章主要介绍了ReactNative-JS 调用原生方法实例代码的相关资料,需要的朋友可以参考下
    2016-10-10
  • 详解在React项目中安装并使用Less(用法总结)

    详解在React项目中安装并使用Less(用法总结)

    这篇文章主要介绍了详解在React项目中安装并使用Less(用法总结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • React 实现车牌键盘的示例代码

    React 实现车牌键盘的示例代码

    这篇文章主要介绍了React 实现车牌键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 详解如何优雅地在React项目中使用Redux

    详解如何优雅地在React项目中使用Redux

    这篇文章主要介绍了详解如何优雅地在React项目中使用Redux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

    在Ant Design Pro登录功能中集成图形验证码组件的方法步骤

    这篇文章主要介绍了在Ant Design Pro登录功能中集成图形验证码组件的方法步骤,这里的登录功能其实就是一个表单提交,实现起来也很简单,具体实例代码跟随小编一起看看吧
    2021-05-05
  • 基于React实现表单数据的添加和删除详解

    基于React实现表单数据的添加和删除详解

    这篇文章主要给大家介绍了基于React实现表单数据的添加和删除的方法,文中给出了详细的示例供大家参考,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • react实现pure render时bind(this)隐患需注意!

    react实现pure render时bind(this)隐患需注意!

    这篇文章主要为大家详细介绍了值得你在react实现pure render的时候,需要注意的bind(this)隐患,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 如何深入理解React的ref 属性

    如何深入理解React的ref 属性

    关于 Refs ,React 官网讲解的对于新手来说不太友好,还是自己一字一句解读后并以代码验证的方式后真正理解的.
    2021-05-05
  • React组件refs的使用详解

    React组件refs的使用详解

    这篇文章主要介绍了React组件refs的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论