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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php调用C代码的实现方法
2014/03/11 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
mailto的使用技巧分享
2012/12/21 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python和php哪个容易学
2020/06/19 Python
Python 如何对文件目录操作
2020/07/10 Python
python实现猜拳游戏项目
2020/11/30 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
python神经网络编程之手写数字识别
2021/05/08 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android