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 =