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

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

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

阅读 7k
2 个回答

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

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

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

clipboard.png

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

clipboard.png

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

新手上路,请多包涵

原因是使用域名代理之后,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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题