webpack原理解析（幾張圖清楚瞭解其原理）

webpack是利用什麼來打包的？

• webpack依賴於node的環境與文件操作系統
• webpack的打包過程，其實就是利用node去讀取文件，然後進行一些字符串處理後，再利用node去寫入文件

webpack打包流程

Loader是如何生效的？

• Loader其實是一個方法：接受一個字符串，方法內部處理完後再返回字符串，結構如下圖代碼所示：

// Loader 組織結構
// 下面會將文件內容 c1 編譯打包爲 console.log(1)
module.exports=function(resource){
  // 如果想傳出更多的參數信息，如錯誤，sourcemap等，則可使用下面這種方式
  // this.callback(err,resource.replace('c',"console.log"),sourcemap)
  
  // return 只能傳出一個處理後的結果
  return resource.replace('c',"console.log");  
}

打包結果分析

// 打包代碼組成
(function(modules){ // modules 就是傳進來的對象，即所有要被打包的代碼
  function __webpack_require__(moduleId){};

  return __webpack.require(__webpack_require__.s="./app.js")
})({
  "./app.js":(function(){}),
  "module1.js":(function(){}),
  "module2.js":(function(){}),
})

// 上面代碼其實就是一個匿名自執行函數，參數就是相關業務代碼，就是相關被打包的代碼一起作爲一個對象寫進去，
// 這個對象的鍵名是相關依賴的名字，值是一個函數，就是要執行的代碼。
// 然後裏面有一個 __webpack_require__ 方法，會依次執行我們的代碼

如何排隊模塊

• 上圖顯示，會首先排隊入口文件app.js，如果app.js裏面引入了module1.js文件和module2.js文件，則會依次排隊module1.js，module2.js；如果module1.js裏引入了module2.js文件，此時module2.js已經在隊伍當中，所以不會再去重複排隊。

dev-server原理

• dev-server是利用express和一箇中間件webpack-dev-middleware來開啓服務，然後開啓的server會執行打包出來的代碼。

熱更新原理

開啓服務==》建立一個websocket鏈接==》發生代碼改變，服務通過websocket通知到客戶端==》客戶端替換新代碼。