深入浅出webpack学习(7)--使用DevServer

使用DevServer

在日常开发中，我们可能需要以下几个功能：

1. 提供HTTP服务而不是使用本地文件预览；
2. 监听文件变化并自动刷新网页， 做到实时预览；
3. 支持Source Map， 以方便调试；

webpack的原生支持上述2、3点内容，再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件变更信号，通过websocket协议自动刷新网页做到实时预览。

安装DevServer：

npm i -D webpack-dev-server

安装完成后，执行webpack-dev-server命令，DevServer就启动了。可以在控制台中看到：

Project is running at http://localhost:8080/
webpack output is served from /

这意味着DevServer启动的HTTP服务监听在http://localhost:8080/, DevServer启动后会一直驻留在后台保持运行，访问这个网址就能获取项目根目录下的index.html。用浏览器打开这个地址会发现页面空白错误原因是./dist/bundle.js加载404。同时你会发现并没有文件输出到dist目录，因为DevServer会把webpack构建出的文件保存在内存中，在要访问输出的文件时，必须通过http服务访问。由于DevServer不会理会webpack.config.js里配置的output.path属性，所以要获取bundle.js的正确URL是http://localhost:8080/bundle.js对应的index.html应该修改为：

  


<**加粗文字**div id="app">

实时预览

按照上面的步骤，你可以试试修改main.js main.css main.js中的任何文件，保存后你会发现浏览器会自动刷新，运行出修改后的效果。

webpack在启动的时可以开启监听模式，开启监听模式后webpack会监听本地文件系统的变化，发生变化时重新构建出新的结果。webpack默认是关闭监听模式，你可以在启动webpack时通过webpack --watch来开启监听模式。

通过DevServer启动的webpack可以开启监听模式，当发生变化时重新执行完构建后通知DevServer。DevServer会让webpack在构建出的JavaScript代码里注入一个代理客户端用于控制网页。网页和DevServer之间通过WebSocket协议通信，以方便DevServer主动向客户端发送命令。DevServer在收到来自WebPack的文件变化通知时通过注入的客户端控制网页刷新。

如果修改index.html文件并保存，你会发现这并不会触发以上机制，导致这个问题的是webpack在启动时会以配置里的entry为入口区递归解析entry所依赖的文件，只有entry本身和依赖的文件才会被webpack添加到监听列表里。而index.html文件是脱离了JavaScript模块化系统，所有webpack不知道它的存在。

模块热替换

除了通过重新刷新整个网页来实现实时预览，DevServer还有一种被称作模块热替换的刷新技术。模块热替换能做到在不重新加载整个网页的情况下，通过将被更新过的模块替换老的模块。再重新执行一次来实现实时预览。模块热替换相对于默认的刷新机制能提供更快的响应和更好的开发体验。模块热替换默认是关闭的，要开启模块热替换，只需要在启动DevServer时带上--hot参数，重启DevServer后再去更新文件就能体验到模块热替换的乐趣了。

支持Source Map

在浏览器中运行的JavaScript代码都是编译器输出的代码，这些代码可读性差。遇到错误不好排查，我们可以通过source Map，在启动的时候带上 --devtool source-map参数就可以了。