跳转到主文档

tools.devServer

  • 类型: Object
  • 默认值: {}

对应 DevServer 的配置,用于配置开发环境运行的服务器的选项:

modern.config.js
export default defineConfig({
tools: {
devServer: {
hot: true,
https: false,
liveReload: true,
},
},
});

配置项

Modern.js 基于 webpack-dev-middleware 实现 DevServer,大部分配置与 webpack-dev-server 完全一致,少部分配置存在差异。

对于存在差异的配置,一部分可以使用 Modern.js 中的其他配置项代替,也有一部分配置还未实现或无需实现,下方完整列出了这些内容。

支持的配置项

配置名作用支持状态
client配置 dev-server 相关功能,如日志等Y
compress是否开启 gzip 压缩N
devMiddlewarewebpack-dev-middleware 相关配置Y
https开启 httpsY
headers设置自定义响应头Y
hot是否可以使用 webpack 热模块替换Y
liveReload是否可以 reload 页面Y
onListening监听启动N
open构建完成后自动打开页面N
proxy代理Y
watchFiles需要监听的文件N

拥有替代功能的配置项

配置名作用替代方案
historyApiFallback重定向部分 URLserver.routes
onAfterSetupMiddleware在 webpack-dev-server internal middleware 后执行,可以添加后续中间件devServer.after
onBeforeSetupMiddleware在 webpack-dev-server internal middleware 前执行,可以添加前置中间件devServer.before
portdev server 监听端口server.port
static托管静态资源文件config/publicserver.publicRoutesconfig/upload

API

hot

  • 类型: boolean
  • 默认值: true

是否开启 webpack 的 Hot Module Replacement 热更新能力。

关闭这项配置后,会移除 HotModuleReplacementPluginreact-refresh-webpack-plugin

liveReload

  • 类型: boolean
  • 默认值: true

默认情况下,当监听到文件变化时,dev server 将会刷新页面。

通过这个配置项可以关闭该行为。

before

实验性的

这是一个实验性功能。

  • 类型: Array
  • 默认值: null

在所有开发环境中间件前执行:

devServer: {
before: [
async (req, res, next) => {
console.log('before dev middleware');
next();
},
],
},

after

实验性的

这是一个实验性功能。

  • 类型: Array
  • 默认值: null

在所有开发环境中间件后执行:

devServer: {
after: [
async (req, res, next) => {
console.log('after dev middleware');
next();
},
],
},

client

  • 类型: Object
  • 默认值: {}

通过将 host 和 path 设置为空来自动推导 dev server 的 URL:

devServer: {
client: {
host: '',
port: '',
},
},