你真的会用devServer这个配置项嘛?

简介: 你真的会用devServer这个配置项嘛?

devServer



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


devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}


参数说明



devServer: {
    // 提供静态文件目录地址
    // 基于express.static实现
    contentBase: path.join(__dirname, "dist"),
    // 将此项配置设置为 true 时,将会跳过 host 检查。这是不推荐的因为不检查 host 的应用容易受到 DNS 重新绑定攻击
    disableHostCheck:true,
    // 在所有响应中添加首部内容
    headers: {
      "X-Custom-Foo": "bar"
    },
    // 当启用 lazy 时,dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”
    lazy:true,
    // 任意的 404 响应都被替代为 index.html
    // 基于node connect-history-api-fallback包实现
    historyApiFallback: true,
    // 是否一切服务都启用 gzip 压缩
    // 基于node compression包实现
    compress: true,
    // 是否隐藏bundle信息
    noInfo: true,
    // 发生错误是否覆盖在页面上
    overlay: true,
    // 是否开启热加载
    // 必须搭配webpack.HotModuleReplacementPlugin 才能完全启用 HMR。
    // 如果 webpack 或 webpack-dev-server 是通过 --hot 选项启动的,那么这个插件会被自动添加
    hot: true,
    // 热加载模式
    // true代表inline模式,false代表iframe模式
    inline: true, // 默认是true
    // 是否自动打开
    open: true,
    // 设置本地url和端口号
    host: 'localhost',
    port: 8080,
    // 代理
    // 基于node http-proxy-middleware包实现
    proxy: {
        // 匹配api前缀时,则代理到3001端口
        // 即http://localhost:8080/api/123 = http://localhost:3001/api/123
        // 注意:这里是把当前server8080代理到3001,而不是任意端口的api代理到3001
        '/api': 'http://localhost:3001',
        // 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求
        // 主要解决跨域问题
        changeOrigin: true,
        // 针对代理https
        secure: false,
        // 覆写路径:http://localhost:8080/api/123 = http://localhost:3001/123
        pathRewrite: {'^/api' : ''},
        // 输出本次代理请求的日志信息
        bypass: function (req, res, proxyOptions) {
            console.log(proxyOptions.target)
        }
    }
}


相关文章
|
前端开发 搜索推荐 API
webpack和vite devServer的进阶用法:配置proxy修改请求和响应
在前端日常开发中我们一般都是配置本地开发服务器的proxy来解决跨域问题,查看官网文档或者通过搜索引擎搜出来的都是比较基础的用法。
2080 0
|
前端开发 JavaScript 应用服务中间件
VUE3(十八)vue 路由history 模式去掉 URL 中的 # (nginx)
这部分内容比较少。其实更多的是参考一下vue-router4的官方文档就好。 但是,去掉#之后的路由在配合php框架使用的时候可能会有问题,就是这个链接不知道该去后端还是去前端的路由。
1152 0
VUE3(十八)vue 路由history 模式去掉 URL 中的 # (nginx)
|
2月前
|
缓存 应用服务中间件 nginx
nginx如何配置?配置项都是什么意思?
nginx如何配置?配置项都是什么意思?
61 1
|
7月前
|
JSON JavaScript 前端开发
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
vue2_vite.config.js的proxy跨域配置和nginx配置代理有啥区别?
234 1
vuecli3打包时开启了productionSourceMap为true却没有生成sourcemap文件?
vuecli3打包时开启了productionSourceMap为true却没有生成sourcemap文件?
386 0
|
7月前
|
监控 JavaScript 前端开发
SourceMap解析CLI工具实现(1)
前言 SourceMap 大家都不陌生了,通常情况就是产物里的xx.js.map文件里的内容。 可用于对压缩混淆后的代码还原,通常用于帮助定位源码问题。 区别于构建时的配置(以webpack 的devtool配置项为例)不同配置,source-map暴露的信息程度也就也不一样 一般公司里的项目,是会把.map文件上传到内网环境,不耽误问题排查,也不暴露源码 个人的开源项目,一般就没这么讲究了,直接和产物一起传了。 前端监控平台,一般都支持错误堆栈解析,通过.map,还原出错代码位置调用堆栈信息。 有时候没有自动解析的平台可用的时候(比如一些商用监控平台,免费版通常不提供自动source-map
|
7月前
|
JavaScript API
SourceMap解析CLI工具实现(2)
简单做合并后的方法如下
|
7月前
|
缓存 API
FreeMarker - 配置参数用法说明
FreeMarker - 配置参数用法说明
220 0
|
编译器
wepy踩坑-未发现相关 sass 编译器配置,请检查wepy.config.js文件
wepy踩坑-未发现相关 sass 编译器配置,请检查wepy.config.js文件
144 0
|
存储 JavaScript 数据库
knife4j通过js动态刷新全局参数
之前在为框架集成knife4j接口调试查看工具,使用了一段时间,使用体验上比较繁琐,因为接口都需要token,所以每次都要去f12查看token复制再创建全局参数,可能我只需要测试一个接口但是步骤少不了,针对此问题框架做了一些优化
123 0
knife4j通过js动态刷新全局参数