自定義配置Webpack和Babel配置

在使用ant-design-vue的包時樣式是能夠生效的可是若是我須要用到less文件時會報一個異常javascript

固然這個異常其實很清晰的說明了什麼問題看錯誤信息裏面有issues地址,看來問題不止咱們碰見了能夠找到地址訪問看看別人怎麼說的我已經找出來了vue

https://github.com/ant-design/ant-motion/issues/44java

根據上面連接反應出要解決此問題有兩種方案webpack

一、下降less版本到3.0如下(此辦法不友好,不建議使用)git

二、開啓javascript,配置lessl-oadergithub

接下來咱們要使用webpack文件來配置下,新建vue.config.js相關說明能夠參考官網地址以下web

https://cli.vuejs.org/zh/config/npm

從新啓動下npm run serve  就已經解決了less配置問題瀏覽器

此時咱們看下NetWork裏面加載的文件,發現咱們加載的庫被全局加載進來了總共有12.8M的包,這樣確定是不行確定會想方法優化下,能不能按需加載babel

呢。

此時找到了babel官方網站的確有配置參數能夠解決  https://vue.ant.design/docs/vue/introduce-cn/

 

按照官網配置下配置完發現控制檯和瀏覽器還有個報錯

此時直接安裝一下babel依賴就行了 

npm i --save-dev babel-plugin-import

完成就從新運行下此時app.js就只有3.9M了,此時就解決了按需加載的問題

相關文章
相關標籤/搜索