webpack基本配置详解_vue基础知识

webpack基本配置详解_vue基础知识devServer可以用来提高开发效率,它提供一下配置可以改变devServer的默认行为。除了在配置问题通过devServer传入参数外,还可以通过命令行参数传入。注意:只用在通过devServer去启动webpack时,配置文件里devServer才会生效,因为这些参数所对应的功能都是devServer提供的,webpack本身并不认识devServer配置项。1.hotdevServer.hot配置是否启用模块热替换功能。devServer默认行为是在发现…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

devServer

可以用来提高开发效率,它提供一下配置可以改变 devServer 的默认行为。除了在配置问题通过 devServer 传入参数外,还可以通过命令行参数传入。注意:只用在通过 devServer 去启动 webpack 时,配置文件里 devServer 才会生效,因为这些参数所对应的功能都是 devServer 提供的,webpack 本身并不认识 devServer 配置项。

  • hot

devServer.hot 配置是否启用模块热替换功能。devServer 默认行为是在发现源代码被更新后会通过自动刷新整个页面来做到预览,开启模块热替换功能后,在不刷新整个页面的情况下通过用新模块替换老模块来实现实时预览。

  • inline

devServer 的实时预览功能依赖注入到页面里的代理客户端去接受来自 devServer 的命令和负责刷新网页的工作。devServer.inline 用于配置是否自动注入这个代理客户端到将运行在页面的 Chunk 里面,默认是自动注入。devServer 会根据你是否开启 inline 来调整它的自动刷新策略:

1. 如果开启inline, DevServer会在构建完变化后的代码时通过代理客户端控制网页刷新。
2. 如果关闭inline, DevServer将无法直接控制要开发的网页。这时它会通过iframe的方式去运行要开发的网页,当构建完变化后的代码通过刷新iframe来实现实时预览。

Jetbrains全家桶1年46,售后保障稳定

  • historyApiFallback

devServer.historyApiFallback 用于方便的开发使用 HTML5 HistoryAPI 的单页应用。这类单页应用要求服务器针对任何命中的路由都返回一个对应的 HTML 文件,例如在访问 http://localhost/user 和 http://localhost/home 时都返回index.html文件,浏览器端的JavaScript代码会从URL里解析出当前的状态,显示对应的界面。

这会导致任何请求都会返回index.html文件,这智能用于只有一个HTML文件的应用。

如果应用由多个单页应用组成,这时就需要DevServer根据不同的请求返回不同的HTML文件:配置如下:

historyApiFallback: {
    //使用正则匹配命中路由
    rewrites: [
        {from: /^\/user/, to: '/user.html'},
        {from: /^\/game/, to: '/game.html'},
        {from: /./, to: '/index.html'}
    ]
}
  • contentBase

devServer.contentBase 配置 devServer HTTP 服务器的文件根目录。默认情况下为当前执行目录,所以一般不必设置它,除非有额外的文件需要被 devServer 服务。例如,你想要把项目根目录下的 public 目录设置成 devServer 服务器的文件根目录:

devServer: {
    contentBase: path.join(__dirname, 'public')
}
  • headers

devServer.headers 配置项可以在 HTTP 响应中注入一些 HTTP 响应头,使用如下:

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
}
  • host

devServer.host 配置项用于配置 devServer 服务器监听的地址。如果你想要局域网中其他设备访问你本地的服务,你可以在启动的时候带上 — host 0.0.0.0 host 的默认值是 127.0.0.1,即只有本地可以访问 devServer 的 HTTP 服务。

  • port

devServer.port 配置项用于配置 devServer 服务监听的端口,默认使用 8080 端口。如果 8080 端口已经被其他程序占有就使用 8081。

  • allowedHosts

devServer.allowedHosts 配置一个白名单列表,只有 HTTP 请求的 HOST 在列表里才正常返回,使用如下:

allowedHosts: [
  //匹配单个域名
  'host.com',
  'sub.host.com',
  / host2.com 和所有的子域名 *.host2.com 都将匹配
  '.host.com'
]
  • disableHostCheck

devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 host 检查。devServer 默认只接受来自本地的请求,关闭后可以接受来自任何 HOST 的请求。它同样用于搭配 –host 0.0.0.0 使用,因为你想要其它设备访问你本地的服务,但访问时是直接通过 IP 地址访问而不是 HOST 访问,所以需要关闭 HOST 检查。

  • https

devServer 默认使用 HTTP 协议服务,它也能通过 HTTPS 协议服务。有些情况下你必须使用 HTTPS,例如 HTTP2 和 Service Worker 就必须运行在 HTTPS 之上。要切换成 HTTPS 服务,最简单的方式是:

devServer:{
  https: true
}

devServer 会自动的为你生成一份 HTTPS 证书。

devServer:{
  https: {
    key: fs.readFileSync('path/to/server.key'),
    cert: fs.readFileSync('path/to/server.crt'),
    ca: fs.readFileSync('path/to/ca.pem')
  }
}
  • clientLogLevel

devServer.clientLogLevel 配置在客户端的日志等级,这会影响到你在浏览器开发者工具控制台看到的日志内容。clientLogLevel 是枚举类型,可取如下之一的值 none | error | warning | info。默认为 info 级别,即输出所有类型的日志,设置成 none 可以不输出任何日志。

  • compress

devServer.compress 配置是否启用 gzip 压缩。 Boolean 类型,默认为 false。

  • open

devServer.open 用于在 devServer 启动且第一次构建完时,自动用你系统上默认的浏览器去打开要开发的网页,同时还提供 devServer.openPage 配置项用于打开指定 URL 的网页。

  • disableHostCheck

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

  • overlay

devServer.overlay 出现编译器错误或警告时,在浏览器中显示全屏覆盖。除了设置为 Boolean 类型之外,我们还可以传入对象进行配置。

devServer: {
  overlay: {
    warnings: false,
    errors: true,
  },
},
  • proxy

当拥有单独的 API 早期开发服务器并且希望在同一域上发送 API 请求时,代理某些 URL 可能会很有用。使用它来启用代理,target 为预设的访问地址。

默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 已覆盖此行为。

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    },
  },
},

更多 webpack 的信息,请查看:webpack 官网

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/223426.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ElasticSearch数据库(ES数据库)简介

    ElasticSearch数据库(ES数据库)简介一elasticsearch简介**ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTfulweb接口。**Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,是当前流行的企业级搜索引擎。1elasticSearch的使用场景1、为用户提供按关键字查询的全文搜索功能。2、实现…

  • Java 控制台输入,输出语句

    Java 控制台输入,输出语句输入:Scannerscan=newScanner(System.in);Stringread=scan.nextLine();System.out.println(read);输出:System.out.println(“普通信息”);System.err.println(“错误信息”);

  • java 调用bapi_BAPI的简单实现步骤

    java 调用bapi_BAPI的简单实现步骤一,创建FunctionModule1,在SE11,创建需要的structure(必须为flat类型,否则会出现ReferenceparametersarenotallowedwithRFC)2,在SE80,建Functiongroup3,在SE37,创建FunctionModule(import的参数入药是value传值)Note:一个FunctionGroup只能包含一个B…

  • python读取excel单元格内容_python把获得的数据放在一个表格里

    python读取excel单元格内容_python把获得的数据放在一个表格里python读取Excel表格文件,例如获取这个文件的数据python读取Excel表格文件,需要如下步骤:1、安装Excel读取数据的库—–xlrd直接pipinstallxlrd安装xlrd库#引入Excel库的xlrdimportxlrd2、获取Excel文件的位置并且读取进来#导入需要读取Excel表格的路径data=xlrd.ope…

  • 面试题:深拷贝和浅拷贝(超级详细,有内存图)

    面试题:深拷贝和浅拷贝(超级详细,有内存图)这篇文章竟然写了一上午,亲,请怀着感恩的心阅读!!深拷贝和浅拷贝是经常在面试中会出现的,主要考察你对基本类型和引用类型的理解深度。我在无数次的面试中,应聘者还没有一个人能把这个问题回答情况,包括很多机构的培训老师。这篇文章会让你把基本类型和引用类型的区别搞得清清楚楚,搞清楚这两者的区别,你对任何编程语言的都不怕,因为,这不是js一门语言,是任何编程语言中都需要掌握的知识,而…

  • leetcode 最长有效括号_leetcode最长公共前缀

    leetcode 最长有效括号_leetcode最长公共前缀给你一个只包含 ‘(’ 和 ‘)’ 的字符串,找出最长有效(格式正确且连续)括号子串的长度。示例 1:输入:s = “(()”输出:2解释:最长有效括号子串是 “()”示例 2:输入:s = “)()())”输出:4解释:最长有效括号子串是 “()()”示例 3:输入:s = “”输出:0题解括号匹配:(看作+1,)看作-1,所有满足条件的括号应该是前缀和>=0,并且总和==0class Solution {public: const int INF =

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号