安装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. C++ Under the Hood

    The original article is taken from http://msdn.microsoft.com/archive/en-us/dnarvc/html/jangrayhood.a ...

  2. python学习day8 文件操作(深度学习)

    文件操作 (day7内容扩展) 1 文件基本操作 obj = open('路径',mode='模式',encoding='编码')obj.write()obj.read()obj.close() 2 ...

  3. JS学习笔记Day16

    一.匀速运动 保证速度不让用户提供,将速度写到函数中 speed = target-obj.offsetLeft>0 ? 正速度 :负速度 二.缓冲运动 var speed=(target-ob ...

  4. utf8mb4的大小写敏感性测试及其修改方法

    utf8mb4的大小写敏感性测试及其修改方法 utf8mb4_ unicode_ ci 与 utf8mb4_ general_ ci 如何选择字符除了需要存储,还需要排序或比较大小,涉及到与编码字符集 ...

  5. linux使用mail发送外部smtp邮件

    linux使用mail发送外部smtp邮件 第一章 说明 参考资料: http://coolnull.com/2614.html linux自带的mail可以实现外部smtp发邮件.不需要本地配置po ...

  6. HTTP和RFC

    RFC: Request For Comments(RFC),是一系列以编号排定的文件.文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件.目前RFC文件是由Internet Socie ...

  7. dubbo本地服务化实现(dubbo三)

    一.dubbo服务化架构包含的内容 对于传统工程而言,分层的依据是按照包来区分.由于在相同的工程中,所以服务的提供和调用可以方便的实现. 但是对于分布式架构而言,服务的提供者负责服务具体的实现和接口规 ...

  8. 第十节:委托和事件(2)(泛型委托、Func和Action、事件及与委托的比较)

    一. 泛型委托 所谓的泛型委托,即自定义委托的参数可以用泛型约束,同时内置委托Func和Action本身就是泛型委托. 将上一个章节中的Calculator类中的方法用自定义泛型委托重新实现一下. p ...

  9. [数学笔记Mathematical Notes]2-一个带对数的积分不等式

    定理. $$\bex \int_0^1\frac{\ln^2x}{x^x}\rd x<2\int_0^1 \frac{\rd x}{x^x}. \eex$$ 证明: 由分部积分及 Fubini ...

  10. [再寄小读者之数学篇](2014-06-23 Hardy 空间、BMO空间与 Triebel-Lizorkin 空间)

    $$\bex 0<p<\infty\ra H_p=\dot F^0_{p,2};\quad BMO=\dot F^0_{\infty,2}. \eex$$ see [H. Triebel, ...