安装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. LoadRunner【第二篇】原理及使用流程

    loadrunner工作原理 性能测试只关注底层数据,不关注业务,不关注客户端动作.所以,脚本运行正确不一定业务就正确(业务是否正确,如果是查询,我们可以通过检查点来判断:如果是增删改操作,可以看通过 ...

  2. BSGS及扩展BSGS算法及例题

    \(BSGS(baby-step-giant-step)\)算法是用来解高次同余方程的最小非负整数解的算法,即形如这个的方程: \(a^x\equiv b(mod\ p)\) 其中\(p\)为质数(其 ...

  3. Tensor是神马?为什么还会Flow?

    https://baijiahao.baidu.com/s?id=1568147583188426&wfr=spider&for=pc 也许你已经下载了TensorFlow,而且准备开 ...

  4. 教你如何写出高效整洁的 css 代码——css优化(转载)

    css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...

  5. python6-深浅拷贝 元组类型 字典类型 集合类型

    一,深浅拷贝 (一) 值拷贝:应用场景最多 案例:1.ls = [1, 'abc', [10]]    ls1 = ls     # :ls1直接将ls中存放的地址拿过来#  :    ls内部的值发 ...

  6. Harbo1.5.2离线搭建

    环境说明 操作系统版本:Centos7.5 docker版本:docker-ce 17.03.2 harbor版本:v1.5.2 docker-compose:  1.22.0 基础环境搭建 系统优化 ...

  7. 【Sql Server】SQL SERVER 递归查询

    SQL SERVER 2005之前的版本只能用函数方法实现,SQL SERVER 2005之后新增了CTE功能,可以利用CTE实现递归查询: CTE:公用表达式Common Table Express ...

  8. sqlalchemy查询结果类型简析

    Sqlalchemy的查询方式有很多种,例如可以查询全部,可以查询符合条件的,可以查询指定字段的.那么这么多种查询,返回的结果是不是一样的呢?作本文记录分析结果. Sql_forengin.py #c ...

  9. 第六节:深入研究Task实例方法ContinueWith的参数TaskContinuationOptions

    一. 整体说明 揭秘: 该章节的性质和上一个章节类似,也是一个扩展的章节,主要来研究Task类下的实例方法ContinueWith中的参数TaskContinuationOptions. 通过F12查 ...

  10. CSS iconfont阿里巴巴矢量图库在开发中实战使用

    前言 项目开发中,是避免不了使用小图标的,那么国内比较好用的图标网站当属iconfont了,下面我们将详细介绍如何使用. iconfont选择所需图标 1.iconfont官网 2.把所需要的添加进入 ...