开发阶段，如果每次文件变更后，都要手动去打包build是很不方便的，通常在开发阶段采用以下三种方式进行热重载（自动编译）
配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。package.json文件增加watch脚本 --watch 动态监听文件的改变并实时打包，输出新的文件，这样文件多了之后速度会很慢，而且此打包方式不会热更新，即每次webpack编译之后，你还需要手动刷新浏览器。
缺点： 需手动刷新浏览器
优点： 自动编译
webpack-dev-server实际上相当于启用了一个express的Http服务器＋调用了webpack-dev-middleware【简单的web服务器和实时重载】。这个Http服务器和client使用了websocket通讯协议，原始文件做出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后的文件输出到内存中。【这边注意，最后的编译的文件并没有输出到目标文件夹，都保存到了内存】（适合纯前端项目，很难编写后端服务，进行整合）
优点： 自动编译 + 实时重新加载浏览器
webpack-dev-server
缺点： 需手动刷新浏览器 + 配置文件和插件多
优点： 自动编译
定义了webpack.config里的entry和output的关系脉络，webpack-dev-middleware能在此基础上形成一个文件映射系统，每当应用程序请求一个文件。它匹配到了就把内存中缓存的对应结果以文件格式返回，反之进入下一个中间件。
因为是内存型文件系统，所以重建速度非常快，很适合于开发阶段用作静态资源服务器；因为webpack可以把任何一种资源当作是模块来处理，因此能向客户端反馈各种格式的资源，所以可以替代HTTP服务器。
三者相比：观察模式在开发中不实用web服务器实用性强；webpack中间件+express使用了2个插件，2个配置文件，配置复杂
事实上，大多数 webpack 用户用过的 webpack-dev-server 就是一个 express＋webpack-dev-middleware 的实现。
二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。
是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload），这也是webpack文档里常说的HMR（Hot Module Replacement）。HMR和热加载的区别是：热加载是刷新整个页面。
运行方式：
1、命令行
package.json中指令加上 --hot
2、Nodejs API
热更新热重载
webpack-dev-server 自动打包/热重载
安装webpack-dev-server
网页链接
npm install webpack-dev-server -Dwebpack.config.js添加
module.exports = {// 前面配置省略
devServer: {
port: 8080, // 设置端口号
open: true, // 自动打开,
hot: true, // 热替换
contentBase: './public' // 指定页面目录,
historyApiFallback: { // 设置默认首页
index: 'index.html'
}
}
}
package.json 的scripts里添加一个
"start-dev-server": "webpack-dev-server"
