react-app-rewired 更新2.0.1之后关于babel-import-plugin的变动 (antd按需加载问题）

契机

今天在用antd-mobile时，需要配置按需加载，那自然就用到了 babel-import-plugin
那么在用到这个插件的时候，自然就想到要用 react-app-rewired 来覆盖配置。
然后根据 antd-mobile 官方文档进行配置，发现报错，如下：

TypeError: injectBabelPlugin is not a function

当时就很懵逼，明明什么配置都没变过，只是之前用的是 antd ，现在用的是 antd-mobile 就发生了这个情况，作为刚入门前端的小白表示很不能理解，所以就一层一层点进了源码。
最终点进了这个目录 /react-app-rewired/scripts/utils/paths.js
惊奇的发现，如下：

module.exports = Object.assign({
  scriptVersion: modulePath,
  configOverrides: config_overrides,
  customScriptsIndex: (custom_scripts ? cs_index : -1)
}, paths);

他没有骗我，真的没有导出 injectBabelPlugin 这个 function，那么问题来了，到底是哪个环节出了问题。
好巧不巧，我突发奇想去npm 官网上搜了一下 react-app-rewired ，又一次惊奇的发现，他居然两天前悄悄地更新了。。。我网上搜了一圈关于 react-app-rewired 都没有搜到关于他更新这么一说。请看更新证据：

你就说气不气人吧。看他文档说是因为creat-react-app更新到2.0了所以才跟着更新的，好吧，我create-app-app也没更新到2.0。
因为我现在用的是create-react-app 1.x ，所以我现在暂时的解决办法是将 react-app-rewired 降级到1.x.x的版本
npm install --save react-app-rewired@^1.6.2
暂时性的解决办法是这样，目前正在摸索其他解决办法，如果广大猿友看到，还请多多支招，感激不尽！

----------------------------------2019.01.09 更新 分割线---------------------------------------------------
react-app-rewired 让我们在项目根目录建一个js文件 config-overrides.js ，用来覆盖webpack的配置。详细可以参见antd的教程配置。
这个文件是通过在方法里传入原始配置对象进行修改，然后再返回该对象，来达到修改配置的功能，所以我先把这个config打印了一下，想看看这个传进去的config的庐山真面目，如下

{ devtool: 'cheap-module-source-map',
  entry:
   [ '/Volumes/BOOTCAMP/comwebapp/f10app/node_modules/react-scripts/config/polyfills.js',
     '/Volumes/BOOTCAMP/comwebapp/f10app/node_modules/react-dev-utils/webpackHotDevClient.js',
     '/Volumes/BOOTCAMP/comwebapp/f10app/src/index.js' ],
  output:
   { pathinfo: true,
     filename: 'static/js/bundle.js',
     chunkFilename: 'static/js/[name].chunk.js',
     publicPath: '/',
     devtoolModuleFilenameTemplate: [Function: devtoolModuleFilenameTemplate] },
  resolve:
   { modules:
      [ 'node_modules',
        '/Volumes/BOOTCAMP/comwebapp/f10app/node_modules' ],
     extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ],
     alias:
      { 'babel-runtime':
         '/Volumes/BOOTCAMP/comwebapp/f10app/node_modules/babel-runtime',
        'react-native': 'react-native-web' },
     plugins: [ [ModuleScopePlugin] ] },

打印出这个玩意，发现其实就是 webpack.config.js，于是到 node_modules 里找这个文件，找到与打印内容对应的文件 webpack.config.prod.js ，在其配置中发现了可以解决问题的方法，看如下原配置文件代码片段：

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              compact: true,
            },

我看到了 babelrc: false 这个我熟悉的东西，我想怪不得之前我在根目录里建的 .babelrc文件不起效，原来就是这个原因，于是我在 config-overrides.js中写下：

//config-overrides.js
module.exports = function override(config, env) {
  config.module.rules[1].oneOf[1].options.babelrc = true;
  return config;
};

然后在项目根目录创建文件 .babelrc ，如下配置：

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

然后就可以按需加载了。

import React, { Component } from 'react';
import { Button } from 'antd-mobile';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">EXAMPLE</Button>
      </div>
    );
  }
}

export default App;