一.webpack-dev-server
当文件发生变化时，可以自动的完成 编译 和 展示；而不需要去打包运行;
安装webpack-dev-server
npm install webpack-dev-server -D
webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中：
-
事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack)自己写的
-
但是有一个坏处:
-
因为每次修改代码,都会导致自动刷新浏览器; 这样之前保存的变量, vuex的值都会被清除;
-
解决办法:
模块热替换（HMR）
二.模块热替换（HMR）
HMR是什么?
-
HMR的全称是 Hot Module Replacement, 翻译为: 模块热替换
-
模块热替换是指在 应用程序运行过程中, 替换, 添加, 删除模块, 而无需重新刷新整个页面;
HMR通过如下几种方式，来提高开发的速度：
-
不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
-
只更新需要变化的内容，节省开发的时间；
-
修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；
使用HMR:
-
默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；
-
在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；
开启HMR
修改webpack配置:
确实是开启了,但是修改某一个模块的代码时, 依然会刷新整个页面
-
p这是因为我们需要去指定哪些模块发生更新时，进行HMR；
-
指定一个模块,然后修改内部代码:
这里必须在 入口文件 main.js里 引入外部文件
但是在真实开发中,不用去手动指定模块
HMR的原理
那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？
-
pwebpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
-
pexpress server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；
HMR Socket Server，是一个socket的长连接：
-
长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
-
当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk);
-
通过长连接，可以直接将这两个文件主动发送给客户端（浏览器);
-
浏览器拿到两个新的文件后, 通过 HMR runtime机制, 加载这两个文件, 并且针对修改的模块进行更新
三.hotOnly、host配置
四.port、open、compress
五.Proxy
proxy是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：
-
比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:7777，这
个时候发送网络请求就会出现跨域的问题； -
那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨
域问题了； -
浏览器和服务器有跨域问题, 但是服务器和服务器之间没有跨域),代码是通过代理服务器运行,所以浏览器和代理服
我们可以进行如下的设置：
-
ptarget：表示的是代理到的目标地址，比如 /api/moment会被代理到 http://localhost:8888/api/moment；
-
ppathRewrite：默认情况下，我们的 /api 也会被写入到URL中，如果希望删除，可以使用pathRewrite；
-
psecure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
-
pchangeOrigin：它表示是否更新代理后请求的headers中host地址
使用方法:
当前本机的服务地址
接口的地址:
浏览器报错跨域了,因为端口不同:
解决:
