问题描述

先说下背景，通常情况下webpack(Vue)项目是通过npm run dev来启动的，webpack配置

    devServer: {
        hot: true,
    }

即可实现热更新。

这种是常规的开发方式，访问的页面一般是localhost:端口号，没有任何问题。

不过，个人习惯直接通过访问域名的方式来开发，通过代理工具来进行转发。比如在lightProxy中配置

https://example.com http://localhost:8088

就可以在页面直接访问example.com来代替localhost:8088了。

但这里就产生了新的问题，修改代码，webpack重新编译后，页面无法热更新了。

问题分析

先捋一下热更新的原理，参考自轻松理解webpack热更新原理 (opens new window)。

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

然后对比下2种方式的区别

• localhost访问

  建立ws，正常

  

  

  获取模块，正常，页面热更新

  

  

• 域名访问

  建立ws，不正常

  

  

  获取模块，不正常，页面没有热更新

  

  

问题比较明显了，域名开发的方式，在一开始建立websocket时就失败了，没有ws通信，浏览器是收不到重新编译通知的。

问题解决

只需要在lightProxy新增一行代理即可。

ws://example:8088/ws ws://localhost:8088/ws

类似问题：

关于Vue(webpack)项目在使用Nginx代理后, 热更新失效的问题 (opens new window)