问题背景

我们在开发调试 react 项目的时候，需要使用 webpack 打包并刷新浏览器后才能看到实际效果。为了减少这种重复性的人工操作，我们可以使用webpack --watch 来监听文件文件的改变。当我们更改了文件并保存后，webpack 会自动执行打包操作。然而，我们还是需要手动按F5(mac 下是command + r)来刷新浏览器，而且有时候我们在 webpack 编译完前就刷新了页面，结果没能看到我们预期的改变，于是我们会多次按刷新按钮，直到看到我们预期的改变。而这些在开发过程中的痛点，我们可以用 webpack-dev-server 来解决。

概述

webpack-dev-server 是一个小型的 Node.js Express 服务器，它使用 webpack-dev-middleware 来服务于 webpack 。当 webpack 编译后，它会把编译状态信息发送给浏览器页面，并执行内嵌的刷新脚本。

某位大大曾经说过，喜欢写 blog 的人，会经历三个阶段：

第一阶段，刚接触 blog，觉得很新鲜，试着选择一个免费空间来写。
第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。