安装babel-plugin-import插件。下面方法二选一,都可以实现antd的按需加载

一、配置webpack.config.js文件

{
    test: /.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    use: [{
        loader: 'babel-loader'
    }],
    options: {
        "plugins": [
            [
                "import", {
                    "libraryName": "antd",
                    "style": true
                }
            ]
        ]
    }
}

二、配置babelrc文件

{
  "presets": ["env", "react"],
  "plugins": [
    "transform-runtime",
    "transform-object-rest-spread",
    [
      "import", {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

webpack配置antd的按需加载的更多相关文章

  1. 在webpack自定义配置antd的按需加载和修改主题色

    最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...

  2. react antd样式按需加载配置以及与css modules模块化的冲突问题

    通过create-react-app脚手架生成一个项目 然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来, 方便自己手工增减,暴露出来的配置文件在 ...

  3. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  4. webpack 代码拆分,按需加载

    转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campai ...

  5. antd中按需加载使用react-app-rewired报错

    [描述] 按照antd官网步骤 https://ant.design/docs/react/use-with-create-react-app-cn 最后yarn start会报错 [解决方法] 原因 ...

  6. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  7. ant-design如果按需加载组件

    Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm in ...

  8. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

  9. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

随机推荐

  1. 转:Mac操作技巧 | "键盘侠"必备快捷键

    看到一篇网友整理的比较好的“Mac操作技巧 | "键盘侠"必备快捷键”,转载过来分享给大家!希望能有帮助. 更多专题,可关注小编[磨人的小妖精],查看我的文章,也可上[风云社区 S ...

  2. 存在多个 AJAX 任务

    实现的效果: 这两个Ajax任务可同时实现,也可单独实现. 标准的函数: var xmlhttp; function loadXMLDoc(url,ufunc){ if(window.XMLHttpR ...

  3. goroutine 和 线程的区别

    我们在使用Go语言进行开发时,一般会使用goroutine来处理并发任务.那么大家有没有考虑过goroutine的实现机制是什么样的?很多同学会把goroutine与线程等同起来,但是实际上并不是这样 ...

  4. Kubernetes之StatefulSet

    什么是StatefulSet StatefulSet 是Kubernetes中的一种控制器,他解决的什么问题呢?我们知道Deployment是对应用做了一个简化设置,Deployment认为一个应用的 ...

  5. Fiddler--Composer

    Composer选项卡支持手动构建和发请求:也可以在Session列表中拖拽Session放到Composer中,把该Session的请求复制到用户界面: 点击"execute"按 ...

  6. OpenStack VS Kubernetes,谁是你心中的王者?

      当下云计算的领域里热度最高的两个项目,无疑是OpenStack和Kubernetes.如果云计算是一个风起云涌的江湖,毫不夸张的说OpenStack和Kubernetes就是江湖里的泰山北斗.Op ...

  7. docker下安装mysql

    docker run -d -p 3306:3306 -v /root/docker/mysql/conf/mysql.cnf:/etc/mysql/conf.d/mysql.cnf -v /root ...

  8. 第九节:JWT简介和以JS+WebApi为例基于JWT的安全校验

    一. 简介 1. 背景 传统的基于Session的校验存在诸多问题,比如:Session过期.服务器开销过大.不能分布式部署.不适合前后端分离的项目. 传统的基于Token的校验需要存储Key-Val ...

  9. gitlab升级和迁移

    由于近期公司gitlab服务器老是卡顿和出现其他问题,然后也很久没有升级过了,现在版本还是8.10.5,而官网最新版本已经是11.2了.另一个原因是gitlab所在的这台服务器快到期了,想换一台配置更 ...

  10. ASP.NET Web API 2 之路由配置

    Ø  简介 ASP.NET Web API 路由配置也是必须掌握的技术点之一,要真正的完全掌握和理解它也是需要一定的过程的.不过,在平常的开发过程中,对它有基本的了解就足够了.因为我们主要关注点并不在 ...