目录结构:
// 开发服务器环境
devServer: {
// 运行代码的目录
contentBase: resolve(__dirname, "build"),
// 端口号
port: 3000,
// 自动打开浏览器
open: true
},
1> host域名的配置
host: "127.0.0.1",
2> compress启动压缩
配置compress进行服务启动压缩,开启gzip的压缩,开启 gzip之后,内容是原来的21%体积
compress: true
3> watchContentBase监听目录
告诉 dev-server 监听选项提供的文件。 默认情况下禁用。 启用后,文件更改将触发整个页面重新加载
watchContentBase: true,
4> watchOptions监听配置
watchOptions: {
// 忽略监听的文件内容
ignored: /node_modules/
}
5> clientLogLevel客户端日志
可能会导致日志过于冗余,可以通过将其设置为 'silent' 来关闭日志
// 客户端信息的配置
clientLogLevel: "silent"
6> stats编辑器信息管理
如果需要一些捆绑软件信息,但又不是全部,这可能是一个很好的中间立场。
可能的配置'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object
比如值抛出错误信息
stats: 'errors-only',
7> quiet的静谧状态
除了显示初始信息之外,什么都不会写入编辑器控制台。 这也意味着来自webpack的错误或警告是不可见的。
quiet :true
8> proxy的代理
当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时,代理某些 URL 可能会很有用。
使用后端在 localhost:3000
上,可以使用它来启用代理:
devServer: {
proxy: {
'/api': 'http://localhost:3000',
},
},
现在,对 /api/users
的请求会将请求代理到 http://localhost:3000/api/users
。
如果不希望传递/api
,则需要重写路径:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
},
},
默认情况下,将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要,可以这样修改配置:
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false,
},
},
},
有时不想代理所有内容。 可以基于函数的返回值绕过代理。
在该功能中,可以访问请求,响应和代理选项。
- 返回
null
或 undefined
以继续使用代理处理请求。 - 返回
false
会为请求产生 404 错误。 - 返回提供服务的路径,而不是继续代理请求。
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
属性的对象的数组:
devServer: {
proxy: [
{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
},
],
},
默认情况下不会代理对 root 的请求。 要启用根代理,应将 devMiddleware.index
选项指定为虚假值:
devServer: {
devMiddleware: {
index: false, // specify to enable root proxying
},
proxy: {
context: () => true,
target: 'http://localhost:1234',
},
},
代理时会保留主机头的来源,可以将 changeOrigin
设置为 true
以覆盖此行为:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},