关于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

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

    

原文地址:https://www.cnblogs.com/wjyz/p/10159970.html