开发中Server(DevServer)

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

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

T>与webpack-dev-middleware兼容的选项旁边有。

devServer

object

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

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

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

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

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

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

W> Be aware that when exporting multiple configurations only the devServeroptions for the first configuration will be taken into account and used for all the configurations in the array.

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

devServer.after

function

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

after(app){  // do fancy stuff}

devServer.allowedHosts

array

This option allows you to whitelist services that are allowed to access the dev server.

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

Mimicking django's ALLOWED_HOSTS, a value beginning with .can be used as a subdomain wildcard. .host.comwill match host.com, www.host.com, and any other subdomain of 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'
]

To use this option with the CLI pass the --allowed-hostsoption a comma-delimited string.

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

devServer.before

function

Provides the ability to execute custom middleware prior to all other middleware internally within the server. This could be used to define custom handlers, for example:

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

devServer.bonjour

This option broadcasts the server via ZeroConf networking on start

bonjour: true

Usage via the CLI

webpack-dev-server --bonjour

devServer.clientLogLevel

string

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

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

clientLogLevel: "none"

Usage via the CLI

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

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

devServer.color - CLI only

boolean

Enables/Disables colors on the console.

webpack-dev-server --color

devServer.compress

boolean

一切服务都启用gzip压缩：

compress: true

Usage via the CLI

webpack-dev-server --compress

devServer.contentBase

boolean string array

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

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

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

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

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

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

禁用contentBase：

contentBase: false

Usage via the CLI

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

devServer.disableHostCheck

boolean

When set to true this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.

disableHostCheck: true

Usage via the CLI

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