如果每一次小的改动都要手动执行一遍构建才能看到效果,开发效率会很低下。监听文件改动并实时构建的能力成为新一代打包工具的标配。
在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即可看到结果页面。
网友评论