> For the complete documentation index, see [llms.txt](https://azr.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azr.gitbook.io/webpack/pei-zhi/jian-ting-mo-shi.md).

# 监听模式

### 让控制台好看一点\~

项目越大，webpack编译的时间就会增长。

* 通过`--progress`让控制台带有进度
* 通过`--colors`让控制台带有颜色（毕竟现在是颜值的天下）

```javascript
$ webpack --progress --colors
```

> `--open`  是可以直接打开浏览器的。 

### Watch

`webpack`在启动的时候可以开启监听模式，会进行监视本地文件的变化，当本地的文件进行变动之后，就会自动重新构建出新的结果。没有变化的模块会在编译之后缓存到内存之中，不会每一次都被编译，提升编译速度。

```javascript
webpack默认是关闭的，可以通过--watch来进行开启
$ webpack --progress --colors --watch
```

在配置文件中开启`watch`

```javascript
module.export = {
    watch : true;
}
```

### DevServer

在使用`DevServer`的时候，监听器是默认打开的。

### WatchOptions

自定义的监听模式，用来监听文件是否被改动过。只有在开启监听模式**，**WatchOptions才有意义。

```javascript
module.export = {
    // 开启监听模式
    watch : true;
    // 定制监听
    watchOptions: {
      aggregateTimeout: 300,
      ignored: /node_modules/,
      poll: 1000，
    }
}
```

1. **aggregateTimeout**：一旦第一个文件改变，在重建之前添加一个延迟。填以毫秒为单位的数字。
2. **ignored**：观察许多文件系统会导致大量的CPU或内存使用量。可以排除一个巨大的文件夹。
3. **poll**：填以毫秒为单位的数字。每隔（ 你设定的）多少时间查一下有没有文件改动过。不想启用也可以填`false`。