如果每一次小的改动都要手动执行一遍构建才能看到效果，开发效率会很低下。监听文件改动并实时构建的能力成为新一代打包工具的标配。
在webpack中，通过添加--watch选项即可开启监视功能，webpack会依据构建得到的依赖关系，对文件进行监听，一旦发生改动则触发重新构建：
webpack -w
除了watch模式外，webpack还提供了webpack-dev-server来辅助开发与调试。
webpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端运行环境，会被注入到页面代码中执行，并通过Socket.IO与服务端通信。服务端的每次改动都会被通知到页面上，页面可以随之做出反应。除了自动刷新外，还提供有模块热替换（Hot Module Replacement）的强大功能。
使用webpack-dev-server需要额外安装webpack-dev-server包：
npm install webpack-dev-server -g
然后启动webpack-dev-server即可：
webpack-dev-server
默认监听8080端口，因此浏览器直接打开http://localhost:8080即可看到结果页面。
网友评论