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中history(push,go,replace)切换路由方法的区别及说明

    react中history(push,go,replace)切换路由方法的区别及说明

    这篇文章主要介绍了react中history(push,go,replace)切换路由方法的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Suspense对React的意义及作用解析

    Suspense对React的意义及作用解析

    这篇文章主要为大家介绍了Suspense对React的意义及作用解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 关于react 父子组件的执行顺序

    关于react 父子组件的执行顺序

    这篇文章主要介绍了关于react 父子组件的执行顺序,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • React官方团队完善原生Hook闭包陷阱

    React官方团队完善原生Hook闭包陷阱

    这篇文章主要为大家介绍了React官方团队出手,补齐原生Hook短板闭包陷阱的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React项目中className运用及问题解决

    React项目中className运用及问题解决

    这篇文章主要为大家介绍了React项目中className运用及问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 详解React-Router中Url参数改变页面不刷新的解决办法

    详解React-Router中Url参数改变页面不刷新的解决办法

    这篇文章主要介绍了详解React-Router中Url参数改变页面不刷新的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React实现预览展示docx和Excel文件

    React实现预览展示docx和Excel文件

    这篇文章主要为大家详细介绍了如何使用React实现预览展示docx和Excel文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • react-native封装插件swiper的使用方法

    react-native封装插件swiper的使用方法

    这篇文章主要介绍了react-native封装插件swiper的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React组件重构之嵌套+继承及高阶组件详解

    React组件重构之嵌套+继承及高阶组件详解

    这篇文章主要给大家介绍了关于React组件重构之嵌套+继承及高阶组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • React中useEffect Hook常见问题及解决

    React中useEffect Hook常见问题及解决

    React的useEffect Hook它允许我们在函数组件中执行副作用操作,但在使用过程中可能会遇到一些常见的错误,本文就来介绍一下常见问题及解决,感兴趣的可以了解一下
    2023-10-10

最新评论