我有一種感覺傲醉，凡是涉及到webpack配置這一塊的東西都是比較晦澀難懂的坷牛，也不知道是因為我底子比較薄還是暫時沒有g(shù)et到那個點乌助。之前看到過一句話溜在，入了前端自動化的坑以后，點技能樹的時候會瞬間爆炸∷校現(xiàn)在真的是深有體會掖肋，es6以后的前端再也不是像以前一樣跟UI商量這里差幾像素那里放幾個圖標(biāo)這么簡單了。最近學(xué)習(xí)webpack看見一個非常好的webpack教程赏参，分享給大家志笼。
一. vue2.0使用vue-cli和webpack默認(rèn)模板沿盅，將單頁面入口改造成多頁面入口
二. 用webpack把我們的業(yè)務(wù)模塊分開打包，從而可以使我們的項目能夠按需加載籽腕，按模塊加載
三. webpack對各種文件路徑設(shè)置的總結(jié)
- webpack在開發(fā)環(huán)境與生產(chǎn)環(huán)境可以設(shè)置不同的項目輸出目錄和靜態(tài)資源輸出目錄嗡呼，例如我們把項目輸出目錄在服務(wù)器根目錄下的page目錄中，那么這時候靜態(tài)資源輸出目錄就應(yīng)該是/page/目錄皇耗。如果此時設(shè)置的publicPath為./的話南窗，css的背景圖就會以它所在的css計算目錄了。
- webpack中alias的設(shè)置能夠減少我們在import或者require時引用文件的麻煩郎楼，但是這種設(shè)置對css和html里的路徑是不能生效的万伤，要想引用圖片的話，按照webpack一切皆模塊的概念呜袁，可以使用require引用圖片來減少路徑的書寫
- 對于頁面靜態(tài)的圖片（經(jīng)常會更換的圖片）敌买，我們往往會放在根目錄下的static目錄下，而很少會更換的圖片和一些公用的css或者js阶界，我們可以放在src/assets下虹钮，對于那些小logo，一旦使用除非項目大改版否則不會更換的logo膘融，甚至可以直接放在相應(yīng)組件目錄下
- webpackde的rules中可以添加設(shè)置url-loader芙粱，它會對css中.png,.jpg等圖片后綴的文件進(jìn)行處理，如果該文件大于一定值（默認(rèn)為10000氧映，約10k大写号稀），則會將文件轉(zhuǎn)成base64圖片岛都，否則輸出到一個預(yù)設(shè)好的目錄
