开发中 Server(devServer)

webpack-dev-server 能够用于快速开发应用程序。请查看“如何开发？” (opens new window)入门。

此页面描述影响 webpack-dev-server(简写为：dev-server) 行为的选项。

# `devServer`

type: object

通过来自 webpack-dev-server (opens new window) 的这些选项，能够用多种方式改变其行为。这里有一个简单的例子，所有来自 dist/ 目录的文件都做 gzip 压缩和提供为服务：

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

1
2
3
4
5

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

http://localhost:9000/
webpack output is served from /build/
Content not from webpack is served from /path/to/dist/

1
2
3

这将给出一些背景知识，就能知道服务器的访问位置，并且知道服务已启动。

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

Be aware that when exporting multiple configurations (opens new window) only the devServer options for the first configuration will be taken into account and used for all the configurations in the array.

请注意，在导出多个配置 (opens new window) 时，将只考虑第一个配置的devserver选项，并将其用于数组中的所有配置。

If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server.

如果你有问题，导航到/webpack-dev-server路径会显示文件的位置。例如,http://1ocalhost: 9000 / webpack-dev-server。

# `devServer.after`

type: function

Provides the ability to execute custom middleware after all other middleware internally within the server.

提供在服务器内部执行所有其他中间件之后执行自定义中间件的能力。

after(app){
  // do fancy stuff
}

1
2
3

# `devServer.allowedHosts`

type: array

通过此选项，您可以将允许访问开发服务器的服务列入白名单。

allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
]

1
2
3
4
5
6

模仿django ALLOWED_HOSTS，以开头的值.可用作子域通配符。.host.com将匹配host.com，www.host.com以及任何其他子域host.com。

// 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'
]

1
2
3
4
5
6
7

要将此选项与CLI一起使用，请为该选项传递--allowed-hosts一个逗号分隔的字符串。

webpack-dev-server --entry /entry/file --output-path /output/path --allowed-hosts .host.com,host2.com

# `devServer.before`

type: function

提供在服务器内部先于所有其他中间件执行自定义中间件的功能。这可以用于定义自定义处理程序，例如：

before(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

1
2
3
4
5

# `devServer.bonjour`

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

bonjour: true

通过CLI使用

webpack-dev-server --bonjour

# `devServer.clientLogLevel`

type: string

当使用*内联模式(inline mode)*时，在开发工具(DevTools)的控制台(console)将显示消息，如：在重新加载之前，在一个错误之前，或者模块热替换(Hot Module Replacement)启用时。这可能显得很繁琐。

你可以阻止所有这些消息显示，使用这个选项：

clientLogLevel: "none"

通过CLI使用

webpack-dev-server --client-log-level none

可能的值有 none, error, warning 或者 info（默认值）。

# `devServer.color` -仅`CLI`

type: boolean

在控制台上启用/禁用颜色。

webpack-dev-server --color

# `devServer.compress`

type: boolean

boolean

一切服务都启用gzip 压缩 (opens new window)：

compress: true

通过CLI使用

webpack-dev-server --compress

# `devServer.contentBase`

type: boolean string array

告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath (opens new window) 将用于确定应该从哪里提供 bundle，并且此选项优先。

默认情况下，将使用当前工作目录作为提供内容的目录，但是你可以修改为其他目录：

contentBase: path.join(__dirname, "public")

注意，推荐使用绝对路径。

但是也可以从多个目录提供内容：

contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

禁用 contentBase：

contentBase: false

通过CLI使用

webpack-dev-server --content-base /path/to/content/dir

# `devServer.disableHostCheck`

type: boolean

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

disableHostCheck: true

通过CLI使用

webpack-dev-server --disable-host-check

# `devServer.filename`

type: string

在惰性模式中，此选项可减少编译。默认在惰性模式，每个请求结果都会产生全新的编译。使用 filename，可以只在某个文件被请求时编译。

如果 output.filename 设置为 bundle.js ，filename 使用如下：

lazy: true,
filename: "bundle.js"

1
2

现在只有在请求 /bundle.js 时候，才会编译 bundle。

filename 在不使用惰性加载时没有效果。

# `devServer.headers`

type: object

在所有响应中添加首部内容：

headers: {
  "X-Custom-Foo": "bar"
}

1
2
3

# `devServer.historyApiFallback`

type: object, boolean

当使用 HTML5 History API (opens new window) 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用：

historyApiFallback: true

通过传入一个对象，比如使用 rewrites 这个选项，此行为可进一步地控制：

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

1
2
3
4
5
6
7

当路径中使用点(dot)（常见于 Angular），你可能需要使用 disableDotRule：

historyApiFallback: {
  disableDotRule: true
}

1
2
3

通过CLI使用

webpack-dev-server --history-api-fallback

更多选项和信息，查看 connect-history-api-fallback (opens new window) 文档。

# `devServer.host`

type: string

指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：

host: "0.0.0.0"

通过CLI使用

webpack-dev-server --host 0.0.0.0

# `devServer.hot`

type: boolean

启用 webpack 的模块热替换特性：

hot: true

请注意，webpack.HotModuleReplacementPlugin完全启用HMR是必需的。如果使用webpack或webpack-dev-server启动该--hot选项，则该插件将自动添加，因此您可能无需将其添加到中webpack.config.js。有关更多信息，请参见HMR概念页面 (opens new window)。

# `devServer.hotOnly`

type: boolean

启用热模块替换（请参阅devServer.hot (opens new window)参考资料），而不会在构建失败时刷新页面作为后备。

hotOnly: true

通过CLI使用

webpack-dev-server --hot-only

# `devServer.https`

type: boolean object

默认情况下，dev-server 通过 HTTP 提供服务。也可以选择带有 HTTPS 的 HTTP/2 提供服务：

https: true

以上设置使用了自签名证书，但是你可以提供自己的：

https: {
  key: fs.readFileSync("/path/to/server.key"),
  cert: fs.readFileSync("/path/to/server.crt"),
  ca: fs.readFileSync("/path/to/ca.pem"),
}

1
2
3
4
5

此对象直接传递到 Node.js HTTPS 模块，所以更多信息请查看 HTTPS 文档 (opens new window)。

通过CLI使用

webpack-dev-server --https

要通过CLI通过自己的证书，请使用以下选项

webpack-dev-server --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem

# `devServer.index`

type: string

视为索引文件的文件名。

index: 'index.htm'

# `devServer.info` -仅CLI

type: boolean

输出cli信息。默认情况下启用。

webpack-dev-server --info=false

# `devServer.inline`

type: boolean

在 dev-server 的两种不同模式之间切换。默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。

也可以使用 iframe 模式，它在通知栏下面使用 <iframe> 标签，包含了关于构建的消息。切换到 iframe 模式：

inline: false

通过CLI使用

webpack-dev-server --inline=false

推荐使用模块热替换的内联模式，因为它包含来自 websocket 的 HMR 触发器。轮询模式可以作为替代方案，但需要一个额外的入口点：'webpack/hot/poll?1000'。

# `devServer.lazy`

type: boolean

当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”。

lazy: true

通过CLI使用

webpack-dev-server --lazy

watchOptions 在使用惰性模式时无效。

如果使用命令行工具(CLI)，请确保**内联模式(inline mode)**被禁用。

# `devServer.noInfo`

type: boolean

启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。

noInfo: true

# `devServer.open`

type: boolean

当open启用时，开发服务器将打开浏览器。

open: true

通过CLI使用

webpack-dev-server --open

如果未提供浏览器（如上所示），则将使用默认浏览器。要指定其他浏览器，只需传递其名称：

webpack-dev-server --open 'Google Chrome'

# `devServer.openPage`

type: boolean

指定打开浏览器时要浏览的页面。

openPage: '/different/page'

通过CLI使用

webpack-dev-server --open-page "/different/page"

# `devServer.overlay`

type: boolean object

出现编译器错误或警告时，在浏览器中显示全屏覆盖。默认禁用。如果只想显示编译器错误：

overlay: true

如果要显示警告和错误：

overlay: {
  warnings: true,
  errors: true
}

1
2
3
4

# `devServer.fpx`

type: string

通过CLI使用时，是SSL .pfx文件的路径。如果在选项中使用，则它应该是.pfx文件的字节流。

pfx: '/path/to/file.pfx'

通过CLI使用

webpack-dev-server --pfx /path/to/file.pfx

# `devServer.pfxPassphrase`

type: string

密码到SSL PFX文件。

pfxPassphrase: 'passphrase'

通过CLI使用

webpack-dev-server --pfx-passphrase passphrase

# `devServer.port`

type: number

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

port : 8080

通过CLI使用

webpack-dev-server --port 8080

# `devServer.proxy`

type: object

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求，那么代理某些 URL 会很有用。

dev-server 使用了非常强大的 http-proxy-middleware (opens new window) 包。更多高级用法，请查阅其文档 (opens new window)。

在 localhost:3000 上有后端服务的话，你可以这样启用代理：

proxy: {
  "/api": "http://localhost:3000"
}

1
2
3

请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。

如果你不想始终传递 /api ，则需要重写路径：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

1
2
3
4
5
6

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

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

1
2
3
4
5
6

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。

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

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

1
2
3
4
5
6
7
8
9
10
11

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

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

1
2
3
4

# `devServer.progress` - 只用于命令行工具(CLI)

type: boolean

将运行进度输出到控制台。

webpack-dev-server --progress

# `devServer.public`

type: string

当使用*内联模式(inline mode)*并代理 dev-server 时，内联的客户端脚本并不总是知道要连接到什么地方。它会尝试根据 window.location 来猜测服务器的 URL，但是如果失败，你需要这样。

例如，dev-server 被代理到 nginx，并且在 myapp.test 上可用：

public: "myapp.test:80"

通过CLI使用

webpack-dev-server --public myapp.test:80

# `devServer.publicPath`

type: string

此路径下的打包文件可在浏览器中访问。

假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

可以修改 publicPath，将 bundle 放在一个目录：

publicPath: "/assets/"

你的包现在可以通过 http://localhost:8080/assets/bundle.js 访问。

确保 publicPath 总是以斜杠(/)开头和结尾。

也可以使用一个完整的 URL。这是模块热替换所必需的。

publicPath: "http://localhost:8080/assets/"

bundle 可以通过 http://localhost:8080/assets/bundle.js 访问。

devServer.publicPath 和 output.publicPath 一样被推荐。

# `devServer.quiet`

type: boolean

启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。

quiet: true

通过CLI使用

webpack-dev-server --quiet

# `devServer.setup`

type: function

不建议使用此选项，before而将在v3.0.0中将其删除。

在这里，您可以访问Express应用程序对象，并向其中添加您自己的自定义中间件。例如，为某些路径定义自定义处理程序：

setup(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

1
2
3
4
5

# `devServer.socket`

type: string

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

socket: 'socket'

通过CLI使用

webpack-dev-server --socket socket

# `devServer.staticOptions`

可以配置高级选项以从中提供静态文件contentBase。有关可能的选项，请参阅Express文档 (opens new window)。一个例子：

staticOptions: {
  redirect: false
}

1
2
3

仅当contentBase用作时才有效string。

# `devServer.stats`

type: string, object

通过此选项，您可以精确控制要显示的捆绑软件信息。如果您需要一些捆绑软件信息，但又不是全部，这可能是很好的中间立场。

要仅显示捆绑软件中的错误：

stats: "errors-only"

有关更多信息，请参阅stats文档 (opens new window)。

与quiet或结合使用时，此选项无效noInfo。

# `devServer.stdin` -仅CLI

type: boolean

当stdin结束时，此选项将关闭服务器。

webpack-dev-server --stdin

# `devServer.useLocalIp`

type: boolean

此选项使浏览器可以使用您的本地IP打开。

useLocalIp: true

通过CLI使用

webpack-dev-server --useLocalIp

# `devServer.watchContentBase`

type: boolean

告诉服务器观看该devServer.contentBase选件提供的文件。文件更改将触发整个页面重新加载。

watchContentBase: true

默认情况下是禁用的。

通过CLI使用

webpack-dev-server --watch-content-base

# `devServer.watchOptions`

type: object

与监视文件相关的控制选项。

webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant (opens new window) 也有很多问题。在这些情况下，请使用轮询：

watchOptions: {
  poll: true
}

1
2
3

如果这对文件系统来说太重了的话，你可以修改间隔时间（以毫秒为单位），将其设置为一个整数。

查看 WatchOptions (opens new window) 更多选项。

编辑

#Webpack

上次更新: 2021/08/22, 01:09:59

← 插件(plugins) devtool→

开发中 Server(devServer)

# devServer

# devServer.after

# devServer.allowedHosts

# devServer.before

# devServer.bonjour

# devServer.clientLogLevel

# devServer.color -仅CLI

# devServer.compress

# devServer.contentBase

# devServer.disableHostCheck

# devServer.filename

# devServer.headers

# devServer.historyApiFallback

# devServer.host

# devServer.hot

# devServer.hotOnly

# devServer.https

# devServer.index

# devServer.info -仅CLI

# devServer.inline

# devServer.lazy

# devServer.noInfo

# devServer.open

# devServer.openPage

# devServer.overlay

# devServer.fpx

# devServer.pfxPassphrase

# devServer.port

# devServer.proxy

# devServer.progress - 只用于命令行工具(CLI)

# devServer.public

# devServer.publicPath

# devServer.quiet

# devServer.setup

# devServer.socket

# devServer.staticOptions

# devServer.stats

# devServer.stdin -仅CLI

# devServer.useLocalIp

# devServer.watchContentBase

# devServer.watchOptions

# `devServer`

# `devServer.after`

# `devServer.allowedHosts`

# `devServer.before`

# `devServer.bonjour`

# `devServer.clientLogLevel`

# `devServer.color` -仅`CLI`

# `devServer.compress`

# `devServer.contentBase`

# `devServer.disableHostCheck`

# `devServer.filename`

# `devServer.headers`

# `devServer.historyApiFallback`

# `devServer.host`

# `devServer.hot`

# `devServer.hotOnly`

# `devServer.https`

# `devServer.index`

# `devServer.info` -仅CLI

# `devServer.inline`

# `devServer.lazy`

# `devServer.noInfo`

# `devServer.open`

# `devServer.openPage`

# `devServer.overlay`

# `devServer.fpx`

# `devServer.pfxPassphrase`

# `devServer.port`

# `devServer.proxy`

# `devServer.progress` - 只用于命令行工具(CLI)

# `devServer.public`

# `devServer.publicPath`

# `devServer.quiet`

# `devServer.setup`

# `devServer.socket`

# `devServer.staticOptions`

# `devServer.stats`

# `devServer.stdin` -仅CLI

# `devServer.useLocalIp`

# `devServer.watchContentBase`

# `devServer.watchOptions`