webpack： 服务和热更新

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

设置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:配置服务器基本运行路径，用于找到程序打包地址。
host：服务运行地址，建议使用本机IP，这里为了方便，所以用localhost。
compress：服务器端压缩选型，一般设置为开启。
port：服务运行端口，建议不使用80，很容易被占用，这里使用了1717.

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

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

/package.json

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

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

支持热更新

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

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