知海

DevServer 配置

webpackjsorg-main配置参考

DevServer 配置

webpack-dev-server 可用于快速开发应用程序。请参阅 开发指南 以开始使用。

此页面描述了影响 webpack-dev-server（简称：dev-server）行为的选项 。从 v4 到 v5 的迁移指南可以在 此处 找到。

W> webpack-dev-server v5.0.0+ 要求 node >= v18.12.0、webpack >= v5.0.0 和 webpack-cli >= v4.7.0，我们建议使用最新版本。

devServer

object

webpack-dev-server 会获取这组选项，并可以通过各种方式改变其行为。这是一个基本的示例，它对项目根目录下 public/ 目录中的所有内容进行 gzip 压缩并提供服务：

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    port: 9000,
  },
};

当服务器启动时，在已解析模块列表之前会有一条消息：

bash 复制代码 
<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

这将提供一些关于服务器所在位置及其服务内容的背景信息。

如果你通过 Node.js API 使用 dev-server，devServer 中的选项将被忽略。请将选项作为第一个参数传递：new WebpackDevServer({...}, compiler)。点击此处 查看如何通过 Node.js API 使用 webpack-dev-server 的示例。

W> 当使用 WebpackDevServer 时，你不能使用第二个 compiler 参数（一个回调函数）。

W> 请注意，当 导出多个配置 时，只有第一个配置的 devServer 选项会被考虑，并用于数组中的所有配置。

T> 如果遇到问题，导航到 /webpack-dev-server 路由将显示文件的提供位置。例如，http://localhost:9000/webpack-dev-server。

T> 如果你想手动重新编译 bundle，导航到 /webpack-dev-server/invalidate 路由将 使当前编译失效 并通过 webpack-dev-middleware 为你重新编译。根据你的配置，URL 可能类似于 http://localhost:9000/webpack-dev-server/invalidate。

T> 提供 bundle 需要 HTML 模板，通常是一个 index.html 文件。请确保脚本引用已添加到 HTML 中，webpack-dev-server 不会自动注入它们。

通过 CLI 使用

你可以通过 CLI 调用 webpack-dev-server：

bash 复制代码 
npx webpack serve

serve 的 CLI 选项列表可在 此处 找到。

通过 API 使用

虽然推荐通过 CLI 运行 webpack-dev-server，但你也可以选择通过 API 启动服务器。

请参阅相关的 webpack-dev-server API 文档。

devServer.app

function

允许你使用自定义的服务器应用程序，例如 connect、fastify 等。默认使用的应用程序是 express。

webpack.config.js

js 复制代码 
import connect from "connect";

export default {
  // ...
  devServer: {
    app: () => connect(),
  },
};

devServer.allowedHosts

'auto' | 'all' [string]

此选项允许你将允许访问 dev server 的服务加入白名单。

webpack.config.js

js 复制代码 
export default {
  // ...
  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

js 复制代码 
export default {
  // ...
  devServer: {
    // 这实现了与第一个示例相同的效果
    // 并且如果新子域名需要访问 dev server，无需更新配置
    allowedHosts: [".host.com", "host2.com"],
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

当设置为 'all' 时，此选项将绕过主机检查。不建议这样做，因为不检查主机的应用程序容易受到 DNS 重新绑定攻击。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    allowedHosts: "all",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --allowed-hosts all

当设置为 'auto' 时，此选项始终允许 localhost、host 和 client.webSocketURL.hostname：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    allowedHosts: "auto",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --allowed-hosts auto

devServer.bonjour

boolean = false object

此选项在启动时通过 ZeroConf 网络广播服务器。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    bonjour: true,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --bonjour

禁用：

bash 复制代码 
npx webpack serve --no-bonjour

你也可以向 bonjour 传递 自定义选项，例如：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    bonjour: {
      type: "http",
      protocol: "udp",
    },
  },
};

devServer.client

logging

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

允许设置浏览器中的日志级别，例如在重新加载之前、出错之前或启用 热模块替换 时。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      logging: "info",
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-logging info

overlay

boolean = true object

当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      overlay: true,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-overlay

禁用：

bash 复制代码 
npx webpack serve --no-client-overlay

你可以提供一个包含以下属性的对象进行更精细的控制：

属性 说明
errors 编译错误
runtimeErrors 未处理的运行时错误
warnings 编译警告

所有属性都是可选的，未提供时默认为 true。

例如，要禁用编译警告，你可以提供以下配置：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
        runtimeErrors: true,
      },
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors

要根据抛出的错误进行过滤，你可以传递一个接受 error 参数并返回布尔值的函数。

例如，忽略由 AbortController.abort() 抛出的错误：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          if (error instanceof DOMException && error.name === "AbortError") {
            return false;
          }
          return true;
        },
      },
    },
  },
};

W> 该函数将无法访问配置文件外部作用域中声明的变量。

progress

boolean

在浏览器中打印编译进度的百分比。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      progress: true,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-progress

禁用：

bash 复制代码 
npx webpack serve --no-client-progress

reconnect

boolean = true number

告诉 dev-server 它应该尝试重新连接客户端的次数。当为 true 时，它将无限次尝试重新连接。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      reconnect: true,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-reconnect

当设置为 false 时，它将不会尝试重新连接。

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      reconnect: false,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --no-client-reconnect

你也可以指定客户端应尝试重新连接的确切次数。

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      reconnect: 5,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' string

此选项允许我们为客户端单独选择当前的 devServer 传输模式，或提供自定义的客户端实现。这允许指定浏览器或其他客户端如何与 devServer 通信。

T> 向 webSocketServer 提供 'ws' 或 'sockjs' 是将 devServer.client.webSocketTransport 和 devServer.webSocketServer 都设置为给定值的快捷方式。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: "ws",
    },
    webSocketServer: "ws",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-web-socket-transport ws --web-socket-server-type ws

T> 在提供自定义客户端和服务器实现时，请确保它们相互兼容以成功通信。

要创建自定义客户端实现，请创建一个继承自 BaseClient 的类。

使用 CustomClient.js 的路径（自定义 WebSocket 客户端实现）以及兼容的 'ws' 服务器：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: import.meta.resolve("./CustomClient.js"),
    },
    webSocketServer: "ws",
  },
};

使用自定义的、兼容的 WebSocket 客户端和服务器实现：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: import.meta.resolve("./CustomClient.js"),
    },
    webSocketServer: import.meta.resolve("./CustomServer.js"),
  },
};

webSocketURL

string object

此选项允许指定 WebSocket 服务器的 URL（当你代理 dev server 且客户端脚本并不总是知道在哪里连接时很有用）。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketURL: "ws://0.0.0.0:8080/ws",
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws

你也可以指定一个包含以下属性的对象：

  • hostname：告诉连接到 devServer 的客户端使用提供的主机名。
  • pathname：告诉连接到 devServer 的客户端使用提供的路径进行连接。
  • password：告诉连接到 devServer 的客户端使用提供的密码进行认证。
  • port：告诉连接到 devServer 的客户端使用提供的端口。
  • protocol：告诉连接到 devServer 的客户端使用提供的协议。
  • username：告诉连接到 devServer 的客户端使用提供的用户名进行认证。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketURL: {
        hostname: "0.0.0.0",
        pathname: "/ws",
        password: "dev-server",
        port: 8080,
        protocol: "ws",
        username: "webpack",
      },
    },
  },
};

T> 要从浏览器获取 protocol/hostname/port，请使用 webSocketURL: 'auto://0.0.0.0:0/ws'。

devServer.compress

boolean = true

对所有提供的内容启用 gzip 压缩：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    compress: true,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --compress

禁用：

bash 复制代码 
npx webpack serve --no-compress

devServer.devMiddleware

object

为 webpack-dev-middleware 提供选项，该中间件处理 webpack 静态资源。

webpack.config.js

js 复制代码 
export default {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: "text/html" },
      publicPath: "/publicPathForDevServe",
      serverSideRender: true,
      writeToDisk: true,
    },
  },
};

devServer.headers

array function object

向所有响应添加响应头：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    headers: {
      "X-Custom-Foo": "bar",
    },
  },
};

你也可以传递一个数组：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    headers: [
      {
        key: "X-Custom",
        value: "foo",
      },
      {
        key: "Y-Custom",
        value: "bar",
      },
    ],
  },
};

你也可以传递一个函数：

js 复制代码 
export default {
  // ...
  devServer: {
    headers: () => ({ "X-Bar": ["key1=value1", "key2=value2"] }),
  },
};

devServer.historyApiFallback

boolean = false object

使用 HTML5 History API 时，index.html 页面可能必须代替任何 404 响应来提供。通过将 devServer.historyApiFallback 设置为 true 来启用它：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    historyApiFallback: true,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --history-api-fallback

禁用：

bash 复制代码 
npx webpack serve --no-history-api-fallback

通过提供一个对象，可以使用 rewrites 等选项进一步控制此行为：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: "/views/landing.html" },
        { from: /^\/subpage/, to: "/views/subpage.html" },
        { from: /./, to: "/views/404.html" },
      ],
    },
  },
};

当你的路径中包含点（这在 Angular 中很常见）时，你可能需要使用 disableDotRule：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
  },
};

更多选项和信息，请参阅 connect-history-api-fallback 文档。

devServer.host

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

指定要使用的主机。如果你希望服务器可以被外部访问，请像这样指定：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    host: "0.0.0.0",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --host 0.0.0.0

这也适用于 IPv6：

bash 复制代码 
npx webpack serve --host ::

local-ip

将 local-ip 指定为主机时，将尝试将主机选项解析为你的本地 IPv4 地址（如果可用），如果 IPv4 不可用，则将尝试解析为你的本地 IPv6 地址。

bash 复制代码 
npx webpack serve --host local-ip

local-ipv4

将 local-ipv4 指定为主机时，将尝试将主机选项解析为你的本地 IPv4 地址。

bash 复制代码 
npx webpack serve --host local-ipv4

local-ipv6

将 local-ipv6 指定为主机时，将尝试将主机选项解析为你的本地 IPv6 地址。

bash 复制代码 
npx webpack serve --host local-ipv6

devServer.hot

'only' boolean = true

启用 webpack 的 热模块替换 功能：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    hot: true,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --hot

禁用：

bash 复制代码 
npx webpack serve --no-hot

要在构建失败时启用热模块替换而不进行页面刷新作为回退，请使用 hot: 'only'：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    hot: "only",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --hot only

T> 自 webpack-dev-server v4 起，HMR 默认启用。它会自动应用 webpack.HotModuleReplacementPlugin，这是启用 HMR 所必需的。因此，当在配置中或通过 CLI 选项 --hot 将 hot 设置为 true 时，你不必在 webpack.config.js 中添加此插件。有关更多信息，请参阅 HMR 概念页面。

devServer.ipc

true string

要监听的 Unix 套接字（而不是 host）。

将其设置为 true 将监听 /your-os-temp-dir/webpack-dev-server.sock 处的套接字：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    ipc: true,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --ipc

你也可以使用以下方式监听不同的套接字：

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    ipc: path.join(__dirname, "my-socket.sock"),
  },
};

devServer.liveReload

boolean = true

默认情况下，当检测到文件更改时，dev-server 将重新加载/刷新页面。必须禁用 devServer.hot 选项或启用 devServer.watchFiles 选项，liveReload 才能生效。通过将 devServer.liveReload 设置为 false 来禁用它：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    liveReload: false,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --live-reload

禁用：

bash 复制代码 
npx webpack serve --no-live-reload

W> 实时重新加载仅适用于与 web 相关的 目标 (target)，例如 web、webworker、electron-renderer 和 node-webkit。

devserver.onListening

function (devServer)

提供了在 webpack-dev-server 开始监听端口上的连接时执行自定义函数的能力。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    onListening(devServer) {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }

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

devServer.open

boolean string object [string, object]

告诉 dev-server 在服务器启动后打开浏览器。将其设置为 true 以打开你的默认浏览器。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    open: true,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --open

禁用：

bash 复制代码 
npx webpack serve --no-open

在浏览器中打开指定页面：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    open: ["/my-page"],
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --open /my-page

在浏览器中打开多个指定页面：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    open: ["/my-page", "/another-page"],
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --open /my-page --open /another-page

提供要使用的浏览器名称（而不是默认浏览器）：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    open: {
      app: {
        name: "google-chrome",
      },
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --open-app-name 'google-chrome'

该对象接受所有 open 选项：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    open: {
      target: ["first.html", "http://localhost:8080/second.html"],
      app: {
        name: "google-chrome",
        arguments: ["--incognito", "--new-window"],
      },
    },
  },
};

T> 浏览器应用程序名称与平台相关。不要在可复用模块中硬编码它。例如，'Chrome' 在 macOS 上是 'Google Chrome'，在 Linux 上是 'google-chrome'，在 Windows 上是 'chrome'。

devServer.port

'auto' string number

指定要监听请求的端口号：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    port: 8080,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --port 8080

port 选项不能为 null 或空字符串，要自动使用空闲端口，请使用 port: 'auto'：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    port: "auto",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --port auto

devServer.proxy

[object, function]

当你有一个单独的 API 后端开发服务器，并且希望在同一域名上发送 API 请求时，代理某些 URL 会很有用。

dev-server 使用了强大的 http-proxy-middleware 包。查看其 文档 以了解更高级的用法。请注意，http-proxy-middleware 的某些功能不需要 target 键，例如其 router 功能，但你仍然需要在此处的配置中包含 target 键，否则 webpack-dev-server 不会将其传递给 http-proxy-middleware。

后端在 localhost:3000 上，你可以使用此选项启用代理：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
      },
    ],
  },
};

现在，对 /api/users 的请求将被代理到 http://localhost:3000/api/users。

如果你不希望传递 /api，则需要重写路径：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
};

默认情况下，不接受在 HTTPS 上运行且证书无效的后端服务器。如果你想要接受，请像这样修改你的配置：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        secure: false,
      },
    ],
  },
};

有时你不想代理所有内容。可以根据函数的返回值来绕过代理。

在该函数中，你可以访问请求 (request)、响应 (response) 和代理选项 (proxy options)。

  • 返回 null 或 undefined 以继续使用代理处理请求。
  • 返回 false 以对该请求产生 404 错误。
  • 返回一个路径，用于从该路径提供服务，而不是继续代理请求。

例如，对于浏览器请求，你想提供一个 HTML 页面，但对于 API 请求，你想代理它。你可以这样做：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        bypass(req, res, proxyOptions) {
          if (req.headers.accept.includes("html")) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        },
      },
    ],
  },
};

W> bypass 选项已弃用，推荐使用 router 和 context 选项。在此处阅读更多。

如果你希望将多个特定路径代理到同一目标，可以使用一个或多个带有 context 属性的对象数组：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/auth", "/api"],
        target: "http://localhost:3000",
      },
    ],
  },
};

请注意，默认情况下不会代理对根路径的请求。要启用根路径代理，应将 devMiddleware.index 选项指定为假值：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    devMiddleware: {
      index: false, // 指定以启用根路径代理
    },
    proxy: [
      {
        context: () => true,
        target: "http://localhost:1234",
      },
    ],
  },
};

默认情况下，代理时会保留主机头的来源 (origin)，你可以设置 changeOrigin 为 true 来覆盖此行为。这在某些情况下很有用，例如使用 基于名称的虚拟主机站点 时。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    proxy: [
      {
        context: ["/api"],
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    ],
  },
};

devServer.server

'http' | 'https' | 'spdy' string object

允许设置服务器及其选项（默认为 'http'）。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    server: "http",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --server-type http

使用自签名证书通过 HTTPS 提供服务：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    server: "https",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --server-type https

使用 spdy 和自签名证书通过 HTTP/2 提供服务：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    server: "spdy",
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --server-type spdy

W> 此选项在 Node 15.0.0 及以上版本中被忽略，因为 spdy 在这些版本中已损坏。一旦 Express 支持 Node 内置的 HTTP/2，dev server 将迁移过去。

使用对象语法提供你自己的证书：

webpack.config.js

js 复制代码 
export default {
  // ...
  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 使用：

bash 复制代码 
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

js 复制代码 
import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  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 信号时关闭 dev server 并退出进程。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    setupExitSignals: true,
  },
};

devServer.setupMiddlewares

function (middlewares, devServer)

提供了执行自定义函数和应用自定义中间件的能力。

webpack.config.js

js 复制代码 
export default {
  // ...
  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");
      });

      // 如果你想在所有其他中间件之前运行某个中间件，
      // 或者你正在从 `onBeforeSetupMiddleware` 选项迁移，请使用 `unshift` 方法
      middlewares.unshift({
        name: "first-in-array",
        // `path` 是可选的
        path: "/foo/path",
        middleware: (req, res) => {
          res.send("Foo!");
        },
      });

      // 如果你想在所有其他中间件之后运行某个中间件，
      // 或者你正在从 `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]

此选项允许配置从目录（默认为 'public' 目录）提供静态文件的选项。要禁用，请将其设置为 false：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    static: false,
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --static

禁用：

bash 复制代码 
npx webpack serve --no-static

监听单个目录：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    static: ["assets"],
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --static assets

监听多个静态目录：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    static: ["assets", "css"],
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --static assets --static css

directory

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

告诉服务器从哪里提供内容。仅当你想要提供静态文件时才需要此选项。static.publicPath 将用于确定 bundle 的提供位置，并且优先于此选项。

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
  },
};

如果你有多个静态文件夹，请提供一个对象数组：

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "assets"),
      },
      {
        directory: path.join(__dirname, "css"),
      },
    ],
  },
};

T> 建议使用绝对路径。

staticOptions

object

可以为从 static.directory 提供静态文件配置高级选项。有关可能的选项，请参阅 Express 文档。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    static: {
      staticOptions: {
        redirect: true,
      },
    },
  },
};

publicPath

string = '/' [string]

告诉服务器在哪个 URL 上提供 static.directory 的内容。例如，要在 /serve-public-path-url/manifest.json 提供文件 assets/manifest.json，你的配置应如下：

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "assets"),
      publicPath: "/serve-public-path-url",
    },
  },
};

如果你有多个静态文件夹，请提供一个对象数组：

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  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

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      serveIndex: true,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --static-serve-index

禁用：

bash 复制代码 
npx webpack serve --no-static-serve-index

watch

boolean object

告诉 dev-server 监听由 static.directory 选项提供的文件。它默认启用，文件更改将触发整页重新加载。可以通过将 watch 选项设置为 false 来禁用它。

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      watch: false,
    },
  },
};

通过 CLI 使用：

bash 复制代码 
npx webpack serve --static-watch

禁用：

bash 复制代码 
npx webpack serve --no-static-watch

可以为监听 static.directory 中的静态文件配置高级选项。有关可能的选项，请参阅 chokidar 文档。

webpack.config.js

js 复制代码 
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      watch: {
        ignored: "*.txt",
        usePolling: false,
      },
    },
  },
};

devServer.watchFiles

string object [string, object]

此选项允许你配置要监听文件更改的 globs/目录/文件列表。例如：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    watchFiles: ["src/**/*.php", "public/**/*"],
  },
};

可以为监听文件配置高级选项。有关可能的选项，请参阅 chokidar 文档。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    watchFiles: {
      paths: ["src/**/*.php", "public/**/*"],
      options: {
        usePolling: false,
      },
    },
  },
};

devServer.webSocketServer

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

此选项允许我们选择当前的 WebSocket 服务器，或提供自定义的 WebSocket 服务器实现。

当前默认模式为 'ws'。此模式使用 ws 作为服务器，并在客户端使用原生 WebSockets。

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    webSocketServer: "ws",
  },
};

要创建自定义服务器实现，请创建一个继承自 BaseServer 的类。

使用 CustomServer.js 的路径（自定义 WebSocket 服务器实现）以及兼容的 'ws' 客户端：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: "ws",
    },
    webSocketServer: import.meta.resolve("./CustomServer"),
  },
};

使用自定义的、兼容的 WebSocket 客户端和服务器实现：

webpack.config.js

js 复制代码 
export default {
  // ...
  devServer: {
    client: {
      webSocketTransport: import.meta.resolve("./CustomClient"),
    },
    webSocketServer: import.meta.resolve("./CustomServer"),
  },
};

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。