vue-cli3的配置训唱,全部放在了vue.config.js這一個文件中,講道理酗捌,真的清爽。
作為技術(shù)小菜鳥涌哲,還沒有手動從0到1配置過webpack胖缤,只是對webpack配置工程師。阀圾。略有耳聞哪廓。。
據(jù)說webpack4簡單了許多初烘,趕上了好時代涡真,小菜鳥總歸也想起飛分俯,之后透徹學(xué)習(xí)一下。
配置vue-cli3項目综膀,可以說是all in vue.config.js的澳迫。
當(dāng)然局齿,封裝剧劝、就一定會留個口給用戶,去對底層進(jìn)行自定義操作抓歼。
vue.config.js的配置項中讥此,有兩個口,configureWebpack和chainWebpack谣妻。
本文只簡單介紹萄喳,chainWebpack的使用方式。
廢話了這么多蹋半,重點hin少他巨,全在下面??
1.基本使用文檔,見官網(wǎng)
https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
2.實操
官網(wǎng)例子比較簡單减江,使用中染突,涉及到具體的更改,發(fā)現(xiàn)照葫蘆畫瓢辈灼,還是有點畫不出來份企。。
比如我想要修改loader選項巡莹,看到了官網(wǎng)的
于是抄下來司志,config.module.rule()
我應(yīng)該給rule里面,傳什么降宅?骂远?
重點來了
(1)控制臺:vue inspect > output.js 拿到解析好的 webpack 配置。
(2)打開output.js
(3)比如腰根,這里我是想要修改url-loader的行為激才,于是在output.js中搜索url-loader
好了,全文就這么兩個框是重點唠雕。這下知道給rule傳什么贸营,給use、loader傳什么了??
照著官網(wǎng)的葫蘆岩睁,畫完瓢钞脂,console一下tap里那個options,發(fā)現(xiàn)就是圖二里外層的那個options捕儒,隨心修改完冰啃,return回去邓夕,大功告成。
#后記:
小筆記阎毅,準(zhǔn)備發(fā)布焚刚,就注意了一下措辭和排版,哈哈扇调。
自己摸索配置過程中的困惑和發(fā)現(xiàn)矿咕,希望對你有幫助~
btw,不能忽視這低調(diào)的注釋啊??