react配置antd按需加載的使用
更新時間：2019年02月11日 09:27:20 作者：well2049
這篇文章主要介紹了react配置antd按需加載的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
我目前使用的antd版本是2.13?，F(xiàn)在最新的是3.0.1。
腳手架工具就是create-react-app。創(chuàng)建完成項目后，需添加配置，執(zhí)行yarn eject 也就是打開配置的文檔。
然后安裝第三方依賴yarn add babel-plugin-import --save-dev
找到config文件夾。里面有2個配置文檔，
webpack.config.dev.js和webpack.config.prod.js
添加配置時一定要保持文檔的一致性。我就是犯了錯誤，值配置了開發(fā)的沒有配置正式文檔導(dǎo)致錯誤。
首先打開webpack.config.dev.js
在147行添加這段代碼
plugins: [
['import', [{ libraryName: "antd", style: 'css' }]],
],
同樣的配置在webpack.config.prod.js里面也需要添加。
這樣就真正實現(xiàn)了按需加載，就不會再報黃色的警告。
還有第二種簡單的方式，就是在package.json里面直接添加這行代碼。當然前提也是需要先安裝依賴：yarn add babel-plugin-import --save-dev
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解使用create-react-app快速構(gòu)建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用create-react-app快速構(gòu)建React開發(fā)環(huán)境,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細介紹了React中的Props類型校驗和默認值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
本篇文章主要介紹了淺談React 服務(wù)器端渲染的使用，React是最受歡迎的客戶端 JavaScript 框架，在本教程中，我們將逐步向您介紹服務(wù)器端的渲染示例2018-05-05
這篇文章主要介紹了React之echarts-for-react源碼解讀,echarts-for-react的源碼非常精簡，本文將針對主要邏輯分析介紹，需要的朋友可以參考下2022-10-10
評分插件在購物的應(yīng)用中經(jīng)?？梢钥吹玫?，但是用著別人的總是沒有自己寫的順手，本文就使用React實現(xiàn)星星評分組件，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學習使用react.js，感興趣的朋友可以了解下2021-04-04
React 數(shù)據(jù)獲取與性能優(yōu)化詳解
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取與性能優(yōu)化方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了React JSX基礎(chǔ)語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
react組件封裝input框的防抖處理的項目實現(xiàn)
本文主要介紹了react組件封裝input框的防抖處理的項目實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要為大家詳細介紹了React中常見的三種路由處理方式該如何選擇,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01