使用 DevServer

提供 HTTP 服務而不是使用本地文件預覽

監聽文件的變化並自動刷新網頁，做到實時預覽

支持 Source Map，以方便調試

　　對於這些，Webpack 都為我們考慮好了。Webpack 原生支持上述第 2、3 點內容，再結合官方提供的開發工具 DevServer 也可以很方便做到第 1 點。DevServer 會啟動一個 HTTP 服務器用於服務網頁請求，同時會幫助自動 Webpack，並接受 Webpack 發出的文件變更信號，通過 WebSocket 協議自動刷新網頁做到實時預覽。

　　這意味著 DevServer 啟動的 HTTP 服務器監聽在 8080 端口，DevServer 啟動後會一直駐留在後臺保持運行，訪問這個網址，就能獲取項目根目錄下的 index.html 了。用瀏覽器打開這個地址時我們會發現頁面空白，錯誤原因是 ./dist/bundle.js 加載404了。同時我們會發現並沒有文件輸出到 dist 目錄，原因是 DevServer 會將 Webpack 構建的文件保存在內存中，在要訪問輸出的文件時，必須通過 HTTP 服務訪問。 由於 DevServer 不會理會 webpack.config.js 裏配置的 output.path 屬性，所以要獲取 bundle.js 的正確 URL 是 http://localhost:8080/bundle.js

　　Webpack 在啟動時可以開啟監聽模式，之後 Webpack 會監聽本地文件系統的變化，在發生變化時重新構建出新結果。 Webpack 默認關閉監聽模式，我們可以在啟動 Webpack 時通過 --watch 來開啟監聽模式。

　　通過 DevServer 啟動的 Webpack 會開啟監聽模式，當發生變化時重新執行構建，然後通知 DevServer。DevsServer 會讓 Webpack 在構建出的 JavaScript 代碼裏註入一個代理客戶端用於控制網頁，網頁和 DevServer 之間通過 WebSocket 協議通信，以方便 DevServer 主動向客戶端發送指令。DevServer 在收到來自 Webpack 的文件變化通知時，通過註入的客戶端控制網頁刷新。

　　如果嘗試修改 index.html 文件並保存，則我們會發現這並不會觸發以上機制，導致這個問題的原因是 Webpack 在啟動時會以配置裏的 entry 為入口去遞歸解析出 entry 所依賴的文件，只有 entry 本身和依賴的文件才會被 Webpack 添加到監聽列表裏。而 index.html 文件是脫離了 JavaScript 模塊化系統的，所以 Webpack 不知道它的存在。

支持 Source Map

　　在瀏覽器中運行的 JavaScript 代碼都是編譯器輸出的代碼，這些代碼的可讀性很差。如果在開發過程中遇到一個不知道原因的 Bug，則我們可能需要通過斷點調試去找出問題。在編譯器輸出的代碼上進行斷電調試是一件辛苦和不優雅的事情，調試工具可以通過 Source Map 映射代碼，讓我們在源代碼上斷點調試。Webpack 支持生成 Source Map，只需要在啟動時帶上 --devtool source-map 參數。重啟 DevServer 後刷新頁面，在打開 Chrome 瀏覽器的開發者工具，就可以在 Sources 欄中看到可調試的源代碼了

webpack-dev-server 小記 原理介紹 概念解讀