react-app-rewired 2.0+ 版本后，配置babel-plugin-import 按需加载无效

项目引入antd-mobile；按官方文档介绍安装了react-app-rewired 2.0+ ；并且下载了customize-cra和babel-plugin-import来配置按需加载；也在.babelrc文件中配置了plugins
然鹅（当然没有然鹅，就没有这篇文章啦），运行项目后，控制台还是提示这个：You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

后来发现是react-app-rewired的配置文件 babelrc: false；导致.babelrc文件无效。

我使用的方式是

1. react-app-rewired 2.0+  依旧还是最新版
2. customize-cra  依旧有他

3. babel-plugin-import  依旧还有他
4. babelrc 的配置

"plugins": [
      ["import", 
        { 
          "libraryName": "antd-mobile", 
          "style": "css"
        }
      ]
    ]

5. 当当当当 最重要的地方来了，在config-overrides.js文件（放根目录）
 

const { override, addBabelPlugins, useBabelRc } = require('customize-cra');

module.exports = override(
  addBabelPlugins(
    ['syntax-dynamic-import', { legacy: true }],
  ), useBabelRc(),
);

6. 然后运行~ok啦~  如果有报缺依赖，按提示install即可 ；  

 

如果发现别的方式，实测过我会放到这里；

后记：antd-mobile官网有demo  https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-app
他的config-overrides.js文件是按低版本的react-app-rewired 写的，所以 降低react-app-rewired版本的方案也是可行的。不过我觉得可以向前看，还是向前融入比较好