深刻浅出webpack学习2--配置DevServer

devServer

上一章介绍过DevServer能够用来提升开发效率，它提供一些配置能够改变DevServer的默认行为。要配置DevServer除了在配置文件里经过devServer传入参数外，还能够经过命令行参数传入。注意只有在经过DevServer去启动webpack时配置文件里devServer才会生效，由于这些参数所对应的功能都是DevServer提供的，webpack自己并不认识devServer配置项。

1. hot

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

2. inline

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

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

3. historyApiFallback

devServer.historyApiFallback用于方便的开发使用HTML5 HistroyAPI的单页应用。这类单页应用要求服务器针对任何命中的路由都返回一个对应的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'}
    ]
}

4. contentBase

devServer.contentBase配置DevServer HTTP服务器的文件根目录。默认状况下为当前执行目录，因此通常没必要设置它，除非有额外的文件须要被DevServer服务。例如你想把项目根目录下的public目录设置成DevServer服务器的文件根目录：

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

DevServer服务器经过HTTP服务暴露出的文件分为两类：

1. 暴露本地文件
2. 暴露webpack构建出的结果，因为构建出的结果交给DevServer，因此你在使用DevServer时在本地找不到构建出的文件。

contentBase只能用来配置暴露本地文件的规则，你能够经过contentBase: false来关闭暴露本地文件。

5. headers

devServer.headers配置项能够在HTTP响应中注入一些HTTP响应头，使用以下：

devServer: {
    headers: {
        'X-foo': 'bar'
    }
}

6. host

devServer.host配置项用于配置DevServer服务器监听的地址。若是你想要局域网中其余设备访问你本地的服务，能够在启动的时候带上--host 0.0.0.0.host的默认值是127.0.0.1即只有本地能够访问DevServer的HTTP服务。

7. port

devServer.port配置项用于配置DevServer服务监听的端口，默认使用8080端口。若是8080端口已经被其余程序占有就使用8081....

8. allowedHosts

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

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

9. disableHostCheck

devServer.disableHostCheck配置项用于配置是否关闭用于DNS重绑定的HTTP请求的host检查。DevServer 默认只接受来自本地的请求，关闭后能够接受来自任何 HOST 的请求。 它一般用于搭配 --host 0.0.0.0 使用，由于你想要其它设备访问你本地的服务，但访问时是直接经过 IP 地址访问而不是 HOST 访问，因此须要关闭 HOST 检查。

10. 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')
  }
}

11. clientLogLevel

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

12. compress

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

13. open

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