webpack基础篇（十）：文件监听

说明

​

​玩转webpack​

​课程学习笔记。

什么是文件监听

文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。

两种方式

webpack 开启监听模式，有两种方式：

• 启动​

  ​webpack​

  ​​ 命令时，带上​

  ​--watch​

  ​ 参数
• 在配置​

  ​webpack.config.js​

  ​​ 中设置​

  ​watch: true​

  ​

唯一缺陷

每次需要手动刷新浏览器。

可以在​

​package.json​

​文件里面添加脚本。

{
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  }
}      

原理分析

1、轮询判断文件的最后编辑时间是否变化

2、某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等 ​

​aggregateTimeout​

​

module.export = {
  // 默认 false，也就是不开启
  watch: true,
  // 只有开启监听模式时，watchOptions才有意义
  watchOptions: {
    // 默认为空，不监听的文件或者文件夹，支持正则匹配
    // 对于某些系统，监听大量文件系统会导致大量的 CPU 或内存占用。这个选项可以排除一些巨大的文件夹，例如 node_modules
    // 也可以使用 anymatch 模式：ignored: "files/**/*.js"
    ignored: /node_modules/,
    // 监听到变化发生后会等300ms再去执行，默认300ms
    aggregateTimeout: 300,
    // 通过传递 true 开启 polling，或者指定毫秒为单位进行轮询。
    poll: 1000 // 每秒检查一次变动
  }
}