文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DevServer

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

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

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

devServer

object

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

代码语言：javascript
复制
devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

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

代码语言：javascript
复制
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 的示例，请查看此处。

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

devServer.after

function

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

代码语言：javascript
复制
after(app){
  // do fancy stuff
}

devServer.allowedHosts

array

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

代码语言：javascript
复制
allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
]

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

代码语言：javascript
复制
// 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逗号分隔的字符串传递给选项。

代码语言：javascript
复制
webpack-dev-server --entry /entry/file --output-path /output/path --allowed-hosts .host.com,host2.com

devServer.before

function

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

代码语言：javascript
复制
before(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

devServer.bonjour

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

代码语言：javascript
复制
bonjour: true

Usage via the CLI

代码语言：javascript
复制
webpack-dev-server --bonjour

devServer.clientLogLevel

string

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

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

代码语言：javascript
复制
clientLogLevel: "none"

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --client-log-level none

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

devServer.color - CLI only

boolean

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

代码语言：javascript
复制
webpack-dev-server --color

devServer.compress

boolean

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

代码语言：javascript
复制
compress: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --compress

devServer.contentBase

boolean string array

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

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

代码语言：javascript
复制
contentBase: path.join(__dirname, "public")

请注意，建议使用绝对路径。

它也可以从多个目录进行服务：

代码语言：javascript
复制
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

禁用contentBase：

代码语言：javascript
复制
contentBase: false

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --content-base /path/to/content/dir

devServer.disableHostCheck

boolean

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

代码语言：javascript
复制
disableHostCheck: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --disable-host-check

devServer.filename ?

string

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

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

代码语言：javascript
复制
lazy: true,
filename: "bundle.js"

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

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

devServer.headers ?

object

为所有响应添加标题：

代码语言：javascript
复制
headers: {
  "X-Custom-Foo": "bar"
}

devServer.historyApiFallback

boolean object

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

代码语言：javascript
复制
historyApiFallback: true

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

代码语言：javascript
复制
historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}

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

代码语言：javascript
复制
historyApiFallback: {
  disableDotRule: true
}

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --history-api-fallback

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

devServer.host

string

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

代码语言：javascript
复制
host: "0.0.0.0"

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --host 0.0.0.0

devServer.hot

boolean

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

代码语言：javascript
复制
hot: true

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

devServer.hotOnly

boolean

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

代码语言：javascript
复制
hotOnly: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --hot-only

devServer.https

boolean object

默认情况下，dev-server将通过HTTP提供服务。它可以通过HTTPS通过HTTP / 2进行服务：

代码语言：javascript
复制
https: true

通过上述设置，将使用自签名证书，但您可以提供自己的：

代码语言：javascript
复制
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使用

代码语言：javascript
复制
webpack-dev-server --https

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

代码语言：javascript
复制
webpack-dev-server --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem

devServer.index

string

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

代码语言：javascript
复制
index: 'index.htm'

devServer.info - CLI only

boolean

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

代码语言：javascript
复制
webpack-dev-server --info=false

devServer.inline

boolean

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

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

代码语言：javascript
复制
inline: false

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --inline=false

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

devServer.lazy ?

boolean

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

代码语言：javascript
复制
lazy: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --lazy

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

? 如果您使用CLI，请确保内联模式已禁用。

devServer.noInfo ?

boolean

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

代码语言：javascript
复制
noInfo: true

devServer.open

boolean

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

代码语言：javascript
复制
open: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --open

devServer.openPage

string

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

代码语言：javascript
复制
openPage: '/different/page'

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --open-page "/different/page"

devServer.overlay

boolean object

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

代码语言：javascript
复制
overlay: true

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

代码语言：javascript
复制
overlay: {
  warnings: true,
  errors: true
}

devServer.pfx

string

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

代码语言：javascript
复制
pfx: '/path/to/file.pfx'

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --pfx /path/to/file.pfx

devServer.pfxPassphrase

string

SSL PFX文件的密码。

代码语言：javascript
复制
pfxPassphrase: 'passphrase'

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --pfx-passphrase passphrase

devServer.port

number

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

代码语言：javascript
复制
port: 8080

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --port 8080

devServer.proxy

object

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

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

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

代码语言：javascript
复制
proxy: {
  "/api": "http://localhost:3000"
}

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

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

代码语言：javascript
复制
proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

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

代码语言：javascript
复制
proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

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

在该函数中，您可以访问请求，响应和代理选项。它必须返回一个false或者一个将被服务的路径，而不是继续代理请求。

例如，对于浏览器请求，您想要提供HTML页面，但是需要代理它的API请求。你可以做这样的事情：

代码语言：javascript
复制
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属性的一个或多个对象的数组：

代码语言：javascript
复制
proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

devServer.progress - CLI only

boolean

输出运行进度到控制台。

代码语言：javascript
复制
webpack-dev-server --progress

devServer.public

string

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

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

代码语言：javascript
复制
public: "myapp.test:80"

通过CLI使用

代码语言：javascript
复制
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是可以改变的，因此包放在一个目录：

代码语言：javascript
复制
publicPath: "/assets/"

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

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

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

代码语言：javascript
复制
publicPath: "http://localhost:8080/assets/"

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

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

devServer.quiet ?

boolean

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

代码语言：javascript
复制
quiet: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --quiet

devServer.setup

function

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

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

代码语言：javascript
复制
setup(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

devServer.socket

string

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

代码语言：javascript
复制
socket: 'socket'

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --socket socket

devServer.staticOptions

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

代码语言：javascript
复制
staticOptions: {
  redirect: false
}

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

devServer.stats ?

string object

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

仅显示您的包中的错误：

代码语言：javascript
复制
stats: "errors-only"

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

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

devServer.stdin - CLI only

boolean

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

代码语言：javascript
复制
webpack-dev-server --stdin

devServer.useLocalIp

boolean

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

代码语言：javascript
复制
useLocalIp: true

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --useLocalIp

devServer.watchContentBase

boolean

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

代码语言：javascript
复制
watchContentBase: true

它默认是禁用的。

通过CLI使用

代码语言：javascript
复制
webpack-dev-server --watch-content-base

devServer.watchOptions ?

object

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

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

代码语言：javascript
复制
watchOptions: {
  poll: true
}

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

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com