乐趣区

关于webpack:深入理解webpack自动刷新浏览器

jiezi

咱们在日常开发时，有一个须要在开发状态下的优化，就是 浏览器能主动显示批改后的代码，而无需咱们手动刷新

1. 主动刷新浏览器

为了能实现浏览器主动刷新，须要做两件事件:

  • 监听文件变动
  • 主动刷新浏览器

1.1 监听文件变动

监听文件变动是在 webpack 模块进行。

1.1.1 形式

须要在 webpack 中开启监听模式，有两种形式（开启监听模式后，能够设置监听相干配置 watchOptions）：

1. 在 webpack 配置文件中增加 watch:true

module.export = {
  watch: true,
  watchOptions: {
    // 不监听的文件或文件夹
    ignored: /node_modules/,
    // 监听到变动产生后会等 300ms 再去执行动作，避免文件更新太快导致从新编译频率太高  
    aggregateTimeout: 300,  
    // 判断文件是否发生变化是通过不停的去询问零碎指定文件有没有变动实现的
    poll: 1000
  }
}

2. 在执行启动 Webpack 命令时，带上 –watch 参数

1.1.2 原理

  • 在 Webpack 中监听一个文件发生变化的原理是 定时 （ 可在 watchOptions.poll 中设置 ）的去获取这个文件的最初编辑工夫，每次都存下最新的最初编辑工夫， 如果发现以后获取的和最初一次保留的最初编辑工夫不统一，就认为该文件产生了变动
  • 当发现某个文件产生了变动时，并不会立即通知监听者，而是先缓存起来，收集 一段时间 ( 可在 watchOptions.aggregateTimeout 中设置 ) 的变动后，再一次性通知监听者。避免在编辑代码的过程中可能会高频的输出文字导致文件变动的事件高频的产生

1.2 主动刷新浏览器

监听到文件变动后须要去刷新浏览器，这部分在 webpack-dev-server 模块中进行。(在应用 webpack-dev-server 模块去启动 webpack 模块时，webpack 模块的监听模式默认会被开启)

1.2.1 原理

主动刷新有三种办法：

  • 借助浏览器扩大去通过浏览器提供的接口刷新
  • 往要开发的网页中注入代理客户端代码，通过代理客户端去刷新整个页面。
  • 把要开发的网页装进一个 iframe 中，通过刷新 iframe 去看到最新成果。

DevServer 反对第 2、3 种办法，第 2 种是 DevServer 默认采纳的刷新办法。

2. 模块热更新

以上主动刷新是会刷新整个页面，这种形式的毛病就是工夫长，同时不能保留页面的状态。

而模块热更新即可在不刷新整个页面的状况下来实时预览。它只会在代码发生变化时，只编译发生变化的模块，并替换浏览器中的老模块。

2.1 两种形式

以下两种形式都能实现模块热替换，区别在于其外部应用的通信形式不同。前者应用 webcoket 通信，后者应用 eventSource 通信。

2.1.1 webpack-dev-server

1. 开启形式

  • 开启 DevServer 的模块热替换模式：webpack-dev-server –hot
  • 增加 HotModuleReplacementPlugin 插件

2. 原理

参考

2.1.2 webpack-hot-middleware

1. 开启形式

  • Webpack 配置增加 HotModuleReplacementPlugin 插件
  • Node Server 引入 webpack-dev-middlerware 和 webpack-hot-middleware 插件（自己参加的我的项目中用到的是 koa-webpack-middleware）
  • entry 中注入热更新代码(必须要注入。为了保障服务端和客户端可能通信)
    webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000

2. 原理
原理参考

退出移动版