webpack5之devServer的常用設定詳解

2022-12-23 14:00:16

前言

devServer是為開發過程中, 開啟的一個本地服務,在此總結一些常用的設定。供大家學習，相互成長，相互進步！

一. contentBase

devServer中contentBase對於我們直接存取打包後的資源其實並沒有太大的作用，但如果我們打包後的資源，又依賴於其他的一些資源，那麼就需要指定從哪裡來查詢這個內容，這時候就需要設定contentBase

舉例：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包後的檔案的輸出目錄
    path: path.resolve(__dirname, "./build"),
    publicPath: "/abc",
  },
  // 專門為webpack-dev-server
  // devServer為開發過程中, 開啟一個本地服務
  devServer: {
    publicPath: "/abc",
    }
  }

如上方圖所示設定"./why/abc.js"，但是這樣webpack serve打包後瀏覽器是無法通過相對路徑去找到這個資料夾的

所以應設定為如下：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包後的檔案的輸出目錄
    path: path.resolve(__dirname, "./build"),
    publicPath: "/abc",
  },
  // 專門為webpack-dev-server
  // devServer為開發過程中, 開啟一個本地服務
  devServer: {
**    contentBase: path.resolve(__dirname, "./why"),
**    watchContentBase: true, //實時監聽contentBase檔案變化
    publicPath: "/abc",
   }
  }

二. hotOnly、hot、host設定

1. hotOnly、hot

hot 啟用 webpack 的熱模組替換特性：

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

啟用熱模組替換功能，在構建失敗時不重新整理頁面作為回退，使用 hot: 'only' 或hotOnly：true：

module.exports = {
  //...
  devServer: {
    hot: 'only', //hotOnly: true,
  },
};

2. host設定主機地址

預設值是localhost；如果希望其他地方也可以存取，可以設定為 0.0.0.0；

提示： localhost 和 0.0.0.0 的區別：

localhost：本質上是一個域名，通常情況下會被解析成127.0.0.1;

127.0.0.1：迴環地址(Loop Back Address)，表達的意思其實是我們主機自己發出去的包，直接被自己接收;

正常的資料庫包經常應用層 - 傳輸層 - 網路層 - 資料鏈路層 - 物理層 ;
而回環地址，是在網路層直接就被獲取到了，是不會經常資料鏈路層和物理層的;
比如我們監聽 127.0.0.1時，在同一個網段下的主機中，通過ip地址是不能存取的;

0.0.0.0：監聽IPV4上所有的地址，再根據埠找到不同的應用程式;

比如我們監聽 0.0.0.0時，在同一個網段下的主機中，通過ip地址是可以存取的

三. port、open、compress

port:設定監聽的埠，預設情況下是8080,不能設定為null,可以設定自動為auto

module.exports = {
  //...
  devServer: {
    port: 8080, 
  },
};

open:告訴 dev-server 在伺服器已經啟動後開啟瀏覽器。設定其為 true 以開啟你的預設瀏覽器。

module.exports = {
  //...
  devServer: {
    open: true,
    //在瀏覽器中開啟指定頁面：open: ['/my-page']
    //提供要使用的瀏覽器名稱，而不是預設名稱
  // open: {
      //   app: {
      //  name: 'google-chrome',
    //  },
   // },
  },
};

compress:是否為靜態檔案開啟gzip compression：

module.exports = {
  //...
  devServer: {
    compress: true,
  },
};

四. Proxy代理

Proxy是我們開發中非常常用的一個設定選項，它的目的設定代理來解決跨域存取的問題。

舉例：

我們的一個api請求是 http://localhost:8888，但是本地啟動伺服器的域名是 http://localhost:8000，這個時候傳送網路請求就會出現跨域的問題。所以將請求先傳送到一個代理伺服器，代理伺服器和API伺服器沒有跨域的問題，就可以解決我們的跨域問題了。

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
         pathRewrite: {
          "^/api": ""
        },
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

target：表示的是代理到的目標地址，比如 /api會被代理到 http://localhost:8888/api

pathRewrite：預設情況下，我們的 /api 也會被寫入到URL中，即：http://localhost:8888/api, 如果希望刪除，可以使用pathRewrite；

secure： 預設情況下，將不接受在 HTTPS 上執行且證書無效的後端伺服器。如果希望支援，可以設定為false；

changeOrigin：它表示是否更新代理後請求的headers中host地址,一般設定為true

五. historyApiFallback

historyApiFallback是開發中一個非常常見的屬性，它主要的作用是解決SPA頁面在路由跳轉之後，進行頁面重新整理時，返回404的錯誤。

設定 boolean值：預設是false

module.exports = {
  devServer: {
  //如果設定為true，那麼在重新整理時，返回404錯誤時，會自動返回 index.html 的內容； 
    historyApiFallback: true,
  },
};

設定 object型別的值，設定rewrites屬性： 可以設定from來匹配路徑，決定要跳轉到哪一個頁面；

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^/$/, to: '/views/landing.html' },
        { from: /^/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },
};

devServer中實現historyApiFallback功能是通過connect-history-api-fallback庫的： For more options and information,檢視 connect-history-api-fallback 檔案

以上就是webpack5之devServer的常用設定詳解的詳細內容，更多關於webpack5 devServer設定的資料請關注it145.com其它相關文章！