DevServer

可以使用 webpack-dev-server 快速開發應用程式。請參閱 開發指南 以開始使用。

此頁面說明會影響 webpack-dev-server (簡稱：dev-server) 行為的選項 版本 >= 5.0.0。從 v4 到 v5 的遷移指南可以在 這裡 找到。

devServer

物件

這組選項由 webpack-dev-server 接收，可用於以各種方式變更其行為。以下是一個基本的範例，它會對專案根目錄中的 public/ 目錄中的所有內容進行 gzip 壓縮並提供服務

webpack.config.js

const path = require('path');

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

當伺服器啟動時，在已解析模組清單之前會有一則訊息

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://127.0.0.1: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

說明伺服器位於何處以及提供服務的內容。

如果您透過 Node.js API 使用 dev-server，則 devServer 中的選項將會被忽略。請改為將選項傳遞為第一個參數：new WebpackDevServer({...}, compiler)。請 按此處 參閱如何透過 Node.js API 使用 webpack-dev-server 的範例。

透過 CLI 使用

你可以透過以下方式透過 CLI 呼叫 webpack-dev-server

npx webpack serve

serve 的 CLI 選項清單可在此取得 here

透過 API 使用

雖然建議透過 CLI 執行 webpack-dev-server，你也可以選擇透過 API 啟動伺服器。

請參閱相關的 webpack-dev-server API 文件。

devServer.allowedHosts

'auto' | 'all' [字串]

這個選項允許你建立允許存取開發伺服器的服務清單。

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

當設定為 'all' 時，這個選項會略過主機檢查。不建議這樣做，因為不檢查主機的應用程式容易受到 DNS 重新繫結攻擊。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --allowed-hosts all

當設定為 'auto' 時，這個選項總是允許 localhost、host 和 client.webSocketURL.hostname

webpack.config.js

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

透過 CLI 使用

npx webpack serve --allowed-hosts auto

devServer.bonjour

布林值 = false 物件

這個選項會在啟動時透過 ZeroConf 網路廣播伺服器。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --bonjour

要停用

npx webpack serve --no-bonjour

你也可以傳遞 自訂選項 給 bonjour，例如

webpack.config.js

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

devServer.client

logging

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

允許在瀏覽器中設定日誌層級，例如在重新載入、錯誤發生前或啟用熱模組替換時。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --client-logging info

overlay

boolean = true object

當編譯器錯誤或警告時，在瀏覽器中顯示全螢幕疊加層。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --client-overlay

要停用

npx webpack serve --no-client-overlay

您可以提供一個物件，其中包含以下屬性，以進行更精細的控制

所有屬性都是選用的，未提供時預設為 true。

例如，若要停用編譯警告，您可以提供以下設定

webpack.config.js

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

透過 CLI 使用

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

若要根據引發的錯誤進行篩選，您可以傳遞一個函式，該函式接受一個 error 參數並傳回一個布林值。

例如，忽略由 AbortController.abort() 引發的錯誤

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          if (error instanceof DOMException && error.name === 'AbortError') {
            return false;
          }
          return true;
        },
      },
    },
  },
};

progress

布林值

在瀏覽器中以百分比列印編譯進度。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --client-progress

要停用

npx webpack serve --no-client-progress

reconnect

boolean = true number

告知 dev-server 它應該嘗試重新連線客戶端的次數。當 true 時，它將嘗試無限次重新連線。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --client-reconnect

設定為 false 時，它將不會嘗試重新連線。

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

透過 CLI 使用

npx webpack serve --no-client-reconnect

您也可以指定客戶端應該嘗試重新連線的確切次數。

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

透過 CLI 使用

npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' 字串

此選項允許我們分別為個別客戶端選擇目前的 devServer 傳輸模式，或提供自訂客戶端實作。這允許指定瀏覽器或其他客戶端如何與 devServer 進行通訊。

webpack.config.js

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

透過 CLI 使用

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

若要建立自訂客戶端實作，請建立一個延伸 BaseClient 的類別。

使用自訂 WebSocket 客戶端實作的 CustomClient.js 路徑，以及相容的 'ws' 伺服器

webpack.config.js

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

使用自訂、相容的 WebSocket 客戶端和伺服器實作

webpack.config.js

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

webSocketURL

字串 物件

此選項允許指定 WebSocket 伺服器的 URL（當您代理開發伺服器，而客戶端腳本不總是知道要連線到哪裡時，這很有用）。

webpack.config.js

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

透過 CLI 使用

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 的客戶端使用提供的通訊協定。
• 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',
      },
    },
  },
};

devServer.compress

布林值 = true

針對所提供的所有內容啟用 gzip 壓縮

webpack.config.js

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

透過 CLI 使用

npx webpack serve --compress

要停用

npx webpack serve --no-compress

devServer.devMiddleware

物件

提供選項給處理 webpack 資產的 webpack-dev-middleware。

webpack.config.js

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

devServer.headers

陣列 函式 物件

將標頭新增至所有回應

webpack.config.js

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

您也可以傳遞陣列

webpack.config.js

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

您也可以傳遞函式

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

devServer.historyApiFallback

布林值 = false 物件

使用 HTML5 歷程 API 時，index.html 頁面可能必須提供來取代任何 404 回應。將 devServer.historyApiFallback 設為 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,
    },
  },
};

如需更多選項和資訊，請參閱 connect-history-api-fallback 文件。

devServer.host

'local-ip' | 'local-ipv4' | 'local-ipv6' 字串

指定要使用的主機。如果您希望您的伺服器可從外部存取，請這樣指定

webpack.config.js

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

透過 CLI 使用

npx webpack serve --host 0.0.0.0

這也適用於 IPv6

npx webpack serve --host ::

local-ip

指定 local-ip 作為主機將嘗試將主機選項解析為您的本機 IPv4 位址（如果可用），如果 IPv4 不可用，它將嘗試解析您的本機 IPv6 位址。

npx webpack serve --host local-ip

local-ipv4

指定 local-ipv4 作為主機將嘗試將主機選項解析為您的本機 IPv4 位址。

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

透過 CLI 使用

npx webpack serve --hot

要停用

npx webpack serve --no-hot

若要在不重新整理頁面的情況下啟用熱模組替換，作為在建置失敗時備用，請使用 hot: 'only'

webpack.config.js

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

透過 CLI 使用

npx webpack serve --hot only

devServer.ipc

true 字串

要監聽的 Unix socket（而不是 host）。

將其設定為 true 會在 /your-os-temp-dir/webpack-dev-server.sock 上監聽 socket。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --ipc

您也可以使用以下方式監聽不同的 socket：

webpack.config.js

const path = require('path');

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

devServer.liveReload

布林值 = true

預設情況下，當偵測到檔案變更時，開發伺服器會重新載入/重新整理頁面。必須停用 devServer.hot 選項，或必須啟用 devServer.watchFiles 選項，才能使 liveReload 生效。透過將 devServer.liveReload 設定為 false 來停用。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --live-reload

要停用

npx webpack serve --no-live-reload

devserver.onListening

函式 (devServer)

提供在 webpack-dev-server 開始在埠上監聽連線時執行自訂函數的能力。

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

布林值 字串 物件 [字串，物件]

指示開發伺服器在伺服器啟動後開啟瀏覽器。將其設定為 true 以開啟您的預設瀏覽器。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --open

要停用

npx webpack serve --no-open

在瀏覽器中開啟指定頁面

webpack.config.js

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

透過 CLI 使用

npx webpack serve --open /my-page

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

webpack.config.js

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

透過 CLI 使用

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

提供瀏覽器名稱以取代預設名稱

webpack.config.js

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

透過 CLI 使用

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

物件接受所有 open 選項

webpack.config.js

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

devServer.port

'auto' 字串 數字

指定一個連接埠號碼，用於偵聽請求

webpack.config.js

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

透過 CLI 使用

npx webpack serve --port 8080

port 選項不能為 null 或空字串，若要自動使用一個可用連接埠，請使用 port: 'auto'

webpack.config.js

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

透過 CLI 使用

npx webpack serve --port auto

devServer.proxy

[物件，函式]

當您有獨立的 API 後端開發伺服器，而且您想在同一個網域上傳送 API 請求時，對某些 URL 進行代理會很有用。

開發伺服器使用功能強大的 http-proxy-middleware 套件。查看其 文件 以了解更進階的用法。請注意，http-proxy-middleware 的某些功能不需要 target 鍵，例如其 router 功能，但您仍然需要在您的設定中包含一個 target 鍵，否則 webpack-dev-server 將不會將它傳遞給 http-proxy-middleware。

對於在 localhost:3000 上的後端，您可以使用此方法來啟用代理

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'https://127.0.0.1:3000',
      },
    ],
  },
};

對 /api/users 的請求現在將代理請求到 https://127.0.0.1:3000/api/users。

如果您不希望傳遞 /api，我們需要改寫路徑

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'https://127.0.0.1:3000',
        pathRewrite: { '^/api': '' },
      },
    ],
  },
};

預設情況下，使用無效憑證在 HTTPS 上執行的後端伺服器將不被接受。如果您願意，請修改您的設定如下

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'https://127.0.0.1:3000',
        secure: false,
      },
    ],
  },
};

有時您不想代理所有內容。可以根據函數的傳回值繞過代理。

在函數中，您可以存取要求、回應和代理選項。

• 傳回 null 或 undefined 以繼續使用代理處理要求。
• 傳回 false 以產生要求的 404 錯誤。
• 傳回路徑以供使用，而不是繼續代理要求。

例如，對於瀏覽器要求，您想要提供 HTML 頁面，但對於 API 要求，您想要代理它。您可以執行類似這樣的操作

webpack.config.js

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

如果您想要將多個特定路徑代理到同一個目標，您可以使用包含 context 屬性的陣列，其中包含一個或多個物件

webpack.config.js

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

請注意，預設不會代理到根目錄的請求。若要啟用根目錄代理，devMiddleware.index 選項應指定為假值

webpack.config.js

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

預設情況下，在代理時會保留主機標頭的來源，您可以將 changeOrigin 設定為 true 以覆寫此行為。在某些情況下很有用，例如使用 基於名稱的虛擬主機網站。

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/api'],
        target: 'https://127.0.0.1:3000',
        changeOrigin: true,
      },
    ],
  },
};

devServer.server

'http' | 'https' | 'spdy' 字串 物件

允許設定伺服器和選項（預設為 'http'）。

webpack.config.js

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

透過 CLI 使用

npx webpack serve --server-type http

使用自簽憑證透過 HTTPS 提供服務

webpack.config.js

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

透過 CLI 使用

npx webpack serve --server-type https

使用 spdy 透過 HTTP/2 提供服務，並使用自簽憑證

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

它也允許您設定其他 TLS 選項，例如 minVersion，您也可以直接傳遞各個檔案的內容

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

布林值 = true

允許在 SIGINT 和 SIGTERM 訊號上關閉開發伺服器並結束處理程序。

webpack.config.js

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

devServer.setupMiddlewares

function (middlewares, devServer)

提供執行自訂函數和套用自訂中間件的能力。

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

      // Use the `unshift` method if you want to run a middleware before all other middlewares
      // or when you are migrating from the `onBeforeSetupMiddleware` option
      middlewares.unshift({
        name: 'first-in-array',
        // `path` is optional
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // Use the `push` method if you want to run a middleware after all other middlewares
      // or when you are migrating from the `onAfterSetupMiddleware` option
      middlewares.push({
        name: 'hello-world-test-one',
        // `path` is optional
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

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

      return middlewares;
    },
  },
};

devServer.static

布林值 字串 物件 [字串，物件]

此選項允許設定從目錄 (預設為「public」目錄) 提供靜態檔案的選項。若要停用，請將其設定為 false

webpack.config.js

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

透過 CLI 使用

npx webpack serve --static

要停用

npx webpack serve --no-static

觀看單一目錄

webpack.config.js

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

透過 CLI 使用

npx webpack serve --static assets

觀看多個靜態目錄

webpack.config.js

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

透過 CLI 使用

npx webpack serve --static assets --static css

directory

字串 = path.join(process.cwd(), 'public')

告訴伺服器從何處提供內容。這僅在您要提供靜態檔案時才需要。static.publicPath 將用於決定應從何處提供套件，並且優先。

webpack.config.js

const path = require('path');

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

如果您有多個靜態資料夾，請提供一個物件陣列

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
      },
      {
        directory: path.join(__dirname, 'css'),
      },
    ],
  },
};

staticOptions

物件

可以設定進階選項，以便從 static.directory 提供靜態檔案。請參閱 Express 文件，以了解可能的選項。

webpack.config.js

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

publicPath

字串 = '/' [字串]

告訴伺服器在什麼 URL 提供 static.directory 內容。例如，要在 /serve-public-path-url/manifest.json 上提供檔案 assets/manifest.json，您的設定應如下所示

webpack.config.js

const path = require('path');

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

如果您有多個靜態資料夾，請提供一個物件陣列

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 }

啟用時，指示 dev-server 使用 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

指示 dev-server 監視 static.directory 選項提供的檔案。此選項預設啟用，檔案變更將觸發整個頁面重新載入。您可以將 watch 選項設定為 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

您可以設定進階選項來監視 static.directory 中的靜態檔案。請參閱 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]

此選項讓您可以設定一個清單，其中包含要監視檔案變更的 glob/目錄/檔案。例如

webpack.config.js

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

您可以設定進階選項來監視檔案。請參閱 chokidar 文件，以了解可能的選項。

webpack.config.js

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

devServer.webSocketServer

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

此選項允許我們選擇目前的網路插座伺服器，或提供自訂網路插座伺服器實作。

目前預設模式為 'ws'。此模式使用 ws 作為伺服器，並在用戶端使用原生網路插座。

webpack.config.js

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

若要建立自訂伺服器實作，請建立一個延伸 BaseServer 的類別。

使用自訂網路插座伺服器實作的 CustomServer.js 路徑，以及相容的 'ws' 用戶端

webpack.config.js

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

使用自訂、相容的 WebSocket 客戶端和伺服器實作

webpack.config.js

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