配置 Webpack Dev Server 可以解決本地開發前端應用時，手動執行 webpack 命令或 yarn build 命令，再去瀏覽器中訪問 dist/index.html 的麻煩耗時操作，可有效簡化流程。本文實戰演練配置 Webpack Dev Server 的方法與步驟。 ...
本文摘要：配置 Webpack Dev Server 可以解決本地開發前端應用時，手動執行 webpack 命令或 yarn build 命令，再去瀏覽器中訪問 dist/index.html 的麻煩耗時操作，可有效簡化流程。本文實戰演練配置 Webpack Dev Server 的方法與步驟。
在本地開發前端應用時，每次都手動執行 webpack 命令或 yarn build 命令，再去瀏覽器中訪問 dist/index.html 是一件非常麻煩耗時的事情，可以通過配置 Webpack Dev Server 來解決這個問題。實際上 vue-cli 中也配置了 Webpack Dev Server，每次啟動 Vue 應用的命令 yarn serve，本質上就是啟動 Webpack Dev Server。
webpack-dev-server 官網地址：https://webpack.js.org/configuration/dev-server/
1 安裝依賴
由於我們使用的 webpack 版本是當前最新的5.73.0、 webpack-cli 版本是4.9.2， webpack-dev-server 的版本也要使用最新的 4.x:
yarn add webpack-dev-server -D
當前版本為 4.9.3。
2 添加運行命令
在 package.json 文件的 scripts 節點中添加啟動 webpack dev server 的命令：
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
3 修改 webpack 配置
在 webpack.config.js 中 entry、 plugins、mode 同級新增節點 devServer，基本的配置如下：
// ...
module.exports = {
// ...
devServer: {
port: 9000,
host: '0.0.0.0',
hot: true
},
// ...
}
該配置表示通過url：http://localhost:9000 來訪問應用。除了配置埠、允許訪問的 host 外，還可以配置 proxy 實現跨域等。更多配置在上面的官網中查看。
4 啟動服務
前面已經在 package.json 中配置了 serve 命令，執行 yarn serve 命令啟動 webpack dev server。啟動成功後在瀏覽器中訪問 http://localhost:9000 即可訪問應用。
註意：
- 修改了 webpack 的配置（
webpack.config.js）需要重啟 webpack dev server 才會生效。- devServer 的配置只對本地開發調試有效，不影響編譯打包構建（yarn build）的效果。
5 高效開發的配置
5.1 devtool
預設情況下，如果在 js 代碼中通過 console.log 列印日誌，或程式報錯時，瀏覽器 console 中輸出的內容是經過 webpack 打包編譯後的代碼位置，如下圖所示：
點擊上圖中的 main.js:21，顯示的代碼如下：
當代碼較多時較難定位問題。可把 devtool 的配置為 source-map ：
// ...
module.exports = {
// ...
devServer: {
// ...
},
devtool: 'source-map',
// ...
}
配置後，重啟 webpack-dev-server，點擊瀏覽器控制臺中輸出的 console.log ，會進入源碼對應的位置：
source-map 源碼映射，webpack 會自動生成源代碼與打包構建後的代碼的映射關係的文件（xxx.map），通過該映射文件，找到打包構建後的代碼對應的源碼，從而使瀏覽器提示源碼文件的位置。
5.2 HMR
HMR：Hot Module Replacement 熱模塊替換。當修改代碼時， webpack 預設會將所有模塊全部重新打包編譯，整個頁面重新載入，速度很慢。HMR 熱模塊替換支持在程式運行中（webpack-dev-server 已啟動），修改哪個模塊，就自動修改（替換、添加、刪除）該模塊，需用全部打包所有模塊。
上面 devServer 的配置的 hot: true 已經開啟了HMR。開啟 HMR 後，修改樣式整個頁面不會刷新，但 JS 不生效。不過在現代化開發中，vue-loader 等實現了 HMR，例如你修改了 vue 的某個組件，保存後只會替換該組件。
今日優雅哥（youyacoder）學習結束，期待關註留言分享~~
