create-react-app 使用 antd,按需加载

2018-12-04

create-react-app 使用 antd,按需加载

前言

使用 create-react-app 创建的 react 项目,结合使用 antd 时,官网文档介绍了按需加载需要使用 babel-plugin-import 来配合,如果你的项目还没有执行 npm run eject,则使用官网推荐的配置即可,由于我已经 eject 过,记录下我的配置。

过程

1、安装 yarn add babel-plugin-import 或者 npm -s install babel-plugin-import
2、给 webpack 的 babel-loader plugins 加上 babel-plugin-import

需要修改两个文件 /config/webpack.config.prod.js/config/webpack.config.dev.js (修改的内容一样),找到加载 babel-loader 的地方,往他的 plugins 加入如下代码

1
2
3
4
5
6
7
[
require.resolve('babel-plugin-import'),// 导入 import 插件
{
libraryName: 'antd', //暴露antd
style: 'css'
}
]

最后形成的配置如下(create-react-app 版本不同最后的配置可能不一样,原理一样):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Process application JS with Babel.
// The preset includes JSX, Flow, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),

plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
[
require.resolve('babel-plugin-import'),// 导入 import 插件
{
libraryName: 'antd', //暴露antd
style: 'css'
}
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
},
}