作为一个前端工程师，最大的编程需求之一就是所见即所得的工具，也就是常说的热更新。现在一般有点规模的公司都为前端工程师准备了双屏显示器，其目的就是一个屏幕编写代码，一个屏幕实时显示页面效果。

设置webpack-dev-server

要执行webpack-dev-server是要先下载 webpack-dev-server。

npm install webpack-dev-server –save-dev

下载好后，需要配置一下devServer。最简单的devServer配置项只有四个。

/webpack.config.js

devServer:{        //设置基本目录结构        contentBase:path.resolve(__dirname,'dist'),        //服务器的IP地址，可以使用IP也可以使用localhost        host:'localhost',        //服务端压缩是否开启        compress:true,        //配置服务端口号        port:1717    }

contentBase:配置服务器基本运行路径，用于找到程序打包地址。

配置好后，可以试着在终端中输入webpack-dev-server,往往提示下面的错误（或者是无法找到内部或外部命令）。

出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。

/package.json

"scripts": {    "server":"webpack-dev-server" },

配置好保存后，在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入就可以看到结果了。

支持热更新

在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。

注意：这里只是我们的webpack3.6版本支持，在3.5版本时要支持热更新还需要一些其他的操作。