DevServer

webpack-dev-server 可用于快速开发应用程序。请查阅 开发指南 开始使用。

当前页面记录了影响 webpack-dev-server (简写: dev-server)配置的选项。

开发服务器(devServer)

object

通过 webpack-dev-server 的这些配置,能够以多种方式改变其行为。这是一个基本的示例,利用 gzips 压缩 dist/ 目录当中的所有内容并提供一个本地服务(serve):

webpack.config.js

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

当服务(server)启动后,在解析模块列表之前输出一条消息:

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。

Usage via CLI

你可以通过 CLI 调用 webpack-dev-server,方式是:

npx webpack serve

CLI 配置项列表可以在 这里 查询。

devServer.after

function (app, server, compiler)

提供自定义中间件,当 devServer 服务器内部的 所有中间件执行完成之后执行

webpack.config.js

module.exports = {
  //...
  devServer: {
    after: function (app, server, compiler) {
      // do fancy stuff
    },
  },
};

devServer.allowedHosts

[string]

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};

模仿 django 的ALLOWED_HOSTS,用 . 作为子域通配符。.host.com 会与 host.comwww.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 一起使用,请按照如下所示传入 --allowed-hosts

npx webpack serve --entry ./entry/file --output-path ./output/path --allowed-hosts .host.com --allowed-hosts host2.com

devServer.before

function (app, server, compiler)

提供了一个在 devServer 内部的 所有中间件执行之前的自定义执行函数。 例:

webpack.config.js

module.exports = {
  //...
  devServer: {
    before: function (app, server, compiler) {
      app.get('/some/path', function (req, res) {
        res.json({ custom: 'response' });
      });
    },
  },
};

devServer.bonjour

boolean = false

这个配置用于在启动时通过 ZeroConf 网络广播你的开发服务器,用于服务发现。

webpack.config.js

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

通过命令行使用

npx webpack serve --bonjour

devServer.clientLogLevel

string = 'info': 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none' | 'warning'

当使用 inline mode 时, DevTools 会输出信息,例如:重新加载之前,出错之前或 Hot Module Replacement 被开启时。

devServer.clientLogLevel 可能会导致日志过于冗余,你可以通过将其设置为 'silent' 来关闭日志。

webpack.config.js

module.exports = {
  //...
  devServer: {
    clientLogLevel: 'silent',
  },
};

通过命令行使用

npx webpack serve --client-log-level silent

devServer.compress

boolean

为每个静态文件开启 gzip compression

webpack.config.js

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

通过命令行使用

npx webpack serve --compress

devServer.contentBase

boolean: false string [string] number

告诉服务器内容的来源。仅在需要提供静态文件时才进行配置。devServer.publicPath 将用于确定 bundle 的来源,并具有优先级高于 contentBase。

默认情况下,它将使用当前的工作目录来提供内容。 要禁用 contentBase ,请将其设置为 false

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'public'),
  },
};

如果想使用 contentBasePublicPath 在多个 URL 上提供静态内容,也可以从多个目录提供服务:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: [
      path.join(__dirname, 'public'),
      path.join(__dirname, 'assets'),
    ],
  },
};

通过命令行使用

npx webpack serve --content-base ./path/to/content/dir

devServer.contentBasePublicPath

string = '/' [string]

告诉服务器使用哪个 URL 服务 devServer.contentBase 静态内容。如果有一个文件 assets/manifest.json ,它将在 /serve-content-base-at-this-url/manifest.json 中提供。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'assets'),
    contentBasePublicPath: '/serve-content-base-at-this-url',
  },
};

如果在 contentBase 中设置了多个静态文件夹,请提供一个字符串数组。

webpack.config.js

module.exports = {
  //...
  devServer: {
    contentBase: [contentBasePublic, contentBaseOther],
    contentBasePublicPath: [contentBasePublicPath, contentBasePublicOtherPath],
  },
};

devServer.disableHostCheck

boolean

当将此项配置设置为 true 时,将会跳过 host 检查。这是不推荐的因为不检查 host 的应用容易受到 DNS 重新绑定攻击。

webpack.config.js

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

通过命令行使用

npx webpack serve --disable-host-check

devServer.filename 🔑

string

此选项可以减少在 lazy 模式中的编译操作。 默认情况下,在 lazy 模式中,每个请求都触发新的编译。使用 filename 仅当请求某个文件时才可执行编译。

如果 output.filename 设置为'bundle.js',则使用 devServer.filename 如下:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    lazy: true,
    filename: 'bundle.js',
  },
};

现在它将仅在请求 /bundle.js 时编译该捆绑软件。

devServer.headers 🔑

object

为所有请求添加响应标头:

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar',
    },
  },
};

devServer.historyApiFallback

boolean = false object

当使用 HTML5 History API 时, 所有的 404 请求都会响应 index.html 的内容。 将 devServer.historyApiFallback 设为 true开启:

webpack.config.js

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

通过传递对象,可以使用配置选项诸如 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,
    },
  },
};

通过命令行使用

npx webpack serve --history-api-fallback

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

devServer.host

string = 'localhost'

指定要使用的 host。如果你希望服务器可从外部访问,请按以下方式进行配置:

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};

通过命令行使用

npx webpack serve --host 0.0.0.0

devServer.hot

boolean

启用 webpack 的 Hot Module Replacement 功能:

webpack.config.js

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

devServer.hotOnly

boolean

启用热模块替换(请参见 devServer.hot ),而无需页面刷新作为构建失败时的回退。

webpack.config.js

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

通过命令行使用

npx webpack serve --hot-only

devServer.http2

boolean = false

使用 spdy 提供 HTTP/2 服务。对于 Node 10.0.0 及更高版本,此选项将被忽略,因为 spdy 在这些版本中已被破坏。一旦 Express 支持,开发服务器将迁移到 Node 内置的 HTTP/2。

如果未将 devServer.http2 显式设置为 false ,则在启用 devServer.https 时将默认为 true 。 如果启用 devServer.http2,但服务器无法通过 HTTP/2 提供服务,则服务器默认为 HTTPS。

HTTP/2 带有自签名证书:

webpack.config.js

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

通过 https 配置你自己的证书文件:

webpack.config.js

module.exports = {
  //...
  devServer: {
    http2: true,
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    },
  },
};

通过命令行使用

npx webpack serve --http2

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

npx webpack serve --http2 --key ./path/to/server.key --cert ./path/to/server.crt --cacert ./path/to/ca.pem

devServer.https

boolean object

默认情况下,开发服务器将通过 HTTP 提供服务。可以选择使用 HTTPS 通过 HTTP/2 提供服务:

webpack.config.js

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

根据上述配置,将使用自签名证书,但是你也可以提供自己的证书:

webpack.config.js

module.exports = {
  //...
  devServer: {
    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 documentation 以获取更多信息。

通过命令行使用

npx webpack serve --https

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

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

devServer.index

string

设置 index 文件的文件名。

webpack.config.js

module.exports = {
  //...
  devServer: {
    index: 'index.html',
  },
};

devServer.injectClient

boolean = false function (compilerConfig) => boolean

devServer 注入一个客户端。设置 devServer.injectClient 值为 true 时,会向服务注入客户端。也可以设置条件注入函数:

module.exports = {
  //...
  devServer: {
    injectClient: (compilerConfig) => compilerConfig.name === 'only-include',
  },
};

devServer.injectHot

boolean = false function (compilerConfig) => boolean

告诉 devServer 注入热模块替换。设置 devServer.injectHot 值为 true 时,会始终注入。也可以设置条件注入函数:

module.exports = {
  //...
  devServer: {
    hot: true,
    injectHot: (compilerConfig) => compilerConfig.name === 'only-include',
  },
};

devServer.inline

boolean

在开发服务器的两种不同模式之间切换。默认情况下,应用程序将启用 inline 模式。这意味着将在 bundle 中插入脚本以进行实时重新加载,并且构建消息将出现在浏览器控制台中。

也可以使用 iframe 模式,它在通知栏下使用带有有关构建消息的<iframe>。 切换到 iframe 模式

webpack.config.js

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

通过命令行使用

npx webpack serve --inline

请注意在 CLI 中没有方法禁用它。

devServer.lazy 🔑

boolean

启用 devServer.lazy 时,开发服务器仅在收到请求时才编译捆绑软件。 这意味着 webpack 将不会监视任何文件更改。 我们称这种方式为“懒惰模式(lazy mode)”。

webpack.config.js

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

通过命令行使用

npx webpack serve --lazy

devServer.liveReload

boolean = true

默认情况下,检测到文件更改时,开发服务器将重新加载/刷新页面。 必须禁用 devServer.hot 选项或必须启用 devServer.watchContentBase 选项,才能使 liveReload 生效。 通过将其设置为 false 来禁用 devServer.liveReload:

webpack.config.js

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

通过命令行使用

npx webpack serve --liveReload

请注意在 CLI 中没有方法禁用它。

devServer.mimeTypes 🔑

object

允许 dev-server 注册自定义的 mime 类型。 该对象被传递到底层的 webpack-dev-middleware。 有关使用说明,请参见 documentation

webpack.config.js

module.exports = {
  //...
  devServer: {
    mimeTypes: { 'text/html': ['phtml'] },
  },
};

devServer.noInfo 🔑

boolean = false

告诉开发服务器禁止显示诸如 Webpack 捆绑包信息之类的消息。 错误和警告仍将显示。

webpack.config.js

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

devServer.onListening

function (server)

提供一个选项,当 webpack-dev-server 开始监听端口上的连接时,执行自定义功能。

webpack.config.js

module.exports = {
  //...
  devServer: {
    onListening: function (server) {
      const port = server.listeningApp.address().port;
      console.log('Listening on port:', port);
    },
  },
};

devServer.open

boolean = false string object

告诉 dev-server 在服务器启动后打开浏览器。 将其设置为 true 以打开默认浏览器。

webpack.config.js

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

提供要使用的浏览器名称,而不是默认名称:

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: 'Google Chrome',
  },
};

如果要在打开浏览器时使用标志,例如打开隐身窗口( --incognito 标志),则可以将 open 设置为对象。 该对象接受所有 open 选项,app 属性必须是一个数组。 数组中的第一个元素必须是浏览器名称,其他后面的元素是要使用的标志。 例如:

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      app: ['Google Chrome', '--incognito', '--other-flag'],
    },
  },
};

通过命令行使用

npx webpack serve --open 'Google Chrome'

devServer.openPage

string [string]

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: true,
    openPage: 'different/page',
  },
};

通过命令行使用

npx webpack serve --open --open-page different/page

如果希望指定多个页面在浏览器中打开。

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: true,
    openPage: ['different/page1', 'different/page2'],
  },
};

通过命令行使用

npx webpack serve --open --open-page different/page1 --open-page different/page2

devServer.overlay

boolean = false object: { errors boolean = false, warnings boolean = false }

出现编译器错误或警告时,在浏览器中显示全屏覆盖。 如果只想显示编译器错误:

webpack.config.js

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

如果要显示警告和错误:

webpack.config.js

module.exports = {
  //...
  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },
};

devServer.pfx

string

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    pfx: './path/to/file.pfx',
  },
};

通过命令行使用

npx webpack serve --pfx ./path/to/file.pfx

devServer.pfxPassphrase

string

将密码短语转换为 SSL PFX 文件。

webpack.config.js

module.exports = {
  //...
  devServer: {
    pfxPassphrase: 'passphrase',
  },
};

通过命令行使用

npx webpack serve --pfx-passphrase passphrase

devServer.port

number

指定端口号以侦听以下请求:

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

通过命令行使用

npx webpack serve --port 8080

devServer.proxy

object [object, function]

当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时,代理某些 URL 可能会很有用。

开发服务器使用功能强大的 http-proxy-middleware 软件包。 查看其 documentation 了解更多高级用法。 请注意,http-proxy-middleware 的某些功能不需要target键,例如 它的 router 功能,但是仍然需要在此处的配置中包含target,否则webpack-dev-server 不会将其传递给 http-proxy-middleware)。

使用后端在 localhost:3000 上,可以使用它来启用代理:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

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

如果不希望传递/api,则需要重写路径:

webpack.config.js

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

默认情况下,将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要,可以这样修改配置:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};

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

在该功能中,可以访问请求,响应和代理选项。

  • 返回 nullundefined 以继续使用代理处理请求。
  • 返回 false 会为请求产生 404 错误。
  • 返回提供服务的路径,而不是继续代理请求。

例如。 对于浏览器请求,想要提供 HTML 页面,但是对于 API 请求,想要代理它。 可以执行以下操作:

webpack.config.js

module.exports = {
  //...
  devServer: {
    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 属性的对象的数组:

webpack.config.js

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

请注意,默认情况下不会代理对 root 的请求。 要启用根代理,应将 devServer.index 选项指定为虚假值:

webpack.config.js

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

默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 以覆盖此行为。 在某些情况下,例如使用 name-based virtual hosted sites,它很有用。

webpack.config.js

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

devServer.progress - CLI only

boolean

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

npx webpack serve --progress

devServer.public

string

使用 inline 模式 并代理 dev-server 时,内联客户端脚本并不总是知道要连接到哪里。 它将尝试基于 window.location 猜测服务器的 URL,但是如果失败,则需要使用它。

例如,开发服务器由 nginx 代理,并在 myapp.test 上可用:

webpack.config.js

module.exports = {
  //...
  devServer: {
    public: 'myapp.test:80',
  },
};

通过命令行使用

npx webpack serve --public myapp.test:80

devServer.publicPath 🔑

string = '/'

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

假设服务器在 http://localhost:8080 下运行,并且 output.filename 设置为 bundle.js。 默认情况下,devServer.publicPath'/',因此的捆绑软件可以作为 http://localhost:8080/bundle.js 获得。

更改 devServer.publicPath 以将捆绑软件放在特定目录下:

webpack.config.js

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/',
  },
};

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

也可以使用完整的 URL。

webpack.config.js

module.exports = {
  //...
  devServer: {
    publicPath: 'http://localhost:8080/assets/',
  },
};

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

devServer.quiet 🔑

boolean

启用 devServer.quiet 后,除了初始启动信息外,什么都不会写入控制台。 这也意味着来自 webpack 的错误或警告是不可见的。

webpack.config.js

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

通过命令行使用

npx webpack serve --quiet

devServer.serveIndex

boolean = true

告诉开发服务器启用后使用 serveIndex 中间件。

serveIndex 中间件会在查看没有 index.html 文件的目录时生成目录列表。

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

通过 CLI 使用

npx webpack serve --serveIndex

devServer.setup

function (app, server)

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

webpack.config.js

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

devServer.sockHost

string

告诉连接到 devServer 的客户端使用提供的套接字主机。

webpack.config.js

module.exports = {
  //...
  devServer: {
    sockHost: 'myhost.test',
  },
};

devServer.sockPath

string = '/sockjs-node'

连接到重装插槽的路径。

webpack.config.js

module.exports = {
  //...
  devServer: {
    sockPath: '/socket',
  },
};

通过命令行使用

npx webpack serve --sock-path /socket

devServer.sockPort

number string

告诉连接到devServer的客户端使用提供的套接字端口。

webpack.config.js

module.exports = {
  //...
  devServer: {
    sockPort: 8080,
  },
};

devServer.staticOptions

object

可以配置高级选项以从 contentBase 提供静态文件。 有关可能的选项,请参见 Express documentation

webpack.config.js

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

devServer.stats 🔑

string: 'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object

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

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

webpack.config.js

module.exports = {
  //...
  devServer: {
    stats: 'errors-only',
  },
};

有关更多信息,请参见 stats documentation

devServer.stdin - CLI only

boolean

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

npx webpack serve --stdin

devServer.transportMode

string = 'sockjs': 'sockjs' | 'ws' object

这个选项允许我们要么为客户端/服务器分别选择当前的devServer传输模式,要么提供定制的客户端/服务器实现。 这允许指定浏览器或其他客户端如何与devServer通信。

当前的默认模式是 'sockjs'。 此模式使用 SockJS-node 作为服务器,并使用 SockJS-client 在客户端上。

在下一代主要的 devServer 版本中,'ws' 模式将成为默认模式。 此模式将 ws 用作服务器,并在客户端上使用本机 WebSocket。

Use 'ws' mode:

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

devServer.transportMode.client

string path

要创建自定义客户端实现,请创建一个扩展并继承 BaseClient.

使用CustomServer.js导出的类实现自定义 WebSocket 客户端并兼容ws服务端:

module.exports = {
  //...
  devServer: {
    transportMode: {
      client: require.resolve('./CustomClient'),
      server: 'ws',
    },
  },
};

devServer.transportMode.server

string path function

要创建自定义服务器实现,请创建一个扩展并继承 BaseServer.

使用CustomServer.js导出的类实现自定义 WebSocket 服务器并兼容ws客户端:

module.exports = {
  //...
  devServer: {
    transportMode: {
      client: 'ws',
      server: require.resolve('./CustomServer'),
    },
  },
};

使用 CustomServer.js 导出的类实现自定义 WebSocket 服务器并兼容 ws 客户端:

module.exports = {
  //...
  devServer: {
    transportMode: {
      client: 'ws',
      server: require('./CustomServer'),
    },
  },
};

使用自定义兼容的 WebSocket 客户端和服务器实现:

module.exports = {
  //...
  devServer: {
    transportMode: {
      client: require.resolve('./CustomClient'),
      server: require.resolve('./CustomServer'),
    },
  },
};

devServer.useLocalIp

boolean

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

webpack.config.js

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

通过命令行使用

npx webpack serve --useLocalIp

devServer.watchContentBase

boolean

告诉 dev-server 监听 [devServer.contentBase](#devservercontentbase)选项提供的文件。 默认情况下禁用。 启用后,文件更改将触发整个页面重新加载。

webpack.config.js

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

通过命令行使用

npx webpack serve --watch-content-base

devServer.watchOptions 🔑

object

控制监听文件的选项。

webpack 使用文件系统来通知文件更改。 在某些情况下,这不起作用。 例如,使用网络文件系统(NFS)时。 Vagrant 也有很多问题。 在这些情况下,请使用轮询:

webpack.config.js

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

如果这对文件系统负荷太重,可以将其设置为整数用以调整轮询间隔(以毫秒为单位)。

查阅 WatchOptions 了解更多。

devServer.writeToDisk 🔑

boolean = false function (filePath) => boolean

告诉 devServer 将产生的文件写入硬盘。 写入位置为 output.path 配置的目录。

webpack.config.js

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

可以给 devServer.writeToDisk 传入一个函数用来筛选哪些文件需要写入硬盘。传入函数的用法和Array#filter 的用法一致。

webpack.config.js

module.exports = {
  //...
  devServer: {
    writeToDisk: (filePath) => {
      return /superman\.css$/.test(filePath);
    },
  },
};

package.json

{
  "scripts": "NODE_OPTIONS='--max-http-header-size=100000' webpack serve"
}