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

按需加载配置可参考：
http://www.cnblogs.com/reactjs/p/9877115.html 感谢作者;-)

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

阅读更多