webpack学习笔记--配置devServer
1-6 使用DevServer 介绍过用来提高开发效率的 DevServer ,它提供了一些配置项可以改变 DevServer 的默认行为。 要配置 DevServer ,除了在配置文件里通过 devServer 传入参数外,还可以通过命令行参数传入。 注意只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效,因为这些参数所对应的功能都是 DevServer 提供的,Webpack 本身并不认识 devServer 配置项。
hot
devServer.hot 配置是否启用 1-6 使用DevServer 中提到的模块热替换功能。 DevServer 默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实时预览,开启模块热替换功能后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览。
inline
DevServer 的实时预览功能依赖一个注入到页面里的代理客户端去接受来自 DevServer 的命令和负责刷新网页的工作。 devServer.inline 用于配置是否自动注入这个代理客户端到将运行在页面里的 Chunk 里去,默认是会自动注入。 DevServer 会根据你是否开启 inline
来调整它的自动刷新策略:
- 如果开启 inline ,DevServer 会在构建完变化后的代码时通过代理客户端控制网页刷新。
- 如果关闭 inline ,DevServer 将无法直接控制要开发的网页。这时它会通过 iframe 的方式去运行要开发的网页,当构建完变化后的代码时通过刷新 iframe 来实现实时预览。 但这时你需要去 http://localhost:8080/webpack-dev-server/ 实时预览你的网页了。
如果你想使用 DevServer 去自动刷新网页实现实时预览,最方便的方法是直接开启 inline 。
historyApiFallback
devServer.historyApiFallback 用于方便的开发使用了 HTML5 History API 的单页应用。 这类单页应用要求服务器在针对任何命中的路由时都返回一个对应的 HTML 文件,例如在访问 http://localhost/user
和 http://localhost/home
时都返回 index.html
文件, 浏览器端的 JavaScript 代码会从 URL 里解析出当前页面的状态,显示出对应的界面。
配置 historyApiFallback 最简单的做法是:
historyApiFallback: true
这会导致任何请求都会返回 index.html
文件,这只能用于只有一个 HTML 文件的应用。
如果你的应用由多个单页应用组成,这就需要 DevServer 根据不同的请求来返回不同的 HTML 文件,配置如下:
historyApiFallback: {
// 使用正则匹配命中路由
rewrites: [
// /user 开头的都返回 user.html
{ from: /^\/user/, to: '/user.html' },
{ from: /^\/game/, to: '/game.html' },
// 其它的都返回 index.html
{ from: /./, to: '/index.html' },
]
}
contentBase
devServer.contentBase 配置 DevServer HTTP 服务器的文件根目录。 默认情况下为当前执行目录,通常是项目根目录,所有一般情况下你不必设置它,除非你有额外的文件需要被 DevServer 服务。 例如你想把项目根目录下的 public
目录设置成 DevServer 服务器的文件根目录,你可以这样配置:
devServer:{
contentBase: path.join(__dirname, 'public')
}
这里需要指出可能会让你疑惑的地方,DevServer 服务器通过 HTTP 服务暴露出的文件分为两类:
- 暴露本地文件。
- 暴露 Webpack 构建出的结果,由于构建出的结果交给了 DevServer,所以你在使用了 DevServer 时在本地找不到构建出的文件。
contentBase 只能用来配置暴露本地文件的规则,你可以通过 contentBase:false 来关闭暴露本地文件。
headers
devServer.headers 配置项可以在 HTTP 响应中注入一些 HTTP 响应头,使用如下:
devServer:{
headers: {
'X-foo':'bar'
}
}
host
devServer.host
配置项用于配置 DevServer 服务监听的地址。 例如你想要局域网中的其它设备访问你本地的服务,可以在启动 DevServer 时带上 --host 0.0.0.0
。 host
的默认值是 127.0.0.1
即只有本地可以访问 DevServer 的 HTTP 服务。
port
devServer.port
配置项用于配置 DevServer 服务监听的端口,默认使用 8080 端口。 如果 8080 端口已经被其它程序占有就使用 8081,如果 8081 还是被占用就使用 8082,以此类推。
allowedHosts
devServer.allowedHosts
配置一个白名单列表,只有 HTTP 请求的 HOST 在列表里才正常返回,使用如下:
allowedHosts: [
// 匹配单个域名
'host.com',
'sub.host.com',
// host2.com 和所有的子域名 *.host2.com 都将匹配
'.host2.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 的网页。
webpack学习笔记--配置devServer的更多相关文章
- webpack学习笔记--配置总结
从前面的配置看来选项很多,Webpack 内置了很多功能. 你不必都记住它们,只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下,再去查详细的使用文档. 通常你可用如下经验去 ...
- webpack学习笔记--配置plugins
Plugin Plugin 用于扩展 Webpack 功能,各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情. 配置 Plugin Plugin 的配置很简单, plugi ...
- webpack学习笔记--配置resolve
Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件. Webpack 内置 JavaScript 模块化语 ...
- webpack学习笔记--配置module
Module module 配置如何处理模块. 配置 Loader rules 配置模块的读取和解析规则,通常用来配置 Loader.其类型是一个数组,数组里每一项都描述了如何去处理部分文件. 配置 ...
- webpack学习笔记--配置output
Output output 配置如何输出最终想要的代码. output 是一个 object ,里面包含一系列配置项,下面分别介绍它们. filename output.filename 配置 ...
- webpack学习笔记--配置entry
Entry entry 是配置模块的入口,可抽象成输入,Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块. entry 配置是必填的,若不填则将导致 Webpack ...
- Docker学习笔记 — 配置国内免费registry mirror
Docker学习笔记 — 配置国内免费registry mirror Docker学习笔记 — 配置国内免费registry mirror
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack学习笔记--整体配置结构
之前的章节分别讲述了每个配置项的具体含义,但没有描述它们所处的位置和数据结构,下面通过一份代码来描述清楚: const path = require('path'); module.exports = ...
随机推荐
- 使用Crash工具分析 Linux dump文件【转】
转自:https://blog.csdn.net/bytxl/article/details/45025183 前言 Linux 内核(以下简称内核)是一个不与特定进程相关的功能集合,内核的代码很难轻 ...
- Linux将rm命令设置为回收站【转】
一个方案就是重定向 rm 命令以嫁接为 mv 命令,相当于给 Linux 系统定制了一个回收站. 实现方式如下: ### 重定义rm命令 ### # 定义回收站目录 trash_path='~/.tr ...
- keepalived 的某台vip连接不通【原创】
keepalived 的某台vip连接不通,vip可以漂移到这台服务器,但是ping vip不通,telnet vip 3306服务也不通,但是telnet 服务器真实物理IP 3306是通的. 切换 ...
- <TCP/IP>ICMP报文的分类
Internet控制报文协议,即为ICMP(Internet Control Message Protocal),用于主机,路由器之间传递信息,其目的是让我们能够检测网路的连线状况﹐也能确保连线的准确 ...
- nginx或者squid正向代理实现受限网站的访问
项目背景:公司商务同事需要操作合作方的后台,但是这个后台做了限制(安全考虑只对指定IP放行),刚好公司是adsl拨号,经常更换IP 需求:让商务同事不要经常给IP到合作方去添加白名单 于是想到了做正向 ...
- C语言-用函数实现社保工资查询系统
需求: 1.有登陆操作,超过三次需重新打开登录 2.查询五险一金.税前税后工资计算,个人与单位应缴明细 3.输入税后工资和税前工资都可查询 4.退出有询问确认操作 代码如下; #include< ...
- python 安装mysql报错
原 安装Python mysqlclient出现“OSError: mysql_config not found”错误 2016年06月01日 12:15:11 wangtaoking1 阅读数:11 ...
- PKUWC2019垫底记
凭着noip2018中超凡的运气,我来到了纪中. DAY0 听说PKUWC可以看榜?那就不用担心写挂啦!开心! 刚从雅礼回来休息了一天,下午就和hz一起坐上教练的车去到了中山纪中. 纪中好大好漂亮啊! ...
- 密码正确 mysql无法登陆 red7.3 上安装mysql5.6后登录报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passswd :yes)
集群需要mysql存储元数据,就在前几天还运行好好的,突然就进不去了......还是太菜,遇到的bug少. 引起这种故障的原因有很多......第一个坑比较多,大部分用户也就用第一个就可以解决问题,我 ...
- nginx实战(三)之静态资源web服务(跨站访问)
语法 虽然说浏览器禁止跨站访问以防(CSRF),但出于一些原因还是要进行跨站访问,服务端通过设置头信息Access-Control-Allow-Orign:xxxx,客户端收到后就会允许跨站访问了 实 ...