真人做人试看60分钟免费视频,亚洲综合日韩久久成人av,伊人亚洲综合网

webpack-dev-server 可用于快速開發(fā)應(yīng)用程序。請查閱開發(fā)指南開始使用。

當(dāng)前頁面記錄了影響 webpack-dev-server (簡寫: dev-server) version >= 4.0.0 配置的選項(xiàng)?？梢栽?這里找到 v3 到 v4 的遷移指南

Warning

webpack-dev-server v4.0.0+ 要求 node >= v12.13.0、webpack >= v4.37.0（但是我們推薦使用 webpack >= v5.0.0）和 webpack-cli >= v4.7.0。

devServer

object

通過 webpack-dev-server 的這些配置，能夠以多種方式改變其行為。這是一個(gè)基本的示例，利用 gzips 壓縮 public/ 目錄當(dāng)中的所有內(nèi)容并提供一個(gè)本地服務(wù)(serve)：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

當(dāng)服務(wù)(server)啟動(dòng)后，在解析模塊列表之前輸出一條消息：

 [webpack-dev-server] Project is running at:
 [webpack-dev-server] Loopback: http://localhost:9000/
 [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
 [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
 [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory

這里將會(huì)給出服務(wù)啟動(dòng)位置以及內(nèi)容的一些基本信息。

如果你通過 Node.js API 使用 dev-server，則 devServer 中的配置選項(xiàng)將被忽略。但可以將配置選項(xiàng)作為第一個(gè)參數(shù)傳入：new WebpackDevServer({...}, compiler)。此示例展示了如何通過 Node.js API 使用 webpack-dev-server。

Warning

使用 WebpackDevServer 時(shí)，不能使用第二個(gè) compiler 參數(shù)（一個(gè)回調(diào)）。

Warning

請注意，當(dāng)導(dǎo)出多個(gè)配置對象時(shí)，只會(huì)使用 devServer 的第一個(gè)配置選項(xiàng)，并將其應(yīng)用于所有的配置當(dāng)中。

Tip

如果你碰到了問題，請將路由導(dǎo)航至 /webpack-dev-server 將會(huì)為你展示服務(wù)文件的位置。例如： http://localhost:9000/webpack-dev-server。

Tip

如果你需要要手動(dòng)重新編譯 bundle，將路由導(dǎo)航至 /webpack-dev-server/invalidate 使當(dāng)前編譯的 bundle 無效，并通過 webpack-dev-middleware 為你重新編譯。根據(jù)你的配置，URL 可能看起來像 http://localhost:9000/webpack-dev-server/invalidate。

Tip

當(dāng)啟動(dòng)本地服務(wù)的時(shí)候 HTML 模板是必須提供的，通常是 index.html。確保將腳本引用添加到 HTML 中，webpack-dev-server 不會(huì)自動(dòng)注入它們。

Usage via CLI

你可以通過 CLI 調(diào)用 webpack-dev-server，方式是：

npx webpack serve

CLI 配置項(xiàng)列表可以在這里查詢。

Usage via API

雖然推薦通過 CLI 運(yùn)行 webpack-dev-server，但是你也可以通過 API 來啟用服務(wù)器。

查看相關(guān)的 webpack-dev-server API 文檔。

devServer.allowedHosts

'auto' | 'all' [string]

該選項(xiàng)允許將允許訪問開發(fā)服務(wù)器的服務(wù)列入白名單。

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};

模仿 django 的ALLOWED_HOSTS，用 . 作為子域通配符。.host.com 會(huì)與 host.com，www.host.com 以及 host.com 等其他任何其他子域匹配。

webpack.config.js

module.exports = {
  //...
  devServer: {
    // this achieves the same effect as the first example
    // with the bonus of not having to update your config
    // if new subdomains need to access the dev server
    allowedHosts: ['.host.com', 'host2.com'],
  },
};

通過 CLI 使用：

npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

當(dāng)設(shè)置為 'all' 時(shí)會(huì)跳過 host 檢查。并不推薦這樣做，因?yàn)椴粰z查 host 的應(yīng)用程序容易受到 DNS 重綁定攻擊。

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',
  },
};

通過 CLI 使用：

npx webpack serve --allowed-hosts all

當(dāng)設(shè)置為 'auto' 時(shí)，此配置項(xiàng)總是允許 localhost、 host 和 client.webSocketURL.hostname：

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'auto',
  },
};

通過 CLI 使用：

npx webpack serve --allowed-hosts auto

devServer.bonjour

boolean = false object

這個(gè)配置用于在啟動(dòng)時(shí)通過 ZeroConf 網(wǎng)絡(luò)廣播你的開發(fā)服務(wù)器。

webpack.config.js

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

通過命令行使用：

npx webpack serve --bonjour

如需禁用：

npx webpack serve --no-bonjour

你也可以為 bonjour 設(shè)置自定義配置項(xiàng)，例如：

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: {
      type: 'http',
      protocol: 'udp',
    },
  },
};

devServer.client

logging

允許在瀏覽器中設(shè)置日志級(jí)別，例如在重載之前，在一個(gè)錯(cuò)誤之前或者熱模塊替換啟用時(shí)。

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      logging: 'info',
    },
  },
};

通過命令行使用：

npx webpack serve --client-logging info

overlay

boolean = true object: { errors boolean = true, warnings boolean = true }

當(dāng)出現(xiàn)編譯錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋。

webpack.config.js

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

通過命令行使用：

npx webpack serve --client-overlay

如需禁用：

npx webpack serve --no-client-overlay

如果你只想顯示錯(cuò)誤信息：

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },
};

通過命令行使用：

npx webpack serve --client-overlay-errors --no-client-overlay-warnings

progress

boolean

在瀏覽器中以百分比顯示編譯進(jìn)度。

webpack.config.js

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

通過命令行使用：

npx webpack serve --client-progress

如需禁用：

npx webpack serve --no-client-progress

reconnect

boolean = true numberv4.4.0+

告訴 dev-server 它應(yīng)該嘗試重新連接客戶端的次數(shù)。當(dāng)為 true 時(shí)，它將無限次嘗試重新連接。

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --client-reconnect

當(dāng)設(shè)置為 false 時(shí)，它將不會(huì)嘗試連接。

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: false,
    },
  },
};

通過 CLI 使用：

npx webpack serve --no-client-reconnect

您還可以指定客戶端應(yīng)該嘗試重新連接的確切次數(shù)。

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: 5,
    },
  },
};

通過 CLI 使用：

npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' string

該配置項(xiàng)允許我們?yōu)榭蛻舳藛为?dú)選擇當(dāng)前的 devServer 傳輸模式，或者提供自定義的客戶端實(shí)現(xiàn)。這允許指定瀏覽器或其他客戶端與 devServer 的通信方式。

Tip

為 webSocketServer 設(shè)置 'ws' 或者 'sockjs' 是一個(gè)設(shè)置 devServer.client.webSocketTransport 和 devServer.webSocketServer 的快捷方式。

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: 'ws',
  },
};

通過命令行使用：

npx webpack serve --client-web-socket-transport ws --web-socket-server ws

Tip

在提供自定義客戶端和服務(wù)器實(shí)現(xiàn)時(shí)，要確保它們彼此兼容，以成功通信。

創(chuàng)建一個(gè)自定義客戶端實(shí)現(xiàn)，創(chuàng)建一個(gè)類拓展 BaseClient。

使用 CustomClient.js 的路徑，一個(gè)自定義 WebSocket 客戶端實(shí)現(xiàn)，連同兼容的 'ws' 服務(wù)器：

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: 'ws',
  },
};

使用自定義且兼容的 WebSocket 客戶端和服務(wù)端實(shí)現(xiàn)：

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

webSocketURL

string object

這個(gè)選項(xiàng)允許指定 URL 到 web socket 服務(wù)器（當(dāng)你代理開發(fā)服務(wù)器和客戶端腳本不總是知道連接到哪里時(shí)很有用）。

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws',
    },
  },
};

通過命令行使用：

npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws

您還可以指定具有以下屬性的對象：

hostname: 告訴連接到 devServer 的客戶端使用提供的 hostname 進(jìn)行連接。
pathname: 告訴連接到 devServer 的客戶端使用提供的路徑進(jìn)行連接。
password: 告訴連接到 devServer 的客戶端使用提供的密碼進(jìn)行認(rèn)證。
port: 告訴連接到 devServer 的客戶端使用提供的端口進(jìn)行連接。
protocol: 告訴連接到 devServer 的客戶端使用提供的協(xié)議進(jìn)行連接。
username: 告訴連接到 devServer 的客戶端使用提供的用戶名進(jìn)行認(rèn)證。

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: {
        hostname: '0.0.0.0',
        pathname: '/ws',
        password: 'dev-server',
        port: 8080,
        protocol: 'ws',
        username: 'webpack',
      },
    },
  },
};

Tip

要從瀏覽器中獲取 protocol/hostname/port，請使用 webSocketURL: 'auto://0.0.0.0:0/ws'。

devServer.compress

boolean = true

啟用 gzip compression：

webpack.config.js

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

通過命令行使用：

npx webpack serve --compress

如需禁用

npx webpack serve --no-compress

devServer.devMiddleware

object

為 webpack-dev-middleware 提供處理 webpack 資源的配置項(xiàng)。

webpack.config.js

module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: 'text/html' },
      publicPath: '/publicPathForDevServe',
      serverSideRender: true,
      writeToDisk: true,
    },
  },
};

devServer.http2

boolean

使用 spdy 提供 HTTP/2 服務(wù)。對于 Node 15.0.0 及更高版本，此選項(xiàng)將被忽略，因?yàn)?spdy 在這些版本中已被破壞。一旦 Express 支持，開發(fā)服務(wù)器將遷移到 Node 內(nèi)置的 HTTP/2。

HTTP/2 帶有自簽名證書：

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --http2

禁用：

npx webpack serve --no-http2

通過 https 配置你自己的證書文件：

webpack.config.js

const fs = require('fs');

module.exports = {
  //...
  devServer: {
    http2: true,
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    },
  },
};

要通過 CLI 使用你的證書，請使用以下配置項(xiàng)：

npx webpack serve --http2 --https-key ./path/to/server.key --https-cert ./path/to/server.crt --https-ca ./path/to/ca.pem

Warning

此配置項(xiàng)已被棄用，以支持 devServer.server。

devServer.https

boolean object

默認(rèn)情況下，開發(fā)服務(wù)器將通過 HTTP 提供服務(wù)?？梢赃x擇使用 HTTPS 提供服務(wù)：

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --https

禁用：

npx webpack serve --no-https

根據(jù)上述配置，將使用自簽名證書，但是你也可以提供自己的證書：

webpack.config.js

module.exports = {
  devServer: {
    https: {
      ca: './path/to/server.pem',
      pfx: './path/to/server.pfx',
      key: './path/to/server.key',
      cert: './path/to/server.crt',
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

該對象直接傳遞到 Node.js HTTPS 模塊，因此請參閱 HTTPS documentation 以獲取更多信息。

要通過 CLI 使用自己的證書，請使用以下選項(xiàng)：

npx webpack serve --https-request-cert --https-key ./path/to/server.key --https-cert ./path/to/server.crt --https-ca ./path/to/ca.pem --https-pfx ./path/to/server.pfx --https-passphrase webpack-dev-server

webpack-dev-server >= v4.2.0 允許你設(shè)置額外的 TLS 配置項(xiàng)，比如 minVersion。同樣你可以直接傳遞各自文件的內(nèi)容：

webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    https: {
      minVersion: 'TLSv1.1',
      key: fs.readFileSync(path.join(__dirname, './server.key')),
      pfx: fs.readFileSync(path.join(__dirname, './server.pfx')),
      cert: fs.readFileSync(path.join(__dirname, './server.crt')),
      ca: fs.readFileSync(path.join(__dirname, './ca.pem')),
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

Warning

不要同時(shí)指定 https.ca 與 https.cacert 配置項(xiàng)，如果指定的話將會(huì)使用 https.ca。https.cacert 已棄用并且將會(huì)在下個(gè)主要版本中被移除。

Warning

該配置項(xiàng)已棄用，以支持 devServer.server。

devServer.headers

array function object

為所有響應(yīng)添加 headers：

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar',
    },
  },
};

你也可以傳遞一個(gè)數(shù)組：

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: [
      {
        key: 'X-Custom',
        value: 'foo',
      },
      {
        key: 'Y-Custom',
        value: 'bar',
      },
    ],
  },
};

你也可以傳遞一個(gè)函數(shù)：

module.exports = {
  //...
  devServer: {
    headers: () => {
      return { 'X-Bar': ['key1=value1', 'key2=value2'] };
    },
  },
};

devServer.historyApiFallback

boolean = false object

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true:

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --history-api-fallback

禁用：

npx webpack serve --no-history-api-fallback

通過提供一個(gè)對象，這種行為可以通過像 rewrites 這樣的配置項(xiàng)進(jìn)一步控制：

webpack.config.js

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

在你的路徑中使用點(diǎn)（與 Angular 相同），你可能需要使用 disableDotRule：

webpack.config.js

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

For more options and information, see the connect-history-api-fallback documentation.

devServer.host

'local-ip' | 'local-ipv4' | 'local-ipv6' string

指定要使用的 host。如果你想讓你的服務(wù)器可以被外部訪問，像這樣指定：

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};

通過命令行使用：

npx webpack serve --host 0.0.0.0

這也適用于 IPv6：

npx webpack serve --host ::

local-ip

Specifying local-ip as host will try to resolve the host option as your local IPv4 address if available, if IPv4 is not available it will try to resolve your local IPv6 address.

npx webpack serve --host local-ip

local-ipv4

Specifying local-ipv4 as host will try to resolve the host option as your local IPv4 address.

npx webpack serve --host local-ipv4

local-ipv6

指定 local-ipv6 作為主機(jī)將嘗試將主機(jī)選項(xiàng)解析為您的本地 IPv6 地址。

npx webpack serve --host local-ipv6

devServer.hot

'only' boolean = true

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

webpack.config.js

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

通過命令行使用：

npx webpack serve --hot

如需禁用：

npx webpack serve --no-hot

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

webpack.config.js

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

通過命令行使用：

npx webpack serve --hot only

Tip

從 webpack-dev-server v4 開始，HMR 是默認(rèn)啟用的。它會(huì)自動(dòng)應(yīng)用 webpack.HotModuleReplacementPlugin，這是啟用 HMR 所必需的。因此當(dāng) hot 設(shè)置為 true 或者通過 CLI 設(shè)置 --hot，你不需要在你的 webpack.config.js 添加該插件。查看 HMR concepts page 以獲取更多信息。

devServer.ipc

true string

The Unix socket to listen to (instead of a host).

將其設(shè)置為 true 將會(huì)監(jiān)聽 /your-os-temp-dir/webpack-dev-server.sock 的 socket：

webpack.config.js

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

通過命令行使用：

npx webpack serve --ipc

你也可以這樣監(jiān)聽一個(gè)不同的 socket：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    ipc: path.join(__dirname, 'my-socket.sock'),
  },
};

devServer.liveReload

boolean = true

默認(rèn)情況下，當(dāng)監(jiān)聽到文件變化時(shí) dev-server 將會(huì)重新加載或刷新頁面。為了 liveReload 能夠生效，devServer.hot 配置項(xiàng)必須禁用或者 devServer.watchFiles 配置項(xiàng)必須啟用。將其設(shè)置為 false 以禁用 devServer.liveReload：

webpack.config.js

module.exports = {
  //...
  devServer: {
    liveReload: false,
  },
};

通過命令行使用：

npx webpack serve --live-reload

禁用該功能：

npx webpack serve --no-live-reload

Warning

熱加載僅對像 web、webworker、electron-renderer 和 node-webkit 的 targets 生效。

devServer.magicHtml

boolean = truev4.1.0+

Tell dev-server to enable/disable magic HTML routes (routes corresponding to your webpack output, for example /main for main.js).

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --magic-html

禁用：

npx webpack serve --no-magic-html

devServer.onAfterSetupMiddleware

function (devServer)

提供服務(wù)器內(nèi)部在所有其他中間件之后執(zhí)行自定義中間件的能力

webpack.config.js

module.exports = {
  //...
  devServer: {
    onAfterSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/some/path', function (req, res) {
        res.json({ custom: 'response' });
      });
    },
  },
};

Warning

該配置項(xiàng)已棄用，以支持 devServer.setupMiddlewares。

devServer.onBeforeSetupMiddleware

function (devServer)

提供在服務(wù)器內(nèi)部執(zhí)行所有其他中間件之前執(zhí)行自定義中間件的能力。這可以用來定義自定義處理程序，例如:

webpack.config.js

module.exports = {
  //...
  devServer: {
    onBeforeSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/some/path', function (req, res) {
        res.json({ custom: 'response' });
      });
    },
  },
};

Warning

該配置項(xiàng)已棄用，以支持 devServer.setupMiddlewares。

devserver.onListening

function (devServer)

提供在 webpack-dev-server 開始監(jiān)聽端口連接時(shí)執(zhí)行自定義函數(shù)的能力。

webpack.config.js

module.exports = {
  //...
  devServer: {
    onListening: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      const port = devServer.server.address().port;
      console.log('Listening on port:', port);
    },
  },
};

devServer.open

boolean string object [string, object]

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

webpack.config.js

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

通過命令行使用：

npx webpack serve --open

如需禁用：

npx webpack serve --no-open

在瀏覽器中打開指定頁面：

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page'],
  },
};

通過命令行使用：

npx webpack serve --open /my-page

在瀏覽器中打開多個(gè)指定頁面：

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page', '/another-page'],
  },
};

通過命令行使用：

npx webpack serve --open /my-page --open /another-page

提供要使用的瀏覽器名稱，而不是默認(rèn)名稱：

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      app: {
        name: 'google-chrome',
      },
    },
  },
};

通過命令行使用：

npx webpack serve --open-app-name 'google-chrome'

該對象接收所有 open 配置項(xiàng)：

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      target: ['first.html', 'http://localhost:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },
  },
};

Tip

瀏覽器應(yīng)用程序名稱與平臺(tái)相關(guān)。不要在可重用模塊中硬編碼它。例如，'Chrome' 在 macOS 是 'Google Chrome'，在 Linux 是 'google-chrome'，在 Windows 是 'chrome'。

devServer.port

'auto' string number

指定監(jiān)聽請求的端口號(hào)：

webpack.config.js

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

通過命令行使用：

npx webpack serve --port 8080

port 配置項(xiàng)不能設(shè)置為 null 或者空字符串，要想自動(dòng)使用一個(gè)可用端口請使用 port: 'auto'：

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --port auto

devServer.proxy

object [object, function]

當(dāng)擁有單獨(dú)的 API 后端開發(fā)服務(wù)器并且希望在同一域上發(fā)送 API 請求時(shí)，代理某些 URL 可能會(huì)很有用。

開發(fā)服務(wù)器使用功能強(qiáng)大的 http-proxy-middleware 軟件包。查看其 documentation 了解更多高級(jí)用法。請注意，http-proxy-middleware 的某些功能不需要target鍵，例如它的 router 功能，但是仍然需要在此處的配置中包含target，否則webpack-dev-server 不會(huì)將其傳遞給 http-proxy-middleware。

使用后端在 localhost:3000 上，可以使用它來啟用代理：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

現(xiàn)在，對 /api/users 的請求會(huì)將請求代理到 http://localhost:3000/api/users。

如果不希望傳遞/api，則需要重寫路徑：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

默認(rèn)情況下，將不接受在 HTTPS 上運(yùn)行且證書無效的后端服務(wù)器。如果需要，可以這樣修改配置：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};

有時(shí)不想代理所有內(nèi)容。可以基于函數(shù)的返回值繞過代理。

在該功能中，可以訪問請求，響應(yīng)和代理選項(xiàng)。

返回 null 或 undefined 以繼續(xù)使用代理處理請求。
返回 false 會(huì)為請求產(chǎn)生 404 錯(cuò)誤。
返回提供服務(wù)的路徑，而不是繼續(xù)代理請求。

例如。對于瀏覽器請求，想要提供 HTML 頁面，但是對于 API 請求，想要代理它。可以執(zhí)行以下操作：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};

如果想將多個(gè)特定路徑代理到同一目標(biāo)，則可以使用一個(gè)或多個(gè)帶有 context 屬性的對象的數(shù)組：

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

請注意，默認(rèn)情況下不會(huì)代理對 root 的請求。要啟用根代理，應(yīng)將 devMiddleware.index 選項(xiàng)指定為虛假值：

webpack.config.js

module.exports = {
  //...
  devServer: {
    devMiddleware: {
      index: false, // specify to enable root proxying
    },
    proxy: {
      context: () => true,
      target: 'http://localhost:1234',
    },
  },
};

默認(rèn)情況下，代理時(shí)會(huì)保留主機(jī)頭的來源，可以將 changeOrigin 設(shè)置為 true 以覆蓋此行為。在某些情況下，例如使用 name-based virtual hosted sites，它很有用。

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

devServer.server

'http' | 'https' | 'spdy' string objectv4.4.0+

允許設(shè)置服務(wù)器和配置項(xiàng)（默認(rèn)為 'http'）。

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'http',
  },
};

通過 CLI 使用：

npx webpack serve --server-type http

使用自簽名證書通過 HTTPS 提供服務(wù)：

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'https',
  },
};

通過 CLI 使用：

npx webpack serve --server-type https

使用 spdy 使用自簽名證書通過 HTTP/2 提供服務(wù)：

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'spdy',
  },
};

通過 CLI 使用：

npx webpack serve --server-type spdy

Warning

該配置項(xiàng)在 Node 15.0.0 及以上的版本會(huì)被忽略，因?yàn)?spdy 在這些版本中不會(huì)正常工作。一旦 Express 支持 Node 內(nèi)建 HTTP/2，dev server 會(huì)進(jìn)行遷移。

使用對象語法提供自己的證書：

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        ca: './path/to/server.pem',
        pfx: './path/to/server.pfx',
        key: './path/to/server.key',
        cert: './path/to/server.crt',
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

通過 CLI 使用：

npx webpack serve --server-type https --server-options-key ./path/to/server.key --server-options-cert ./path/to/server.crt --server-options-ca ./path/to/ca.pem --server-options-passphrase webpack-dev-server

It also allows you to set additional TLS options like minVersion and you can directly pass the contents of respective files:

webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        minVersion: 'TLSv1.1',
        key: fs.readFileSync(path.join(__dirname, './server.key')),
        pfx: fs.readFileSync(path.join(__dirname, './server.pfx')),
        cert: fs.readFileSync(path.join(__dirname, './server.crt')),
        ca: fs.readFileSync(path.join(__dirname, './ca.pem')),
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

Warning

如果指定的 server.options.ca 將會(huì)被使用的話，不要同時(shí)指定 server.options.ca 與 server.options.cacert 配置項(xiàng)。server.options.cacert 已棄用并且會(huì)在下一個(gè)大版本中移除。

devServer.setupExitSignals

boolean = true

允許在 SIGINT 和 SIGTERM 信號(hào)時(shí)關(guān)閉開發(fā)服務(wù)器和退出進(jìn)程。

webpack.config.js

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

devServer.setupMiddlewares

function (middlewares, devServer)v4.7.0+

提供執(zhí)行自定義函數(shù)和應(yīng)用自定義中間件的能力。

webpack.config.js

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/setup-middleware/some/path', (_, response) => {
        response.send('setup-middlewares option GET');
      });

      // 如果你想在所有其他中間件之前運(yùn)行一個(gè)中間件或者當(dāng)你從 `onBeforeSetupMiddleware` 配置項(xiàng)遷移時(shí)，
      // 可以使用 `unshift` 方法
      middlewares.unshift({
        name: 'first-in-array',
        // `path` 是可選的
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // 如果你想在所有其他中間件之后運(yùn)行一個(gè)中間件或者當(dāng)你從 `onAfterSetupMiddleware` 配置項(xiàng)遷移時(shí)，
      // 可以使用 `push` 方法
      middlewares.push({
        name: 'hello-world-test-one',
        // `path` 是可選的
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

      middlewares.push((req, res) => {
        res.send('Hello World!');
      });

      return middlewares;
    },
  },
};

devServer.static

boolean string object [string, object]

該配置項(xiàng)允許配置從目錄提供靜態(tài)文件的選項(xiàng)（默認(rèn)是 'public' 文件夾）。將其設(shè)置為 false 以禁用：

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: false,
  },
};

通過 CLI 使用：

npx webpack serve --static

禁用該功能：

npx webpack serve --no-static

監(jiān)聽單個(gè)目錄：

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets'],
  },
};

通過 CLI 使用：

npx webpack serve --static assets

監(jiān)聽多個(gè)靜態(tài)資源目錄：

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets', 'css'],
  },
};

通過 CLI 使用：

npx webpack serve --static assets --static css

staticOptions

object

可以配置從 static.directory 提供靜態(tài)文件的高級(jí)選項(xiàng)。關(guān)于可用配置項(xiàng)可以插件 Express 文檔。

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: {
      staticOptions: {
        redirect: true,
      },
    },
  },
};

publicPath

string = '/' [string]

告訴服務(wù)器在哪個(gè) URL 上提供 static.directory 的內(nèi)容。例如為在 /serve-public-path-url/manifest.json 中的 assets/manifest.json 提供服務(wù)，你的配置項(xiàng)應(yīng)該像下面這樣：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'assets'),
      publicPath: '/serve-public-path-url',
    },
  },
};

提供一個(gè)對象數(shù)組，以防你有多個(gè)靜態(tài)文件夾：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
        publicPath: '/serve-public-path-url',
      },
      {
        directory: path.join(__dirname, 'css'),
        publicPath: '/other-serve-public-path-url',
      },
    ],
  },
};

serveIndex

boolean object = { icons: true }

告訴開發(fā)服務(wù)器啟用后使用 serveIndex 中間件。

serveIndex 中間件會(huì)在查看沒有 index.html 文件的目錄時(shí)生成目錄列表。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      serveIndex: true,
    },
  },
};

通過 CLI 使用：

npx webpack serve --static-serve-index

禁用該功能：

npx webpack serve --no-static-serve-index

watch

boolean object

通過 static.directory 配置項(xiàng)告訴 dev-server 監(jiān)聽文件。默認(rèn)啟用，文件更改將觸發(fā)整個(gè)頁面重新加載?？梢酝ㄟ^將 watch 設(shè)置為 false 禁用。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: false,
    },
  },
};

通過 CLI 使用：

npx webpack serve --static-watch

禁用該功能：

npx webpack serve --no-static-watch

可以配置高級(jí)選項(xiàng)以監(jiān)聽 static.directory 中的靜態(tài)文件。關(guān)于可用選項(xiàng)可以查看 chokidar 文檔。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: {
        ignored: '*.txt',
        usePolling: false,
      },
    },
  },
};

devServer.watchFiles

string object [string, object]

該配置項(xiàng)允許你配置 globs/directories/files 來監(jiān)聽文件變化。例如：

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*.php', 'public/**/*'],
  },
};

可以配置高級(jí)選項(xiàng)來監(jiān)聽文件。關(guān)于可用選項(xiàng)可以查看 chokidar 文檔。

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: {
      paths: ['src/**/*.php', 'public/**/*'],
      options: {
        usePolling: false,
      },
    },
  },
};

devServer.webSocketServer

false | 'sockjs' | 'ws' string function object

該配置項(xiàng)允許我們選擇當(dāng)前的 web-socket 服務(wù)器或者提供自定義的 web-socket 服務(wù)器實(shí)現(xiàn)。

當(dāng)前默認(rèn)模式為 'ws'。該模式使用 ws 作為服務(wù)器，客戶端中的 WebSockets。

webpack.config.js

module.exports = {
  //...
  devServer: {
    webSocketServer: 'ws',
  },
};

為了創(chuàng)建一個(gè)自定義服務(wù)端實(shí)現(xiàn)，可以創(chuàng)建一個(gè)拓展 BaseServer 的類。

使用 CustomServer.js 導(dǎo)出的類實(shí)現(xiàn)自定義 WebSocket 客戶端并兼容ws服務(wù)端：

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

使用自定義且兼容的 WebSocket 客戶端以及服務(wù)端實(shí)現(xiàn)：

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

宅男在线永久免费观看网直播,亚洲欧洲日产国码无码久久99,野花社区在线观看视频,亚洲人交乣女bbw,一本一本久久a久久精品综合不卡

DevServer | webpack 中文文檔

devServer

Usage via CLI

Usage via API

devServer.allowedHosts

devServer.bonjour

devServer.client

logging

overlay

progress

reconnect

webSocketTransport

webSocketURL

devServer.compress

devServer.devMiddleware

devServer.http2

devServer.https

devServer.headers

devServer.historyApiFallback

devServer.host

local-ip

local-ipv4

local-ipv6

devServer.hot

devServer.ipc

devServer.liveReload

devServer.magicHtml

devServer.onAfterSetupMiddleware

devServer.onBeforeSetupMiddleware

devserver.onListening

devServer.open

devServer.port

devServer.proxy

devServer.server

devServer.setupExitSignals

devServer.setupMiddlewares

devServer.static

directory

staticOptions

publicPath

serveIndex

watch

devServer.watchFiles

devServer.webSocketServer