react配置antd按需加载的使用


Posted in Javascript onFebruary 11, 2019

我目前使用的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' }]],
          ],

react配置antd按需加载的使用 

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

react配置antd按需加载的使用

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

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

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

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

Javascript 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
react中使用css的7中方式(最全总结)
Feb 11 #Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 #Javascript
vue自定义指令实现方法详解
Feb 11 #Javascript
Vue表情输入组件 微信face表情组件
Feb 11 #Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 #Javascript
Vue动画事件详解及过渡动画实例
Feb 09 #Javascript
JavaScript ES6常用基础知识总结
Feb 09 #Javascript
You might like
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
Python中的闭包总结
2014/09/18 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
汽车促销活动方案
2014/03/31 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
借条格式范本
2015/05/25 职场文书