webpack-dev-server 这个东西可以给为我们生成一个开发用的服务器，在文件有变化的时候自动给我们打包，然后刷新页面 .. 它还有个模块热替换的功能 .. 就是它可以只替换有变化的地方 .. 不需要刷新整个页面 ... 这个功能有很多好处 ..

因为你在开发调试的时候，页面会有一些特定的状态，比如在文本框里输入的文字 .. 画的图形 .. 如果每次修改项目的文件都重新刷新页面会比较麻烦，你需要重新修改页面上的一些状态 ..

先去安装一些东西 .. npm install .. 我们可以先在全局范围安装一下 webpack-dev-server .. 用一个 --global 选项 ..

然后在项目的本地再去安装一下 webpack-dev-server .. 保存到项目的开发依赖里 ..

完成以后执行一下 webpack-dev-server .. 加上一个 --inline 选项 .. 还有一个 --hot ... 这样可以自动刷新页面，还有使用 hot module replacement ，模块的热替换 ..

它会给我们生成一个服务器的地方 .. localhost:8080 ... 在浏览器上打开这个地址 ..

open http://localhost:8080

再打开浏览器的控制台 ... 调整一下显示 ...

上面会显示一些文字 .. Waiting for update signal from WDS .. 正在等待来自 webpack dev server 的更新信号 ..

下面这行是 Hot module replacement enabled .. 模块热替换已经启用了 .. 因为在执行 webpack-dev-server 命令的时候，我们加上了一个 --hot 选项 ..

再去试一下这个功能 .. 打开 style.css .. 为了证明一下没有刷新整个页面，我们在页面上添加一个文本框 .. 打开这个 entry.js .. 先创建一个 input 元素 .. 交给 input 这个变量 ..

找到页面上的 app 这个 id 的元素 .. 在它里面添加一个元素 .. 这里就是刚才创建的 input ..

然后在页面上的这个文本框里输入点东西 ... 再回到 style.css .. 修改一下这个背景颜色 .. 保存 ..

你会看看保存一下，页面上的背景颜色就有变化 .. 但是我们在文本框里输入的文字仍然存在 .. 说明使用了热替换 .. 也就是只替换只变化的地方 .. 如果刷新整个页面的话，我们在文本框里输入的文字就会不见了 ..