本文摘要：配置 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）學習結束，期待關注留言分享~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500591.html
標籤：其他
下一篇：05js陣列