一.解決幾個不明白的點：

1.       什麼是 webpack dev server

         是一個輕量的node.js express伺服器，實現了 webpack 編譯程式碼實時輸出更新。

2.       什麼是 web dev middleware

           是 WebPack 的一箇中間件。它用於在 Express 中分發需要通過WebPack 編譯的檔案。單獨使用它就可以完成程式碼的熱過載（hotreloading）功能。

3.       什麼是 webpack hot middleware

          它通過訂閱 Webpack 的編譯更新，之後通過執行 webpack 的HMR api 將這些程式碼模組的更新推送給瀏覽器端。

4.       什麼是 HMR

          HMR 即 Hot Module Replacement 是Webpack 一個重要的功能。它可以使我們不用通過手動地重新整理瀏覽器頁面實現將我們的更新程式碼實時應用到當前頁面中。

HMR 的實現原理是在我們的開發中的應用程式碼中加入了 HMR Runtime，它是HMR 的客戶端（瀏覽器端 client）用於和開發伺服器通訊，接收更新的模組。服務端工作就是前面提到的 Webpack hot middleware 的，它會在程式碼更新編譯完成之後通過以 json 格式輸出給HMRRuntime 就會更具 json 中描述來動態更新相應的程式碼。

二.安裝依賴並配置

1.       新建資料夾，並建立目錄和檔案，在檔案下寫內容

index.html

main.css

app.js

2.       使用 npm init -y 初始化 得到package.json

3.       安裝專案所需要的依賴

4.       在根目錄下新建webpack.config.js並配置

5.       新建 .babelrc.json 設定預設

6.       新建 server.js 配置伺服器

7.回到package.json下配置

8.修正

這時如果開啟http://localhost:9000/      index.html頁面什麼也沒載入，F12檢視，發現自動生成的index.html什麼也沒引入。因此，手動配置一下src/index.html頁面，最後重新整理頁面出現

9.       在app.js下修改內容，頁面自動更新