devserver之自动刷新

我们知道，webpack模块负责监听文件，webpack-dev-server模块则负责刷新浏览器，本文则详细讲述这两种原理

文件监听

相关配置

module.export = {
  // 只有开启监听模式时，watchoptions才有意义
  // 默认是 false，也就是不开启
  watch: true,
  // 监听模式开启时，watchOptions才有意义
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
}

工作原理

监听一个文件是否发生变化的原理是，定时获取这个文件的最后编辑时间，每次多存下最新的最后的编辑时间，如果发现当前获取的和最后一次保存的最后编辑时间不一致，就认为该文件发生了变化。

配置项中的watchOptions.poll用于控制定时检查的周期，具体含义是每秒检查多少次，判断文件是否发生变化是通过不停询问系统指定的文件有没有变化实现的，默认是每秒询问1000次。