zoukankan      html  css  js  c++  java
  • react执行yarn eject后配置antd的按需加载

    第一步:

    用create-react-app创建完成项目后,执行yarn eject 。在config文件夹会显示配置文档

    第二步:

    添加插件yarn add babel-plugin-import --save-dev  yarn add antd --save-dev 

    第三步:在congif文件夹下webpack.config.dev.js第147行添加代码

     options: {
       +        plugins: [
       +             ['import', [{ libraryName: "antd", style: 'css' }]],
       +          ],
                  // This is a feature of `babel-loader` for webpack (not Babel itself).
                  // It enables caching results in ./node_modules/.cache/babel-loader/
                  // directory for faster rebuilds.
                  cacheDirectory: true,
                },
    

     第四步:在config文件下webpack.config.prod.js第154行添加

     options: {
     +        plugins: [
     +             ['import', [{ libraryName: "antd", style: 'css' }]],
     +         ],
                  compact: true,
                },
    

      第五步:在页面引入antd

    import { Button } from 'antd';
    

      按需加载完毕

  • 相关阅读:
    五、MapReduce 发布服务
    四、MapReduce 基础
    三、Hadoop 的 API
    二、HDFS 架构
    php身份证号的验证
    php性能优化
    PHP网站开发方案
    php一个不错的分页
    2013年最流行的php框架盘点
    程序员之路
  • 原文地址:https://www.cnblogs.com/bigDipper/p/9112700.html
Copyright © 2011-2022 走看看