监听文件改动并实时构建,避免每次改动都要手动构建才能看到效果。
在 webpack 中添加 --watch 开启监视功能,webpack 会首先构建一次,然后依据构建得到的依赖关系,对项目所依赖的所有文件进行监听,一旦发生改动则触发重新构建。
命令简写:
webpack -w
使用 webpack-dev-server 辅助开发调试,它是一个基于 Express 框架的 Node.js 服务器。它还提供了一个客户端的运行环境,会被注入到页面代码执行,并通过 Socket.IO 与服务器通讯。
这样服务器的每次改动与重新构建都会被通知到页面上,页面可以随之做出反应。除了最基本的自动刷新,还提供有如模块热替换(Hot Module Replacement)这样强大的功能。
安装:
npm install webpack-dev-server -g
启动:
webpack-dev-server
```
默认监听 8080 端口
webpack-dev-server 的配置
1. **命令行参数的形式传递**
2. ** webpack.config.js 的 export 中添加字段 devServer 实现**。[详见官方文档](https://webpack.github.io/docs/webpack-dev-server.html)
```
webpack-dev-server -w
```
![运行效果图](http://upload-images.jianshu.io/upload_images/1366458-87a0eff030a02a70.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)