你真的會用devServer這個配置項嘛?

devServer

經過 webpack-dev-server 的這些配置，可以以多種方式改變其行爲。這是一個基本的示例，利用 gzips 壓縮 dist/ 目錄當中的全部內容並提供一個本地服務(serve)：

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

參數說明

devServer: {
    // 提供靜態文件目錄地址
    // 基於express.static實現
    contentBase: path.join(__dirname, "dist"),
    // 將此項配置設置爲 true 時，將會跳過 host 檢查。這是不推薦的由於不檢查 host 的應用容易受到 DNS 從新綁定攻擊
    disableHostCheck:true,
    // 在全部響應中添加首部內容
    headers: {
      "X-Custom-Foo": "bar"
    },
    // 當啓用 lazy 時，dev-server 只有在請求時才編譯包(bundle)。這意味着 webpack 不會監視任何文件改動。咱們稱之爲「惰性模式」
    lazy:true,
    // 任意的 404 響應都被替代爲 index.html
    // 基於node connect-history-api-fallback包實現
    historyApiFallback: true,
    // 是否一切服務都啓用 gzip 壓縮
    // 基於node compression包實現
    compress: true,
    // 是否隱藏bundle信息
    noInfo: true,
    // 發生錯誤是否覆蓋在頁面上
    overlay: true,
    // 是否開啓熱加載
    // 必須搭配webpack.HotModuleReplacementPlugin 才能徹底啓用 HMR。
    // 若是 webpack 或 webpack-dev-server 是經過 --hot 選項啓動的，那麼這個插件會被自動添加
    hot: true,
    // 熱加載模式
    // true表明inline模式，false表明iframe模式
    inline: true, // 默認是true
    // 是否自動打開
    open: true,
    // 設置本地url和端口號
    host: 'localhost',
    port: 8080,
    // 代理
    // 基於node http-proxy-middleware包實現
    proxy: {
        // 匹配api前綴時，則代理到3001端口
        // 即http://localhost:8080/api/123 = http://localhost:3001/api/123
        // 注意:這裏是把當前server8080代理到3001，而不是任意端口的api代理到3001
        '/api': 'http://localhost:3001',
        // 設置爲true, 本地就會虛擬一個服務器接收你的請求並代你發送該請求
        // 主要解決跨域問題
        changeOrigin: true,
        // 針對代理https
        secure: false,
        // 覆寫路徑：http://localhost:8080/api/123 = http://localhost:3001/123
        pathRewrite: {'^/api' : ''},
        // 輸出本次代理請求的日誌信息
        bypass: function (req, res, proxyOptions) {
            console.log(proxyOptions.target)
        }
    }
}

哈哈哈哈哈哈，當你看到這裏的時候，你應該想多瞭解點，其實官方文檔都有點我都有