开发服务器

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: 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 的示例。

通过 CLI 使用

你可以通过以下方式通过 CLI 调用 webpack-dev-server

npx webpack serve

有关 serve 的 CLI 选项列表，请参见 此处

通过 API 使用

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

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

devServer.allowedHosts

'auto' | 'all' [string]

此选项允许您将允许访问开发服务器的服务加入白名单。

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

boolean = false object

此选项在启动时通过 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

日志记录

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

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

webpack.config.js

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

通过 CLI 使用

npx webpack serve --client-logging info

覆盖

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' string

此选项允许我们为客户端单独选择当前 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 的类。

使用指向 CustomClient.js 的路径，这是一个自定义 WebSocket 客户端实现，以及兼容的 '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

string object

此选项允许指定 web socket 服务器的 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

boolean = 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

array function object

向所有响应添加标头

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

boolean = false object

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

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' string

指定要使用的主机。如果您希望您的服务器可以从外部访问，请按如下方式指定

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 string

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

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

webpack.config.js

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

通过 CLI 使用

npx webpack serve --ipc

您还可以使用以下方法侦听不同的套接字

webpack.config.js

const path = require('path');

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

devServer.liveReload

boolean = true

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

webpack.config.js

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

通过 CLI 使用

npx webpack serve --live-reload

禁用

npx webpack serve --no-live-reload

devserver.onListening

function (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

boolean string object [string, object]

告诉 dev-server 在服务器启动后打开浏览器。将其设置为 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', 'http://localhost:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },
  },
};

devServer.port

'auto' string number

指定一个端口号以侦听请求

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

[object, function]

当你有一个单独的 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: 'http://localhost:3000',
      },
    ],
  },
};

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

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

webpack.config.js

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

默认情况下，不会接受运行在 HTTPS 上且具有无效证书的后端服务器。如果你愿意，可以这样修改你的配置

webpack.config.js

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

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

在函数中，你可以访问请求、响应和代理选项。

• 返回 null 或 undefined 以使用代理继续处理请求。
• 返回 false 以针对请求生成 404 错误。
• 返回一个要提供的路径，而不是继续代理请求。

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/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';
          }
        },
      },
    ],
  },
};

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

webpack.config.js

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

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

webpack.config.js

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

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

webpack.config.js

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

devServer.server

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

允许设置服务器和选项（默认情况下为“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

boolean = 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

boolean string object [string, object]

此选项允许配置从目录（默认情况下为“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

string = 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

string = '/' [string]

告诉服务器在哪个 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

此选项允许我们选择当前的 Web 套接字服务器或提供自定义 Web 套接字服务器实现。

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

webpack.config.js

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

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

使用指向 CustomServer.js 的路径，自定义 WebSocket 服务器实现，以及兼容的 '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'),
  },
};