webpack devServer开发服务常用配置
发布网友
发布时间：2024-12-22 11:22
共1个回答
热心网友
时间：2025-01-16 01:45
一、publicPath公共路径
在webpack devServer中，publicPath用于指定打包文件的访问路径。默认值为'/'，意味着打包文件可通过'http://localhost:8080/bundle.js'进行访问。若需要改变访问路径，如访问assets目录下的文件，可将其更改为'assets/'，即通过'http://localhost:8080/assets/bundle.js'进行访问。
二、proxy代理配置
前端应用通常需与后端接口进行交互，但可能存在跨域问题。proxy代理配置通过http-proxy-middleware中间件解决此问题。具体配置如下：
简单示例：所有请求/api/user都会被代理到'http://localhost:3000/api/user'。
路径重写：请求/api/user会被代理到'http://localhost:3000/user'。
多个特定路径：如请求/auth/user和/api/user均会被代理到'http://localhost:3000/user'。
允许不安全https访问：可通过相关配置实现。
绕过代理：若匹配到特定资源，如html文件，则跳过代理直接返回。
三、open自动打开浏览器
在启动webpack devServer后，自动打开浏览器预览应用。
四、修改端口号
可以通过配置改变服务监听的端口号。
五、quiet静默模式
开启后，仅在启动时显示信息，其余内容不打印到控制台。
六、socket
提供与服务器的socket通信接口。
七、白名单管理
配置白名单，控制哪些请求能通过代理。
八、https
默认使用HTTP服务，可配置为使用HTTPS提供服务，同时支持HTTP/2协议。配置需指定证书文件。
九、自定义响应头
可在所有响应中添加自定义的headers内容。
十、压缩
一切服务均启用压缩，优化响应速度。
十一、日志配置
可选择不同的日志输出级别，如仅显示启动信息，或完全禁用信息输出。
十二、惰性模式
不监听文件变动，适合静态资源服务。
以上是webpack devServer开发服务的常用配置，可根据实际项目需求进行调整和优化。
