使用react一段時(shí)間了，感覺(jué)自己已經(jīng)愛(ài)上了這種組件化開(kāi)發(fā)的模式，阿里也退出了相應(yīng)的UI框架Ant Design，使用起來(lái)也十分的方便。但是最近發(fā)現(xiàn)了一個(gè)十分嚴(yán)重的問(wèn)題，組件開(kāi)發(fā)完成進(jìn)行打包時(shí)發(fā)現(xiàn)打包出來(lái)的文件內(nèi)存達(dá)到了驚人的5m，這在瀏覽器上請(qǐng)求的速度可想而知會(huì)有多慢，打開(kāi)控制臺(tái)也會(huì)發(fā)現(xiàn)react的警告信息，以前沒(méi)在意，今天就讓我來(lái)看看如何解決。
警告信息中提示我們使用babel-plugin-import，點(diǎn)擊查看了介紹后發(fā)現(xiàn)這是在加載器中設(shè)置完成以后，在js中引用組件時(shí)僅引入相應(yīng)的js文件以及css樣式，大大的減少了打包文件的內(nèi)存大小，但是問(wèn)題來(lái)了，webpack的配置我只能照葫蘆畫(huà)瓢，介紹中只有幾句如何配置對(duì)于放在什么位置怎么放都沒(méi)說(shuō)，我蒙了......
光靠這兩張圖片我哪知道如何配置呢？花了一個(gè)小時(shí)在網(wǎng)上找相關(guān)的資料以及webpack的介紹都沒(méi)有找到解決辦法，沒(méi)辦法了只好自己慢慢摸索了。
看著別人的webpack配置文件，加上自己一次一次慢慢嘗試，我終于配置好了，雖然自己不是很懂原理（我也很無(wú)奈，找時(shí)間要好好學(xué)習(xí)一下了），配置如下
這只是我自己學(xué)習(xí)配置的，有錯(cuò)誤歡迎提出來(lái)！配置完打包的效果也十分明顯
這是沒(méi)有按需加載之前的文件大小
這是配置好以后打包的文件大小，效果真明顯！
這次記錄下來(lái)以后如果忘記了我也可以不用再努力的去找了，O(∩_∩)O哈哈~
