文件监听和热更新原理分析

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

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

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

原理分析

轮训去判断文件的最后编辑时间是否发生变化。当某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等待一定时间段 aggregateTimeout ，在这个时间段内，如果有其他的文件也发生了变化，那么他最终会把这些变化了的文件列表一起去构建，一起把构建的结果生成到 bunlde 文件中去。

module.exports = {
  // 默认 false，不开启
  watch: true,
  // 只有开启监听模式时，watchOptions 才有意义
  watchOptions: {
    // 默认为空，不监听的文件或者文件夹，支持正则匹配
    ignored: /node_modules/,
    // 监听到变化发生后会等 300ms 再去执行，默认 300ms
    aggregateTimeout: 300,
    // 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问 1000 次
    poll: 1000
  }
}

虽然设置了文件监听，但是更新之后我们还是需要手动刷新浏览器才能看到更新，那么 webpack 有没有更好的方式呢？

热更新

借助 webpack-dev-server，当代码有修改时自动去构建，构建完成后通过热更新的方式让浏览器的内容自动去变化。热更新需要 webpack-dev-server 和 HotModuleReplacementPlugin 一起结合使用。

相比 watch 的另外一个优势是，没有磁盘的 IO，它输出的文件不放在磁盘文件中，而是放在内存中，所以他的构建速度会有更大的优势。

使用首先向 package.json 中增加一条命令”scripts”: { “build”: “webpack”, “watch”: “webpack –watch”, “dev”: “webpack-dev-server –open” // open 参数每次构建完成自动开启浏览器 } 复制代码热更新在开发模式中才会使用，修改 webpack.config.js 中的 mode 为 development。mode: 'development' 复制代码配置插件plugins: [ new webpack.HotModuleReplacementPlugin() ] 复制代码配置热更新devServer: { contentBase: './dist', // 服务的基础目录 hot: true // 开启热更新 } 复制代码原理分析

首先需要先了解几个概念。

Webpack Compile ：将 JS 源代码编译成 bundle.js

HMR Server ：用来将热更新的文件输出给 HMR Runtime

Bundle Server ：提供文件在浏览器的访问，以服务的方式访问

HMR Runtime ：会被注入到浏览器，更新文件的变化

bundle.js ：构建输出的文件

HMR Runtime 和 HMR Server 会建立起一条链接，通常是 websocket，就可以实时更新文件的变化。

_监听文件的新增内容_监听事件原理