中文在线天堂,野花韩国高清视频

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

當(dāng)前頁面記錄了影響 webpack-dev-server (簡寫: dev-server) version >= 4.0.0 配置的選項?？梢栽?這里找到 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 的這些配置，能夠以多種方式改變其行為。這是一個基本的示例，利用 gzips 壓縮 public/ 目錄當(dāng)中的所有內(nèi)容并提供一個本地服務(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)啟動后，在解析模塊列表之前輸出一條消息：

 [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

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

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

Warning

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

Warning

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

Tip

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

Tip

如果你需要要手動重新編譯 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)啟動本地服務(wù)的時候 HTML 模板是必須提供的，通常是 index.html。確保將腳本引用添加到 HTML 中，webpack-dev-server 不會自動注入它們。

Usage via CLI

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

npx webpack serve

CLI 配置項列表可以在這里查詢。

Usage via API

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

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

devServer.allowedHosts

'auto' | 'all' [string]

該選項允許將允許訪問開發(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 會與 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' 時會跳過 host 檢查。并不推薦這樣做，因為不檢查 host 的應(yīng)用程序容易受到 DNS 重綁定攻擊。

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --allowed-hosts all

當(dāng)設(shè)置為 'auto' 時，此配置項總是允許 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

這個配置用于在啟動時通過 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è)置自定義配置項，例如：

webpack.config.js

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

devServer.client

logging

允許在瀏覽器中設(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)編譯錯誤或警告時，在瀏覽器中顯示全屏覆蓋。

webpack.config.js

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

通過命令行使用：

npx webpack serve --client-overlay

如需禁用：

npx webpack serve --no-client-overlay

如果你只想顯示錯誤信息：

webpack.config.js

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

通過命令行使用：

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

progress

boolean

在瀏覽器中以百分比顯示編譯進度。

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 時，它將無限次嘗試重新連接。

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --client-reconnect

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

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

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

Tip

為 webSocketServer 設(shè)置 'ws' 或者 'sockjs' 是一個設(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ù)器實現(xiàn)時，要確保它們彼此兼容，以成功通信。

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

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

webpack.config.js

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

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

webpack.config.js

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

webSocketURL

string object

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

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 進行連接。
pathname: 告訴連接到 devServer 的客戶端使用提供的路徑進行連接。
password: 告訴連接到 devServer 的客戶端使用提供的密碼進行認證。
port: 告訴連接到 devServer 的客戶端使用提供的端口進行連接。
protocol: 告訴連接到 devServer 的客戶端使用提供的協(xié)議進行連接。
username: 告訴連接到 devServer 的客戶端使用提供的用戶名進行認證。

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 資源的配置項。

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 及更高版本，此選項將被忽略，因為 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 使用你的證書，請使用以下配置項：

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

Warning

此配置項已被棄用，以支持 devServer.server。

devServer.https

boolean object

默認情況下，開發(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 使用自己的證書，請使用以下選項：

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 配置項，比如 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

不要同時指定 https.ca 與 https.cacert 配置項，如果指定的話將會使用 https.ca。https.cacert 已棄用并且將會在下個主要版本中被移除。

Warning

該配置項已棄用，以支持 devServer.server。

devServer.headers

array function object

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

webpack.config.js

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

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

webpack.config.js

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

你也可以傳遞一個函數(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

通過提供一個對象，這種行為可以通過像 rewrites 這樣的配置項進一步控制：

webpack.config.js

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

在你的路徑中使用點（與 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 作為主機將嘗試將主機選項解析為您的本地 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)建失敗時不刷新頁面作為回退，使用 hot: 'only'：

webpack.config.js

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

通過命令行使用：

npx webpack serve --hot only

Tip

從 webpack-dev-server v4 開始，HMR 是默認啟用的。它會自動應(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 將會監(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)聽一個不同的 socket：

webpack.config.js

const path = require('path');

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

devServer.liveReload

boolean = true

默認情況下，當(dāng)監(jiān)聽到文件變化時 dev-server 將會重新加載或刷新頁面。為了 liveReload 能夠生效，devServer.hot 配置項必須禁用或者 devServer.watchFiles 配置項必須啟用。將其設(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

該配置項已棄用，以支持 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

該配置項已棄用，以支持 devServer.setupMiddlewares。

devserver.onListening

function (devServer)

提供在 webpack-dev-server 開始監(jiān)聽端口連接時執(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)啟動后打開瀏覽器。設(shè)置其為 true 以打開你的默認瀏覽器。

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

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

webpack.config.js

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

通過命令行使用：

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

提供要使用的瀏覽器名稱，而不是默認名稱：

webpack.config.js

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

通過命令行使用：

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

該對象接收所有 open 配置項：

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)用程序名稱與平臺相關(guān)。不要在可重用模塊中硬編碼它。例如，'Chrome' 在 macOS 是 'Google Chrome'，在 Linux 是 'google-chrome'，在 Windows 是 'chrome'。

devServer.port

'auto' string number

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

webpack.config.js

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

通過命令行使用：

npx webpack serve --port 8080

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

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --port auto

devServer.proxy

object [object, function]

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

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

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

webpack.config.js

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

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

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

webpack.config.js

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

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

webpack.config.js

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

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

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

返回 null 或 undefined 以繼續(xù)使用代理處理請求。
返回 false 會為請求產(chǎn)生 404 錯誤。
返回提供服務(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';
          }
        },
      },
    },
  },
};

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

webpack.config.js

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

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

webpack.config.js

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

默認情況下，代理時會保留主機頭的來源，可以將 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ù)器和配置項（默認為 '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

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

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

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 將會被使用的話，不要同時指定 server.options.ca 與 server.options.cacert 配置項。server.options.cacert 已棄用并且會在下一個大版本中移除。

devServer.setupExitSignals

boolean = true

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

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');
      });

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

      // 如果你想在所有其他中間件之后運行一個中間件或者當(dāng)你從 `onAfterSetupMiddleware` 配置項遷移時，
      // 可以使用 `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]

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

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --static

禁用該功能：

npx webpack serve --no-static

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

webpack.config.js

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

通過 CLI 使用：

npx webpack serve --static assets

監(jiān)聽多個靜態(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)文件的高級選項。關(guān)于可用配置項可以插件 Express 文檔。

webpack.config.js

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

publicPath

string = '/' [string]

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

webpack.config.js

const path = require('path');

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

提供一個對象數(shù)組，以防你有多個靜態(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 中間件會在查看沒有 index.html 文件的目錄時生成目錄列表。

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 配置項告訴 dev-server 監(jiān)聽文件。默認啟用，文件更改將觸發(fā)整個頁面重新加載?？梢酝ㄟ^將 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

可以配置高級選項以監(jiān)聽 static.directory 中的靜態(tài)文件。關(guān)于可用選項可以查看 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]

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

webpack.config.js

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

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

webpack.config.js

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

devServer.webSocketServer

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

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

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

webpack.config.js

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

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

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

webpack.config.js

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

使用自定義且兼容的 WebSocket 客戶端以及服務(wù)端實現(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