webpack執行機制流程是怎麼樣的?

01-06

使用webpack有些日子了，但是一直不是很清楚它的運行機制是怎樣的。使用webpack-hot-middle 和webpack-dev-middle熱啟動本地伺服器時，在瀏覽器上訪問localhost，它會請求一個.html，如果這個.html中請求了output中設置的path和publicPath的文件夾中的文件(如.js)，而在物理路徑不存在的文件夾和文件，它是怎麼載入找到的？？

看看webpack的源碼就知道了。我寫了一篇webpack的源碼分析，僅供參考

https://lihuanghe.github.io/2016/05/30/webpack-source-analyse.html

文件路徑和 URL 路徑沒有必然聯繫，你清楚這個就好。

正如 lin瑞玉的回答所說，webpack-dev-middle 把文件放在內存中了。實現過程大致為：webpack 有一個 outputFileSystem 選項，通過這個選項 webpack 在編譯時可以使用自定義的 fs 替換 Node 原生 fs，只要 API 兼容。webpack-dev-middle 正是把它替換成了 memory-fs.

dev-middle 在請求來的時候，根據 URL path 拿到 output 文件路徑，然後從 menory-fs 中讀文件，寫到響應裡面。

我來貼一個熱替換的原理吧。

在構建的時候，webpack添加了一個小型HRM運行環境給bundle文件。這個運行環境跑在了你的app中。當構建結束Webpack並沒有推出而是保持激活狀態，監聽資源文件的改動。如果Webpeck檢測到資源文件的改動他將重新build這個改動的模塊。

接下來，將根據預先的配置要麼讓Webpack向HRM發起通知，要麼讓HRM自動檢測webpack的變化。任何一種方式都是將改動後的模塊高速HRM運行環境來調起熱更新：

首先HRM將檢查是否更新的模塊能自我接納，如果不能，他將檢查那些require過該更新模塊的模塊如果這些也不能接受，那就將他冒泡到其他層級，繼續查找，require了這些require了變動模塊的模塊們直到這個更新被接受，如果到了入口點還沒有，就說明熱更新失敗。

用webpack-dev-server打包後的文件是放在內存的，你可以在瀏覽器輸入localhost：8080/webpack-dev-server下看到那個打包後的文件，注意這裡後面沒有/。有/是運行打包後的文件，即整個程序。要看到物理存在的文件，用webpack命令

Webpack 2 視頻教程