webpack 的配置組成
webpack 的構(gòu)建機制核心離不開依賴圖，將一切資源（js忍法、css等代碼資源和 字體矗漾、圖片等非代碼資源）視為一個個 module(模塊)禾蚕，從入口文件（entry）開始遞進查找依賴文件药薯，這個過程可看做是構(gòu)建依賴圖绑洛，根據(jù)依賴圖去打包生成相應(yīng)的資源。
webpack 默認配置文件為 webpack.config.js童本，當然實際使用中根據(jù)使用環(huán)境還可以創(chuàng)建使用 webpack.dev.config.js(開發(fā)環(huán)境), webpack.product.config.js（生產(chǎn)環(huán)境）真屯。（可以通過 webpack --config 指定配置文件）
核心概念
Entry：
指定 webpack 打包的入口文件。
用來指定 webpack 的打包入口文件（分為單入口與多入口穷娱，典型例子分別為 SPA 和 MPA）绑蔫，
Output：
指示webpack將編譯后的文件輸入到磁盤（指定文件路徑與名稱）
Output與Entry密切相關(guān)，一般多個入口對應(yīng)多個出口泵额，Output通過 []占位符來確保文件名稱的唯一配深，配置文件中的代碼與打包生成的結(jié)果如下
entry:{
index:'./src/index.js',
search:'./src/search.js'
},
output:{
path:path.join(__dirname,'dist'),
filename:'[name].js'
},
Loaders：
webpack 原生只支持 JS 和 JSON 兩種文件類型，通過 Loaders 去支持其他文件類型并將其轉(zhuǎn)化為有效的模塊嫁盲，并添加到依賴圖中篓叶。
Loader 本身是函數(shù)，接收源文件作為參數(shù)羞秤，返回轉(zhuǎn)換的結(jié)果澜共。
常見的 Loader
module:{
rules:[
{test:/\.txt$/,use:'raw-loader'}
]
}
test 指定匹配規(guī)則（一般用正則表達式）， use 指定使用的 loader 名稱锥腻。
Plugins
插件用于 bundle 文件的優(yōu)化嗦董、資源管理、環(huán)境變量注入等瘦黑，作用于整個構(gòu)建過程京革。可視為對 webpack 的增強幸斥，或者說 Loader 做不了的就交給 plugin 去實現(xiàn)匹摇。
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
Mode
指定當前的構(gòu)建環(huán)境：production development none，設(shè)置 mode 可以使用 webpack 內(nèi)置的函數(shù)甲葬，默認為 production.
文件監(jiān)聽
在發(fā)現(xiàn)源碼發(fā)生變化時廊勃，自動重新構(gòu)建出新的輸出文件。
webpack 有兩種開啟文件監(jiān)聽的方式：
（1）啟動 webpack 命令時加上 --watch 參數(shù)经窖；
（2）配置 webpack.config.js 時設(shè)置 watch:true（或者在配置文件中的 scripts 中設(shè)置 "watch":"webpack --watch"）坡垫。
這樣在編輯器里改動并保存源碼后，webpack 就會自動重新構(gòu)建画侣，不過開發(fā)者還是需要手動刷新瀏覽器才能看到改動后的效果冰悠。
以下是原理分析圖，注意 poll 的單位是 ms配乱，所以圖中說明有誤溉卓，應(yīng)該是每秒一次皮迟。
watchOptions.aggregateTimeout：當一個文件更改后，并不會立即開始重新構(gòu)建桑寨，而是會有一段時間延遲伏尼，允許 webpack 將這段時間內(nèi)進行的任何其他更改都聚合到一次重新構(gòu)建里，以毫秒為單位尉尾。
