1.7 DevServer
问题一：DevServer开发工具
DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览。
安装DevServer
npm i-D webpack-dev-server
问题二：实时预览
Webpack 在启动时可以开启监听模式，开启监听模式后 Webpack 会监听本地文件系统的变化，发生变化时重新构建出新的结果。Webpack 默认是关闭监听模式的，你可以在启动 Webpack 时通过webpack --watch来开启监听模式。
通过 DevServer 启动的 Webpack 会开启监听模式，当发生变化时重新执行完构建后通知 DevServer。 DevServer 会让 Webpack 在构建出的 JavaScript 代码里注入一个代理客户端用于控制网页，网页和 DevServer 之间通过 WebSocket 协议通信， 以方便 DevServer 主动向客户端发送命令。 DevServer 在收到来自** Webpack 的文件变化**通知时通过 注入的客户端控制网页刷新。
问题三：什么是模块热替换？
模块热替换能做到在不重新加载整个网页的情况下，通过将被更新过的模块替换老的模块，再重新执行一次来实现实时预览。
模块热替换相对于默认的刷新机制能提供更快的响应和更好的开发体验。 模块热替换默认是关闭的，要开启模块热替换，你只需在启动 DevServer 时带上--hot参数，重启 DevServer 后再去更新文件就能体验到模块热替换的神奇了。
问题四：什么是Source Map 及其使用
Source Map能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。这意味着你可以在优化压缩代码后轻松的进行调试。在编译器输出的代码上进行断点调试是一件辛苦和不优雅的事情， 调试工具可以通过Source Map映射代码，让你在源代码上断点调试。
Source Map使用：Webpack 支持生成 Source Map，只需在启动时带上--devtool source-map参数。 加上参数重启 DevServer 后刷新页面，再打开 Chrome 浏览器的开发者工具，就可在 Sources 栏中看到可调试的源代码了。
