前言

devServer是為開(kāi)發(fā)過(guò)程中, 開(kāi)啟的一個(gè)本地服務(wù),在此總結(jié)一些常用的配置。供大家學(xué)習(xí)，相互成長(zhǎng)，相互進(jìn)步！

一. contentBase

devServer中contentBase對(duì)于我們直接訪問(wèn)打包后的資源其實(shí)并沒(méi)有太大的作用，但如果我們打包后的資源，又依賴于其他的一些資源，那么就需要指定從哪里來(lái)查找這個(gè)內(nèi)容，這時(shí)候就需要配置contentBase

舉例：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的輸出目錄
    path: path.resolve(__dirname, "./build"),
    publicPath: "/abc",
  },
  // 專門為webpack-dev-server
  // devServer為開(kāi)發(fā)過(guò)程中, 開(kāi)啟一個(gè)本地服務(wù)
  devServer: {
    publicPath: "/abc",
    }
  }

如上方圖所示設(shè)置"./why/abc.js"，但是這樣webpack serve打包后瀏覽器是無(wú)法通過(guò)相對(duì)路徑去找到這個(gè)文件夾的

所以應(yīng)設(shè)置為如下：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的輸出目錄
    path: path.resolve(__dirname, "./build"),
    publicPath: "/abc",
  },
  // 專門為webpack-dev-server
  // devServer為開(kāi)發(fā)過(guò)程中, 開(kāi)啟一個(gè)本地服務(wù)
  devServer: {
**    contentBase: path.resolve(__dirname, "./why"),
**    watchContentBase: true, //實(shí)時(shí)監(jiān)聽(tīng)contentBase文件變化
    publicPath: "/abc",
   }
  }

二. hotOnly、hot、host配置

1. hotOnly、hot

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

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

啟用熱模塊替換功能，在構(gòu)建失敗時(shí)不刷新頁(yè)面作為回退，使用 hot: 'only' 或hotOnly：true：

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

2. host設(shè)置主機(jī)地址

默認(rèn)值是localhost； 如果希望其他地方也可以訪問(wèn)，可以設(shè)置為 0.0.0.0；

提示： localhost 和 0.0.0.0 的區(qū)別：

localhost：本質(zhì)上是一個(gè)域名，通常情況下會(huì)被解析成127.0.0.1;

127.0.0.1：回環(huán)地址(Loop Back Address)，表達(dá)的意思其實(shí)是我們主機(jī)自己發(fā)出去的包，直接被自己接收;

• 正常的數(shù)據(jù)庫(kù)包經(jīng)常 應(yīng)用層 - 傳輸層 - 網(wǎng)絡(luò)層 - 數(shù)據(jù)鏈路層 - 物理層 ;
• 而回環(huán)地址，是在網(wǎng)絡(luò)層直接就被獲取到了，是不會(huì)經(jīng)常數(shù)據(jù)鏈路層和物理層的;
• 比如我們監(jiān)聽(tīng) 127.0.0.1時(shí)，在同一個(gè)網(wǎng)段下的主機(jī)中，通過(guò)ip地址是不能訪問(wèn)的;

0.0.0.0：監(jiān)聽(tīng)I(yíng)PV4上所有的地址，再根據(jù)端口找到不同的應(yīng)用程序;

• 比如我們監(jiān)聽(tīng) 0.0.0.0時(shí)，在同一個(gè)網(wǎng)段下的主機(jī)中，通過(guò)ip地址是可以訪問(wèn)的

三. port、open、compress

port:設(shè)置監(jiān)聽(tīng)的端口，默認(rèn)情況下是8080,不能設(shè)置為null,可以設(shè)置自動(dòng)為auto

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

open:告訴 dev-server 在服務(wù)器已經(jīng)啟動(dòng)后打開(kāi)瀏覽器。設(shè)置其為 true 以打開(kāi)你的默認(rèn)瀏覽器。

module.exports = {
  //...
  devServer: {
    open: true,
    //在瀏覽器中打開(kāi)指定頁(yè)面：open: ['/my-page']
    //提供要使用的瀏覽器名稱，而不是默認(rèn)名稱
  // open: {
      //   app: {
      //  name: 'google-chrome',
    //  },
   // },
  },
};

compress:是否為靜態(tài)文件開(kāi)啟gzip compression：

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

四. Proxy代理

Proxy是我們開(kāi)發(fā)中非常常用的一個(gè)配置選項(xiàng)，它的目的設(shè)置代理來(lái)解決跨域訪問(wèn)的問(wèn)題。

舉例：

我們的一個(gè)api請(qǐng)求是 http://localhost:8888，但是本地啟動(dòng)服務(wù)器的域名是 http://localhost:8000， 這個(gè)時(shí)候發(fā)送網(wǎng)絡(luò)請(qǐng)求就會(huì)出現(xiàn)跨域的問(wèn)題。 所以將請(qǐng)求先發(fā)送到一個(gè)代理服務(wù)器，代理服務(wù)器和API服務(wù)器沒(méi)有跨域的問(wèn)題，就可以解決我們的跨域問(wèn)題了。

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

target：表示的是代理到的目標(biāo)地址，比如 /api會(huì)被代理到 http://localhost:8888/api

pathRewrite：默認(rèn)情況下，我們的 /api 也會(huì)被寫入到URL中，即：http://localhost:8888/api, 如果希望刪除，可以使用pathRewrite；

secure： 默認(rèn)情況下，將不接受在 HTTPS 上運(yùn)行且證書無(wú)效的后端服務(wù)器。 如果希望支持，可以設(shè)置為false；

changeOrigin：它表示是否更新代理后請(qǐng)求的headers中host地址,一般設(shè)置為true

五. historyApiFallback

historyApiFallback是開(kāi)發(fā)中一個(gè)非常常見(jiàn)的屬性，它主要的作用是解決SPA頁(yè)面在路由跳轉(zhuǎn)之后，進(jìn)行頁(yè)面刷新 時(shí)，返回404的錯(cuò)誤。

• 配置 boolean值：默認(rèn)是false

module.exports = {
  devServer: {
  //如果設(shè)置為true，那么在刷新時(shí)，返回404錯(cuò)誤時(shí)，會(huì)自動(dòng)返回 index.html 的內(nèi)容； 
    historyApiFallback: true,
  },
};

• 配置 object類型的值，設(shè)置rewrites屬性： 可以配置from來(lái)匹配路徑，決定要跳轉(zhuǎn)到哪一個(gè)頁(yè)面；

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

devServer中實(shí)現(xiàn)historyApiFallback功能是通過(guò)connect-history-api-fallback庫(kù)的： For more options and information,查看 connect-history-api-fallback 文檔

以上就是webpack5之devServer的常用配置詳解的詳細(xì)內(nèi)容，更多關(guān)于webpack5 devServer配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論