create-react-app 按需加载antd出错问题解决

按需加载antd的实现方式：
用create-react-app 创建项目后，如果需要第三方的插件库，需要配置wabpack配置文件，

1、首先运行npm run eject或yarn eject暴露出webpack的配置文件：

项目会多出config和scripts文件夹

2、安装完antd和babel-plugin-import后，修改根目录下的package.json babel处

（
安装antd：yarn add antd
安装babel-plugin-import：npm install babel-plugin-import --save-dev
）
安装后打开根目录的package.json文件在babel的presets后面添加：
"plugins":[["import", {"libraryName": "antd", "style": "css"}]]

npm run install 后再启动项目 npm run start
看到组件中按需引入Input后页面上样式也没什么问题。控制台也没有报错。

这样就简单的通过修改package.json文件实现了antd的按需加载。

实现方式二：
同时修改webpack的配置文件config目录下的webpack.config.dev.js和/webpack.config.prod.js。
找到babel-loader，webpack.config.dev.js在223行，webpack.config.prod.js在307行。
在plugins处增加一项
["import", {"libraryName": "antd","libraryDirectory": "es","style": "css" }]

重启项目后发现也能正常使用。

参考：https://www.cnblogs.com/heihei-haha/p/9041093.html 感谢作者;-)

官方推荐使用react-app-rewired来实现antd的按需加载

详见：https://ant.design/docs/react/use-with-create-react-app-cn#高级配置

---

antd-mobile的按需加载

（2018-12-11 增加）
安装完antd和babel-plugin-import后，在package.json文件中找到babel节点：
添加：

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

则在组件中只需引入需要的antd-mobile的组件即可。

效果：

2018-11-1 16:13补充：
babel-plugin-import插件配置中：
使用 { “libraryName”: “antd” } 只会引入对应的js文件，无样式文件
使用 { “libraryName”: “antd” , “style” : “css” } 引入对用组件的js文件和编译之后的css文件
使用{ “libraryName”: “antd”, “style” : true } 会引入组件的js文件和less文件

antd自定义主题：

在webpack.config.dev.js中，引入less-loader的地方，options中添加代码如下

              {
                loader: require.resolve('less-loader'),
                options:{
                  javascriptEnabled: true,
                  modifyVars:{
                    'primary-color': 'red',
                  }
                },

详见：https://www.npmjs.com/package/babel-plugin-import