react配置antd按需加載的使用

我目前使用的antd版本是2.13?，F在最新的是3.0.1。

腳手架工具就是create-react-app。創建完成項目后，需添加配置，執行yarn eject 也就是打開配置的文檔。

然后安裝第三方依賴yarn add babel-plugin-import --save-dev

找到config文件夾。里面有2個配置文檔，

webpack.config.dev.js和webpack.config.prod.js

添加配置時一定要保持文檔的一致性。我就是犯了錯誤，值配置了開發的沒有配置正式文檔導致錯誤。

首先打開webpack.config.dev.js

在147行添加這段代碼

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

同樣的配置在webpack.config.prod.js里面也需要添加。

這樣就真正實現了按需加載，就不會再報黃色的警告。

還有第二種簡單的方式，就是在package.json里面直接添加這行代碼。當然前提也是需要先安裝依賴：yarn add babel-plugin-import --save-dev

"babel": {
 "presets": [
 "react-app"
 ],
 "plugins": [
 [
 "import",
 {
 "libraryName": "antd",
 "style": "css"
 }
 ]
 ]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com