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