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

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

1、antd样式按需加载

用到babel-plugin-import bebel插件
直接在package.json里面添加配置就可以按需加载了：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }
  
现在使用antd组件就不用引用样式了
(官网上是推荐使用react-app-rewired(customize-cra)模块，
自己建一个config-overrides.js对包里的webpack配置进行覆盖,感觉多了一个配置不怎么好。）


2、antd设置按需加载样式后和css模块化的冲突问题

其实webpack.config.js里默认已经写好了配置,即匹配cssModuleRegex的loader设置，
只需要将我们需要模块化的样式文件后缀进行修改

文件后缀修改成xxx.module.css即可。


最终项目里引用样式：

入口文件引用全局公共自定义样式=>import './css/common.css'; 
// common.css文件
.ml20{margin-left: 20px}

// jsx文件里使用
<span className=“ml20”>1</span>

页面或者组件中引用模块化私有样式=>import style from './xxx.module.css'

// xxx.module.css文件
.red{color: red;}

// jsx里使用
<span className=“ml20”>1</span>
<span className={style.red}>2</span>