(資料圖片僅供參考)

安裝依賴包

yarn add webpack-dev-server -D

常用配置

devServer: {  contentBase: path.join(__dirname, "static"),    // 告訴服務器從哪里提供內容(默認當前工作目錄)  openPage: "views/index.html",  // 指定默認啟動瀏覽器時打開的頁面  index: "views/index.html",  // 指定首頁位置  watchContentBase: true, // contentBase下文件變動將reload頁面(默認false)  host: "localhost", // 默認localhost,想外部可訪問用"0.0.0.0"  port: 8080, // 默認8080  inline: true, // 可以監控js變化  hot: true, // 熱啟動  open: true, // 啟動時自動打開瀏覽器（指定打開chrome，open: "Google Chrome"）  compress: true, // 一切服務都啟用gzip 壓縮  disableHostCheck: true, // true：不進行host檢查  quiet: false,  https: false,  clientLogLevel: "none",  stats: { // 設置控制臺的提示信息    chunks: false,    children: false,    modules: false,    entrypoints: false, // 是否輸出入口信息    warnings: false,    performance: false, // 是否輸出webpack建議（如文件體積大?。? },  historyApiFallback: {    disableDotRule: true,  },  watchOptions: {    ignored: /node_modules/, // 略過node_modules目錄  },  proxy: { // 接口代理（這段配置更推薦：寫到package.json，再引入到這里）    "/api-dev": {      "target": "http://api.test.xxx.com",      "secure": false,      "changeOrigin": true,      "pathRewrite": { // 將url上的某段重寫（例如此處是將 api-dev 替換成了空）        "^/api-dev": ""      }    }  },  before(app) { },}

根據目錄結構的不同，contentBase、openPage 參數要配置合適的值，否則運行時應該不會立刻訪問到你的首頁; 同時要注意你的 publicPath，靜態資源打包后生成的路徑是一個需要思考的點，這與你的目錄結構有關。

?package.json 添加運行命令

"scripts": {  "dev": "cross-env BUILD_ENV=development webpack-dev-server --mode development --colors --profile"}

不同操作系統傳遞參數的形式不一樣，cross-env 可以抹平這個平臺差異。

實用技巧：dev-server 的代碼通常在內存中，但也可以寫入硬盤，產出實體文件：

{  writeToDisk: true,}

通?？梢杂糜诖碛成湮募{試，編譯時會產出許多帶 hash 的js 文件，不帶 hash 的文件同樣也是實時編譯的。

有的時候，啟動服務時，想要默認使用本地的 ip 地址打開：

{  disableHostCheck: true, // true：不進行host檢查  // useLocalIp: true, // 建議不在這里配置  // host: "0.0.0.0", // 建議不在這里配置}

同時還需要將 host 配置為??0.0.0.0??，這個配置建議在 scripts 命令中追加，而非在配置中寫死，否則將來不想要這種方式往回改折騰，取巧一點，配個新命令：

"dev-ip": "yarn run dev --host 0.0.0.0 --useLocalIp",

有時啟動的時候希望是指定的調試域名，例如：local.test.baidu.com：

{  open: true,  public: "local.test.baidu.com:8080", // 需要帶上端口  port: 8080,}

同時需要將??127.0.0.1??修改為指定的 host，可以借助 iHost 等工具去修改，各個工具大同小異，格式如下：

127.0.0.1 local.test.baidu.com

服務啟動后將自動打開??local.test.baidu.com:8080??訪問

dev-server 調試時，啟動 gzip 壓縮：

{  compress: true,}