Webpack DevServer

2023-05-16 11:04 更新

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

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

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)啟動后，在解析模塊列表之前輸出一條消息：

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
<i> [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。

Usage via CLI

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

npx webpack serve

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

Usage via API

雖然推薦通過 CLI 運(yùn)行 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

?'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'?

允許在瀏覽器中設(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?

在瀏覽器中以百分比顯示編譯進(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 number?

v4.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)榭蛻舳藛为?dú)選擇當(dāng)前的 devServer 傳輸模式，或者提供自定義的客戶端實現(xiàn)。這允許指定瀏覽器或其他客戶端與 devServer 的通信方式。

webpack.config.js 

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

通過命令行使用：

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

創(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 進(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',
      },
    },
  },
};

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

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 使用自己的證書，請使用以下選項：

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,
    },
  },
};

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?

當(dāng)使用HTML5 History API時，通常需要在任何404響應(yīng)的情況下提供index.html頁面。通過將devServer.historyApiFallback設(shè)置為true來啟用該功能。

webpack.config.js 

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

通過 CLI 使用：

npx webpack serve --history-api-fallback

禁用：

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

通過提供一個對象，這種行為可以通過像 rewrites 這樣的配置項進(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,
    },
  },
};

有關(guān)更多選項和信息，請參閱connect-history-api-fallback文檔。

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

如果將host選項指定為local-ip，它將嘗試將host解析為本地IPv4地址（如果可用），如果IPv4不可用，則嘗試解析本地IPv6地址。 

npx webpack serve --host local-ip

local-ipv4

如果將host選項指定為local-ipv4，它將嘗試將host解析為本地IPv4地址。

npx webpack serve --host local-ipv4

local-ipv6

指定 local-ipv6 作為主機(jī)將嘗試將主機(jī)選項解析為您的本地 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

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?

默認(rèn)情況下，當(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

devServer.magicHtml

?boolean = true?

v4.1.0+

告訴dev-server啟用/禁用魔術(shù)HTML路由（與webpack輸出相對應(yīng)的路由，例如/main對應(yīng)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' });
      });
    },
  },
};

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

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 以打開你的默認(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

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

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 配置項：

webpack.config.js 

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

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

開發(fā)服務(wù)器使用功能強(qiáng)大的 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': '' },
      },
    },
  },
};

默認(rèn)情況下，將不接受在 HTTPS 上運(yùn)行且證書無效的后端服務(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',
      },
    ],
  },
};

請注意，默認(rèn)情況下不會代理對 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',
    },
  },
};

默認(rèn)情況下，代理時會保留主機(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 object?

v4.4.0+

允許設(shè)置服務(wù)器和配置項（默認(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

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

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

它還允許您設(shè)置其他TLS選項，如minVersion，并且您可以直接傳遞相應(yīng)文件的內(nèi)容：

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,
      },
    },
  },
};

devServer.setupExitSignals

?boolean = true?

允許在 SIGINT 和 SIGTERM 信號時關(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)行一個中間件或者當(dāng)你從 `onBeforeSetupMiddleware` 配置項遷移時，
      // 可以使用 `unshift` 方法
      middlewares.unshift({
        name: 'first-in-array',
        // `path` 是可選的
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // 如果你想在所有其他中間件之后運(yùn)行一個中間件或者當(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)文件的選項（默認(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)聽單個目錄：

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

directory

?string = path.join(process.cwd(), 'public')?

告訴服務(wù)器從哪里提供內(nèi)容。只有在你希望提供靜態(tài)文件時才需要這樣做。static.publicPath 將會被用來決定應(yīng)該從哪里提供 bundle，并具有優(yōu)先級。

webpack.config.js 

const path = require('path');

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

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

webpack.config.js 

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
      },
      {
        directory: path.join(__dirname, '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)聽文件。默認(rè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)前默認(rèn)模式為 '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'),
  },
};


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號