关于webpack 以及 webpack配置和常用插件的学习记录 （2） ------ devServer

DevServer：

　　devserver会启动一个http服务器用于服务网页请求，接收webpack发出的文件变化的信号。通过websocket协议自动刷新网页，实现实时预览。

安装：
    npm i webpack-dev-server -D

启动：
    webpack-dev-server

　　devserver会把webpack构建出来的文件保存在内存中，要访问输出的文件时，必须通过http服务进行访问。通过devserver启动的webpack自动开启监听模式。

　　只有entry和依赖的文件才会被webpack添加到监听列表，所以修改index.html不会触发页面刷新。

　　办法：raw-loader --->将html作为字符串拉入js中，然后在index.js中require('./index.html')，这时候修改index.html，页面也会刷新了。

 

  配置项：

　　1，hot 

　　　　是否开启模块热替换。热替换是在页面有改变的时候，不用刷新整个页面，只用改变的模块替换老的模块来实现实时预览。

　　2，inline

　　　　是通过iframe方式还是直接控制要开发的页面来进行刷新和实时预览。

　　3，historyApiFallback

　　　　用于开发h5的historyAPI的单页应用。

　　4，contentBase

　　　　配置devServer http服务器的文件根目录。

　　5，headers

　　　　配置在http响应中的响应头。

　　6，host

　　　　配置devServer服务器监听的地址。如果想要局域网中其他设备访问你的服务，可以在启动的时候加上 --host 0.0.0.0 

　　　　host的默认值为127.0.0.1，即只能本地访问。

　　7，port

　　　　配置devServer服务器的监听端口，默认为8080，如被占用，依次尝试下一个。

　　8，allowedHosts

　　　　配置白名单列表，只有在列表中的host才能正常返回。

　　9，disableHostCheck

　　　　配置是否关闭用于DNS重绑定的HTTP请求的host检查。devServer默认只接受来自本地的请求，关闭后可以接受来自任何host的请求。

　　10，https

　　　　配置是否启用https服务。

　　11，clientLogLevel

　　　　配置在客户端的日志显示。可以取下面的值：none | error | info | warning，默认为info，输出所有，设置为none则不显示日志。

　　12，compress

　　　　配置是否启用gzip压缩，默认为false

　　13，open

　　　　配置第一次构建完毕之后是否自动用默认浏览器打开网页。