DevServer

DevServer

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

此页面描述影响webpack-dev-server（简称：dev-server）行为的选项。

与webpack-dev-middleware兼容的选项有哪些？在他们旁边。

devServer

object

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/

请注意，导出多个配置时，只会devServer考虑第一个配置的选项，并将其用于阵列中的所有配置。如果遇到问题，导航到/webpack-dev-server路线将显示文件的送达位置。例如，http://localhost:9000/webpack-dev-server。

devServer.after

function

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

after(app){
  // do fancy stuff
}

devServer.allowedHosts

array

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

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

模仿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'
]

要在CLI中使用此选项，请将--allowed-hosts逗号分隔的字符串传递给选项。

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

devServer.before

function

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

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

devServer.bonjour

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

bonjour: true

Usage via the CLI

webpack-dev-server --bonjour

devServer.clientLogLevel

string

您可以使用此选项阻止显示所有这些消息：

clientLogLevel: "none"

通过CLI使用

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

可能的值是none，error，warning或info（默认值）。

devServer.color - CLI only

boolean

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

webpack-dev-server --color

devServer.compress

boolean

为服务的所有内容启用gzip压缩：

compress: true

通过CLI使用

webpack-dev-server --compress

devServer.contentBase

boolean string array

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

boolean

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

disableHostCheck: true

通过CLI使用

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

devServer.filename ?

string

这个选项可以让您在懒惰模式下减少编译。默认情况下，在懒惰模式下，每个请求都会导致新的编译。有了filename，只有在请求某个文件时才可以编译。

如果output.filename设置为bundle.js并且文件名如下所示：

lazy: true,
filename: "bundle.js"

它现在只会在/bundle.js请求时编译这个包。

filename在懒惰模式下使用时没有效果。

devServer.headers ?

object

为所有响应添加标题：

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

devServer.historyApiFallback

boolean object

使用HTML5 History API时，index.html可能必须提供该页面来代替任何404响应。传递：

historyApiFallback: true

通过传递对象，可以使用如rewrites选项进一步控制此行为：

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

在路径中使用点（与Angular常见）时，您可能需要使用disableDotRule：

historyApiFallback: {
  disableDotRule: true
}

通过CLI使用

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

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

devServer.host

string

指定要使用的主机。这是默认的localhost。如果你希望你的服务器可以被外部访问，请指定它如下所示：

host: "0.0.0.0"

通过CLI使用

webpack-dev-server --host 0.0.0.0

devServer.hot

boolean

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

hot: true

请注意，需要webpack.HotModuleReplacementPlugin才能完全启用HMR。 如果使用--hot选项启动webpack或webpack-dev-server，则会自动添加此插件，因此您可能不需要将其添加到webpack.config.js中。 请参阅HMR概念页面以获取更多信息。

devServer.hotOnly

boolean

在生成失败的情况下，启用热模块替换（请参阅devServer.hot），而不刷新页面作为回退。

hotOnly: true

通过CLI使用

webpack-dev-server --hot-only

devServer.https

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"),
}

该对象直接传递给Node.js HTTPS模块，因此请参阅HTTPS文档以获取更多信息。

通过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

string

被认为是索引文件的文件名。

index: 'index.htm'

devServer.info - CLI only

boolean

输出cli信息。它是默认启用的。

webpack-dev-server --info=false

devServer.inline

boolean

在开发者服务器的两种不同模式之间切换。默认情况下，应用程序将使用内联模式 启用。这意味着将在您的包中插入一个脚本来处理实时重新加载，并且构建消息将显示在浏览器控制台中。

也可以使用iframe模式，该模式<iframe>在通知栏下使用关于构建的消息。切换到iframe模式：

inline: false

通过CLI使用

webpack-dev-server --inline=false

内置模式推荐用于热模块更换，因为它包含来自WebSocket的HMR触发器。轮询模式可以用作替代方法，但需要额外的入口点'webpack/hot/poll?1000'。

devServer.lazy ?

boolean

当lazy启用时，当它被请求的DEV-服务器将只编译软件包。这意味着webpack不会看到任何文件更改。我们称之为懒惰模式。

lazy: true

通过CLI使用

webpack-dev-server --lazy

与懒惰模式一起使用时，watchOptions将不起作用。

devServer.noInfo ?

boolean

当带着noInfo启动时所显示和之后的每个像的WebPack束信息消息保存，将被隐藏。错误和警告仍将显示。

noInfo: true

devServer.open

boolean

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

open: true

通过CLI使用

webpack-dev-server --open

devServer.openPage

string

指定打开浏览器时导航到的页面。

openPage: '/different/page'

通过CLI使用

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

devServer.overlay

boolean object

当出现编译器错误或警告时，在浏览器中显示全屏叠加。默认情况下禁用。如果您只想显示编译器错误：

overlay: true

如果你想显示警告和错误：

overlay: {
  warnings: true,
  errors: true
}

devServer.pfx

string

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

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

通过CLI使用

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

devServer.pfxPassphrase

string

SSL PFX文件的密码。

pfxPassphrase: 'passphrase'

通过CLI使用

webpack-dev-server --pfx-passphrase passphrase

devServer.port

number

指定一个端口号来侦听请求：

port: 8080

通过CLI使用

webpack-dev-server --port 8080

devServer.proxy

object

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

dev-server使用功能强大的http-proxy-middleware软件包。 查看其文档以获取更高级的用法。

使用localhost：3000上的后端，您可以使用它来启用代理：

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

对/ api /用户的请求现在会将请求代理到http：// localhost：3000 / api / users。

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

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

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

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

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

在该函数中，您可以访问请求，响应和代理选项。它必须返回一个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";
      }
    }
  }
}

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

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

devServer.progress - CLI only

boolean

输出运行进度到控制台。

webpack-dev-server --progress

devServer.public

string

在使用内联模式并且代理开发服务器时，内联客户端脚本并不总是知道在哪里连接。 它会尝试根据window.location来猜测服务器的URL，但如果失败了，你需要使用它。

例如，dev-server由nginx代理，可用于myapp.test：

public: "myapp.test:80"

通过CLI使用

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

devServer.publicPath ?

string

捆绑文件将在此路径下的浏览器中可用。

假设服务器在http：// localhost：8080下运行，并且output.filename被设置为bundle.js。 默认情况下，publicPath是“/”，所以你的bundle可以使用http：// localhost：8080 / bundle.js。

该publicPath是可以改变的，因此包放在一个目录：

publicPath: "/assets/"

该软件包现在可用http://localhost:8080/assets/bundle.js。

确保publicPath始终以正斜杠开始和结束。

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

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

该捆绑包也将以http：// localhost：8080 / assets / bundle.js的形式提供。

建议devServer.publicPath与output.publicPath相同。

devServer.quiet ?

boolean

启用quiet后，除初始启动信息外，没有任何内容会写入控制台。 这也意味着来自webpack的错误或警告不可见。

quiet: true

通过CLI使用

webpack-dev-server --quiet

devServer.setup

function

此选项已被弃用，before并将在v3.0.0中被删除。

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

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

devServer.socket

string

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

socket: 'socket'

通过CLI使用

webpack-dev-server --socket socket

devServer.staticOptions

可以配置用于从contentBase提供静态文件的高级选项。 请参阅Express文档以了解可能的选项。 一个例子：

staticOptions: {
  redirect: false
}

这仅在使用contentBase作为字符串时才有效。

devServer.stats ?

string object

通过此选项，您可以精确控制显示的包信息。如果你想要一些捆绑信息，但这不是全部，这可能是一个不错的中间立场。

仅显示您的包中的错误：

stats: "errors-only"

有关更多信息，请参阅统计文档。

与quiet或noInfo一起使用时，此选项无效。

devServer.stdin - CLI only

boolean

该选项在标准输入结束时关闭服务器。

webpack-dev-server --stdin

devServer.useLocalIp

boolean

该选项允许浏览器使用本地IP打开。

useLocalIp: true

通过CLI使用

webpack-dev-server --useLocalIp

devServer.watchContentBase

boolean

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

watchContentBase: true

它默认是禁用的。

通过CLI使用

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

devServer.watchOptions ?

object

与观看文件相关的控制选项。

webpack使用文件系统来获取文件更改的通知。在某些情况下，这不起作用。例如，使用网络文件系统（NFS）时。流浪者也有这个问题很多。在这些情况下，使用轮询：

watchOptions: {
  poll: true
}

如果在文件系统上就太重了，可以将其更改为一个整数以设置以毫秒为单位的时间间隔。

有关更多选项，请参阅WatchOptions。