webpack4.x 系列(六) ☞ devServer的一些配置

我們都知道，在瀏覽器端會有同源策略，不符合同源策略(也就是協議、域名、端口號三者組成的同源策略)的資源是獲取不到的。那如何能夠獲取一些其他網站的資源呢？答案就是跨域，那麼這裏就講下devServer中常用的一些東西，然後最後重點講下proxy的方式。

一、什麼devServer

通過來自 webpack-dev-server 的這些選項，能夠用多種方式改變其行爲。

來看一個例子：

devServer: {
  // 告訴服務器從哪裏提供內容。只有在你想要提供靜態文件時才需要。
  contentBase: path.join(__dirname, "dist"),
  // 一切服務都啓用gzip 壓縮：
  compress: true,
  // 端口號
  port: 8080
}

當服務器啓動時，在解析模塊列表之前會有一條消息：

http://localhost:8080/
webpack output is served from /build/
Content not from webpack is served from /path/to/dist/

二、devServer.host

指定使用一個 host。默認是 localhost。如果你希望服務器外部可訪問，也就是說，我們可以用host的方式在同一個局域網內，其他設備可以通過這個ip地址也可以訪問到這個項目，代碼指定如下：

host: "0.0.0.0"

或 

webpack-dev-server --host 0.0.0.0

三、devServer.https

默認情況下，dev-server 通過 HTTP 提供服務。通過下面代碼你可以開啓一個https的請求，也可以選擇帶有 HTTPS 的 HTTP/2 提供服務：

https: true

或

webpack-dev-server --https

四、devServer.open

設置這個後，我們打完包會自動打開瀏覽器訪問這個地址頁面。

五、devServer.port

請求端口號，這個很簡單沒什麼好講的。

port: 8080

或

webpack-dev-server --port 8080

六、devServer.proxy

重點的終於來了，如果你有單獨的後端開發服務器 API，並且希望在同域名下發送 API 請求 ，那麼代理某些 URL 會很有用。這個在vue中也是非常的常用，比如代理某一個接口，請求某項資源等等，是跨域的的一種常見方式。不過切記，這個方式只用於本地，上線之後就要通過其他的方式去配置了，像nginx就是線上代理的一種最好方式。

在 localhost:8080 上有後端服務的話，你可以這樣啓用代理：

proxy: {
  "/api": "http://localhost:8080"
}

請求到 /api/users 現在會被代理到請求 http://localhost:8080/api/users，這樣子我們就可以獲取user這個接口的所有數據了。切記，我們在寫業務代碼時候都要加上api，這樣子才能捕獲到api這個接口。

另一種方式，通過重寫的方式，如下面，這個也可以代理我們自己靜態資源寫的mock接口，只要路徑和端口寫正確就沒問題。

proxy: {
  "/api": {
    target: "http://localhost:3000",
    // 這個不經可以代理線上也可以是本地的靜態數據的代理請求
    pathRewrite: {"^/api" : ""}
  }
}

默認情況下，不接受運行在 HTTPS 上，且使用了無效證書的後端服務器。如果你想要接受，修改配置如下：

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

如果你想代理多個本地目標接口，可以通過數組的方式，代碼如下：

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

以上代理的方式在vue-cli中也是類同的，我們可以參考。

 

參考文檔：

https://webpack.js.org/configuration/dev-server/#devserver