yarn run eject
->~ yarn create react-app my-app
->~ cd my-app
->~ yarn run eject | npm run eject
image.png
運(yùn)行成功后eject后會(huì)暴露webpack的配置,package.json中也會(huì)列出所有相關(guān)依賴包，如：
- config目錄
- build.js / start.js / test.js
- package.json / yarn.lock 會(huì)更新
安裝antd 按需加載
->~ yarn add antd | npm install antd --save | cnpm install antd --save （--save 安裝到生產(chǎn)環(huán)境dependencies、--seve-dev 代表安裝到開發(fā)本地devDependencies）
->~ yarn add babel-plugin-import -D | --dev (yarn add) | npm install babel-plugin-import --save-dev babel-plugin-import
根目錄新建：.babelrc文件 添加：
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"],
["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"]
]
}
注意：如果是運(yùn)行了eject ，webpack配置了babelrc: false ,單獨(dú)根目錄新建.babelrc會(huì)報(bào)錯(cuò)的，需要在webpack.dev.js配置，在module模塊 ,loader: require.resolve('babel-loader')對(duì)象中的plugins數(shù)組中添加
[
"import",
{libraryName: "antd", style: 'css'} // 移動(dòng)端添加 "libraryName": "antd-mobile"
] //antd按需加載
完整的：
image.png
運(yùn)行查看效果：
->~ npm start
image.png
