webpack核心概念
entry: 編譯入口
module: 模塊，在 webpack 中，一切皆為模塊，一個模塊對應一個文件
Chunk: 代碼塊，一個 chunk 由多個模塊組合而成，用於代碼的合並與分割
Loader: 模塊轉換器，將非js模塊轉化為webpack能識別的js模塊
Plugin: 擴展插件，在webpack運行的各個階段，都會廣播出去相對應的事件，插件可以監聽到這些事件的發生，在特定的時機做相對應的事情
webpack核心對象
Tapable：控制鈎子的發布與訂閱，Compiler和Compilation 對象都繼承於 Tapable
Compiler
Compiler 繼承 Tapable 對象，可以廣播和監聽 webpack 事件。
Compiler 對象是 webpack 的編譯器，webpack 周期中只存在一個 Compiler 對象。
Compiler 對象在 webpack 啟動時創建實例，compiler 實例中包含 webpack 的完整配置，包括 loaders, plugins 信息。
Compilation
Compilation 繼承 Tapable 對象，可以廣播和監聽 webpack 事件。
Compilation 實例僅代表一次 webpack 構建和生成編譯資源的的過程。
webpack 開發模式開啟 watch 選項，每次檢測到入口文件模塊變化時，會創建一次新的編譯: 生成一次新的編譯資源和新的 compilation 對象，這個 compilation 對象包含了當前編譯的模塊資源 module, 編譯生成的資源，變化的文件, 依賴的的狀態
webpack基本概念
1. webpack中的module，chunk 和 bundle
module 就是一個js模塊，就是被require或export的模塊，例如 ES模塊，commonjs模塊，AMD模塊
chunk 是 代碼塊，是進行依賴分析的時候，代碼分割出來的代碼塊，包括一個或多個module，是被分組了的module集合，code spliting之后的就是chunk
bundle 是 文件，最終打包出來的文件，通常一個bundle對應一個chunk
2. webpack中loader和plugin在作用
loader是文件轉換器，將webpack不能處理的模塊轉換為webpack能處理的模塊，就是js模塊
plugin是功能擴展，干預webpack的打包過程，修改編譯結果或打包結果
webpack打包流程
1. 生成options (將webpack.config.js和shell中的參數，合並中options對象)
2. 實例化complier對象 （webpack全局的配置對象，包含entry，output，loader，plugins等所有配置信息）
3. 實例化Compilation對象 (compiler.run方法執行，開始編譯過程，生成Compilation對象)
4. 分析入口js文件，調用AST引擎(acorn)處理入口文件，生成抽象語法樹AST，根據AST構建模塊的所有依賴
5. 通過loader處理入口文件的所有依賴，轉換為js模塊，生成AST，繼續遍歷，構建依賴的依賴，遞歸，直至所有依賴分析完畢
6. 對生成的所有module進行處理，調用plugins，合並，拆分，生成chunk
7. 將chunk生成為對應bundle文件，輸出到目錄
webpack熱更新的原理
基本原理，webpack監聽文件變化，服務端和客戶端有websocket通信，服務端想客戶端發送文件變化消息，
客戶端根據文件變化消息獲取變更模塊代碼，進行模塊代碼的熱替換
1. 配置開啟熱更新，設置entry格式和webpack-dev-server的option，使得打包的bundle里面包含HMR runtime和websocket連接的代碼
2. webpack-dev-server通過express啟動服務端
3. 客戶端通過sockjs和服務端建立websocket長連接
4. webpack監聽文件變化，文件保存觸發webpack重新編譯，編譯后的代碼保存在內存中，不在output.path中產生輸出
5. 編譯會生成hash值，hot-update.json(已改動模塊的json)，hot-update.js(已改動模塊的js)
6. 通過socket想客戶端發送hash值
7. 客戶端對比hash值，一致在走緩存，不一致則
通過ajax獲取hot-update.json，json包含模塊hash值
再通過jsonp請求獲取hot-update.js
8. 熱更新js模塊，若失敗，則live reload刷新瀏覽器代替熱更新（若模塊未配置熱更新，則同樣live reload）