charles代理后的页面热更新失效

Question

webpack3.6+中配置hot，可以实现本地热更新。
但是开发环境的代码经过Charles代理后到本地却无法实现热更新，早期的自己使用hot-middleware格式的又可以实现热更新，有人遇到过吗？

怀疑时代理的地址需要加特殊链接

Answer 1

解决方法：
package.json的命令里添加--disaleHostCheck=true，当然dev-server里直接配置也是可以的。
webpack-dev-server --disaleHostCheck=true

哈哈，发现基本每次提问都没人回答。

最终是看了源码，然后在源码内打断点，输出相应的内容排查出来的。

上图中打印数据，报错如下图，找到这里真是不容易?。

报错了就好找问题了，查看devserver.disablehostcheck，大致就是安全机制导致的。
https://webpack.js.org/config...

Answer 2

原因是使用域名代理之后，websocket的代理失效。
热更新原理分析：

1. webpack监听文件修改
2. 触发重新编译
3. 通过websocket通知浏览器
4. 浏览器通过JSONP方式请求重新编译的js
5. 新模块替换旧模块，页面更新

问题解决方案就很简单了，在代理服务中，增加以下规则（本人用的是whistle）

wss://example.com:[port]/ws ws://localhost:[port]/ws
ws://example.com:[port]/ws ws://localhost:[port]/ws