安装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. linux下将普通用户加入到docker组,使它可以运行docker命令

    方法特别简单 gpasswd -a ${USER} docker eg: gpasswd -a jenkins docker 然后使用jenkins用户就可以执行docker命令了

  2. bzoj4514 数字配对

    思路 首先想到费用流. 对于每个点拆点.然后考虑我们怎样才能保证每个点只被用一次. 如果\(i\)与\(j\)满足条件.那么就从\(i\)向\(j\)连一条边并且从\(j\)向\(i\)连一条边.这样 ...

  3. java正则表达式取出匹配字符串

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class RegexMatches { public s ...

  4. host-only局域网络

    在网桥配置的情况下设置: 网桥配置链接 配置前: 配置后: vi /etc/sysconfig/network-scripts/ifcfg-eth0 这里是使用static静态配置,具体网络配置及声明 ...

  5. 老男孩Python全栈学习 S9 日常作业 004

    1.写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian", "barry&q ...

  6. 使用ArcMap做一个1:5000标准分幅图并编号

    实现这个project,十进制度.渔网工具.Excel if/Text函数.挂接Excel表.空间连接.投影这些知识是必须的.看懂本篇博文也就意味着大概掌握了以上知识. 坐标数据设置与编号标准依据&l ...

  7. unix域字节流回射程序

    一.服务端程序 #include <stdio.h> #include <errno.h> #include <stdlib.h> #include <uni ...

  8. AngularJS DI(依赖注入)实现推测

    AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中 ...

  9. PHP中ajax返回数据类型为JSON数据的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 第28月第24天 requestSerializer

    1. requestSerializer关于 requestSerializer它就是AFNetworking参数编码的序列化器,它一共有三种编码格式: AFHTTPRequestSerializer ...