webpack作為構(gòu)建工具平時(shí)作為前端作為優(yōu)化、模塊編程、和分片打包的重要組成部分,大家可能并不陌生，如果沒(méi)有時(shí)刻的去關(guān)注文檔，那么大家可能不太清楚webpack已經(jīng)默默然的升級(jí)到2.x了，對(duì)比1.x版本，webpack2的文檔結(jié)構(gòu)和代碼提示都非常友善。

webpack從1.x升到2版，并沒(méi)有作為大的更改改動(dòng)，而且內(nèi)部的接口文檔形式也與1基本無(wú)修改，那么對(duì)比webpack2版本 我們對(duì)webpack的主要屬性做個(gè)簡(jiǎn)單的屬性講解

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

 

首先第一個(gè) webpack2.1后對(duì)聲明引入webpack省略了 ，也就是說(shuō)沒(méi)有require('webpack')也可以正常運(yùn)行，當(dāng)然不是很建議，因?yàn)楹笤谑褂貌寮臅r(shí)候需要顯示調(diào)用webpack對(duì)象。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

context：解析和加載的初始路徑，一般在不設(shè)置的情況下默認(rèn)使用當(dāng)前文件路徑。(官方文檔建議設(shè)置，這樣可以獨(dú)立于工作環(huán)境)

如何設(shè)置context的時(shí)候注意配置為全局路徑,通過(guò)path進(jìn)行設(shè)置。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

entry:程序入口，我們將要對(duì)文件處理的程序入口。（就是在使用webpack時(shí)要對(duì)那幾個(gè)文件進(jìn)行操作）

 

entry可以傳遞 string字符串、數(shù)組、對(duì)象結(jié)構(gòu)、函數(shù)返回值(不建議)分別定義入口設(shè)置。

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

那么在webpack2.的官網(wǎng)上 函數(shù)設(shè)置entry使用的es6的箭頭函數(shù)=>與普通函數(shù)功能對(duì)等

 

------------------------------------我是華麗的分割線---------------------------------

 

output:webpack程序操作后的出口配置信息。我們獲取文件后進(jìn)行了一些操作~如編譯、壓縮、合并后最終需要通過(guò)output設(shè)置輸出的路徑地址。

 

output下的屬性配置:

 

filename:輸出文件的名稱信息。允許自定義或者通過(guò)[id]/[hash]進(jìn)行占位

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

publicPath：指定輸出文件的公共Url.(反正生番過(guò)來(lái)的) 編譯文件中存在src或url時(shí)進(jìn)行設(shè)置。

在webpack進(jìn)行編譯時(shí),如果我們?cè)谌肟谖募ntry的內(nèi)部，使用帶有src的路徑引用，如css的url或html的路徑，javascript標(biāo)簽的引用，那么就會(huì)造成編譯失敗，因?yàn)槲锢韮?nèi)存的路徑和當(dāng)前路徑是不同的，所以publicPath通常作為文件的href或url來(lái)進(jìn)行設(shè)置，名稱隨意 不要太奇怪就好。

 

chunkFilename:用于未配置在entry中，但是通過(guò)import或require依賴關(guān)系加載進(jìn)來(lái)的模塊進(jìn)行命名。如果不進(jìn)行設(shè)置也可以，但是會(huì)隨機(jī)命名，可讀性差。另外chunkFilename也常用于提取公共模塊。

chunkFilename可以設(shè)置格式為 [id].js / [name].js / [hash].js 分別代表模塊的索引或名稱 (我使用name測(cè)試一直失敗，默認(rèn)給的是數(shù)字)

程序配置:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

js編寫(xiě) => 我這里使用的es6編寫(xiě)方式 如果使用require模塊也是可以的 但是注意書(shū)寫(xiě)格式

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

hotupdatechunkFilename: 自定義熱更新模塊(高級(jí)設(shè)置 與熱鍵部署一塊講)

 

library: 用來(lái)設(shè)置導(dǎo)出的包的名稱 (后期例子講解)

 

libraryTarget:對(duì)導(dǎo)出包的格式進(jìn)行設(shè)置 (后期例子講解)

 

 

----------------------------------------------我是分割線--------------------------------------------------------

modules下的屬性:

noParse: regExp|[RegExp]

設(shè)定webpack在解析時(shí),不解析的路徑結(jié)構(gòu)，格式為正則，在構(gòu)建大的項(xiàng)目時(shí)嗎，可以提高效率

 

rules: []

定義解析規(guī)則，通過(guò)配置，對(duì)文件進(jìn)行編譯處理。

 

rule：規(guī)則可以分為三塊內(nèi)容 條件 結(jié)果 和嵌套規(guī)則

 

rule:{

test:/\.js/

enforce:'pre',

include:[path.resolve(__dirname,'js/app')]

exclude:[],

loader|loaders =>在webpack1 設(shè)置加載器

oneof:'',

options:[],

query:[],

parser:{}

resource:'/app/',

resouceQuery:/userName/,

use:[]

}

 

test: 匹配要處理的文件格式，正則格式.(test是resouce的簡(jiǎn)寫(xiě)形式)

enforce:加載器的執(zhí)行順序，不設(shè)置為正常執(zhí)行?？蛇x值 'pre|post' 前|后

include:將要處理的目錄包括進(jìn)來(lái)

exclude:排除不處理的文件目錄，可以使數(shù)組或字符串正則格式

issuer:條件的發(fā)起者

loader:一個(gè)簡(jiǎn)寫(xiě)的rule.use，既然已經(jīng)升級(jí)了 個(gè)人不建議繼續(xù)使用

loaders:一個(gè)數(shù)組結(jié)構(gòu)rule.use的別名 同上

oneOf：匹配規(guī)則時(shí)，只使用第一匹配的數(shù)組

options|query：都是rule.use的簡(jiǎn)寫(xiě) (保留了好多1的東西 有點(diǎn)用不慣)

parser:解析器選項(xiàng)對(duì)象(暫時(shí)沒(méi)用到過(guò)，東西很多 可以去官網(wǎng)看看)

resource:與資源匹配的條件，可以使用正則。例子中匹配資源內(nèi)部 含有app的文件 如 app.js | demoapp.js

resourceQuery:與資源查詢匹配的條件，匹配資源?后面的字段 如 app.js?userName

use:一個(gè)數(shù)組結(jié)構(gòu)用于作為程序解析器的入口路徑 (真抱歉 我特么沒(méi)辦法好好get這個(gè)英文的真實(shí)意義)

我們就理解use用來(lái)作為引用加載器函數(shù)的入口配置吧

 

哈 屬性稍微多了點(diǎn) 我們拿幾個(gè)簡(jiǎn)單的例子講解

//1.基礎(chǔ)配置格式

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

使用模塊化編程解析css樣式 注意 style-loader必須在前

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

注:webpack 默認(rèn)對(duì)es6中的import模塊是支持的，但是對(duì)于let const變量和其他的編譯不進(jìn)行解析的，因?yàn)閣ebpack認(rèn)為es6是個(gè)號(hào)的姑娘,咳咳 是好的語(yǔ)言，所以無(wú)需為其轉(zhuǎn)換 我們默認(rèn)使用即可，所以在低版瀏覽器需還是需要進(jìn)行轉(zhuǎn)換的

 大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

 

github代碼例子: https://github.com/kingnuoyan/webpack

http://www.cnblogs.com/ygapp/p/6664191.html