配置Webpack Dev Server 實戰操作方法步驟

2022 年 7 月 29 日
筆記
VUE, webpack 5, 前端

本文摘要：配置 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 官網地址：//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：//localhost:9000 來訪問應用。除了配置端口、允許訪問的 host 外，還可以配置 proxy 實現跨域等。更多配置在上面的官網中查看。

4 啟動服務

前面已經在 package.json 中配置了 serve 命令，執行 yarn serve 命令啟動 webpack dev server。啟動成功後在瀏覽器中訪問 //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）學習結束，期待關注留言分享~~

Tags: VUE webpack 5 前端