问题：
 
HBuilderX编辑代码后，微信开发者工具没有实时更新。
 
 
原因：
 
微信开发者工具里设置了代码文件自动保存所导致。
 
 
解决方案：
 
① 打开微信开发者工具里的设置
 
 ② 进入设置界面后，点击编辑器，然后不要勾选 “修改文件时自动保存” 这一选项即可。
 
 

我们知道，webpack模块负责监听文件，webpack-dev-server模块则负责刷新浏览器，本文则详细讲述这两种原理
 
文件监听
 
相关配置
 
module.export = {
  // 只有开启监听模式时，watchoptions才有意义
  // 默认是 false，也就是不开启
  watch: true,
  // 监听模式开启时，watchOptions才有意义
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
}
 
工作原理
 
监听一个文件是否发生变化的原理是，定时获取这个文件的最后编辑时间，每次多存下最新的最后的编辑时间，如果发现当前获取的和最后一次保存的最后编辑时间不一致，就认为该文件发生了变化。
 
配置项中的watchOptions.poll用于控制定时检查的周期，具体含义是每秒检查多少次，判断文件是否发生变化是通过不停询问系统指定的文件有没有变化实现的，默认是每秒询问1000次。
 
当发现某个文件发生了变化，并不会立即告诉监听着，而是先缓存起来，收集一段时间的变化后，再一次性告诉监听者，配置选项watchOptions.aggregateTimeout 用于配置这个等待时间，默认是300ms，这样做的目的是，防止我们高频的输入文字，导致文件变化的事情高频率的发生。
 
ignored: /node_modules/是忽视node_modules下的文件，不监听他们，这也是对文件监听性能的一种优化，
 
监听优化
 
watchOptions.aggregateTimeout的值越大性能越好，因为这能降低重构的频率
watchOptions.poll的值越小越好，因为这能降低检查的频率，
 
但这两种优化方法的后果是监听模式的反应和灵敏度降低了。
 
自动刷新浏览器
 
注意：在使用webpack-dev-server模块去启动webpack模块时，webpack模块的监听模式默认会被开启。
 
自动刷新原理
 
控制浏览器刷新有以下三种方法：
 
借助浏览器扩展去通过浏览器提供的接口刷新，webstorm 的 liveEdit 功能就是这样实现的。
向要开发的网页中注入代理客户端代码，通过代理客户端去刷新整个页面。
将要开发的网页装进一个iframe中，通过刷新iframe去看到最新的效果
 
webpack支持第2、3种方法，第二种是devserver默认采用的刷新方法。
 
代理客户端方法的缺陷
 
在开启devserver.inline配置项时，devserver会向每个输出的chunk种注入代理客户端的代码，当我们的项目需要输出很多chunk时，就会导致构建缓慢，其实要完成自动刷新，一个页面至于要一个代理客户端，devserver之所以粗暴的为每个chunk都注入，是因为它不知道某个网页依赖了哪几个chunk，索性全部都注入一个代理客户端，网页只要依赖了其中任何一个chunk，代理客户端就被注入网页中。
 
使用iframe标签
 
我们可以关闭不够优雅的inline模式，只注入一个代理客户端，这种优化方式和上面不同之处在于，
 
入口网址由http://localhost:8080/变成了http://localhost:8080/webpack-dev-server/；
bundle.js中将不再包含代理客户端的代码；
 
本质是，需要监听的 网页被放进了一个iframe中，编辑源码后，iframe会被自动刷新，这种优化效果在要输出的chunk数量越多 提升越明显
 
其他
 
如果不想以iframe的方式去访问，但同时想让网页保持自动刷新的功能，则需要手动向网页注入代理客户端的脚本，向index.html中插入以下标签：
 
<script src="http://localhost:8080/webpack-dev-server.js"></script>
 
向网页注入以上脚本后，独立打开的网页就能自动刷新了，但要注意在发布到线上时要删除点这段用于开发的代码

Tableau 的企业用户，可能会遇到类似的应用场景：当业务数据迭代频繁或者业务数据分析需实时监控时，我们就要经常在服务器中刷新工作簿。
 
 
 
 
如果能实现工作簿的自动刷新，绝对是事半功倍的！那么，如何实现呢？码农们的第一反应：这个要写代码做集成吧。
 
其实，写代码做集成也是一种方法。但是，如果有更简单的方法，岂不更好呢？
 
1、打开 Tableau desktop，选择连接数据库。
 
 
2、选择所需数据模型，点击实时连接，点击立即更新。
 

微信开发者工具不要勾选自动保存
 
首先打开微信开发者工具，点击顶部的设置
 
 
然后点击下拉列表中的编辑器设置选项
 
 
 
 
最后找到修改文件时自动保存选项，勾选前面的复选框