5.webpack中的webpack-dev-server

在日常开发中，我们可能需要以下几个功能：

• 提供HTTP服务而不是使用本地文件预览；
• 监听文件变化并自动刷新网页， 做到实时预览；
• 支持Source Map， 以方便调试；
  webpack的原生支持上述2、3点内容，再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件变更信号，通过websocket协议自动刷新网页做到实时预览。

1.webpack-dev-middleware和 webpack-hot-middleware

webpack-dev-middleware
假设我们在服务端使用 express 开发一个站点，同时也想利用 webpack 对静态资源进行打包编译，那么在开发环节，每次修改完文件后，都得先执行一遍 webpack 的编译命令，等待新的文件打包到本地，再做进一步调试。虽然咱们可以利用 webpack 的 watch mode 来监听变更、自动打包，但等待 webpack 重新执行的过程往往很耗时。webpack-dev-middleware 的出现很好地解决了上述问题，它会开启 watch mode 监听文件变更，并自动地在内存中快速地重新打包、提供新的 bundle。
说白了就是 —— 自动编译（watch mode）+速度快（全部走内存）

webpack-hot-middleware
webpack-hot-middleware可以让页面也能自动更新呢，提供的这种能力称为 HMR（即模块热替换（hot module replacement）的简称，它可以在应用运行的时候，不需要刷新页面，就可以直接替换、增删模块。）。
webpack 可以通过配置 webpack.HotModuleReplacementPlugin 插件来开启全局的 HMR 能力，开启后 bundle 文件会变大一些，因为它加入了一个小型的 HMR 运行时（runtime），当你的应用在运行的时候，webpack 监听到文件变更并重新打包模块时，HMR 会判断这些模块是否接受 update，若允许，则发信号通知应用进行热替换。

2. webpack-dev-server

webpack-dev-server 相对前两个工具多了个“server”，实际上它的确也是在 webpack-dev-middleware 的基础上多套了一层壳来提供 CLI 及 server 能力（这也是为何我称 webpack-dev-middleware 是 webpack-dev-server 他爹）。

“devServer”的 webpack-dev-server 配置项：

const path = require('path');
module.exports = {
   
   
    entry: './app.js',
    output: {
   
   
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    devServer: {
   
    //新增配置项
        contentBase: path.join