webpack是如何原生支持监听文件变化并自动刷新网页的

[gwuhaolin]

webpack是如何原生支持监听文件变化并自动刷新网页的

[gwuhaolin]

自动刷新网页由两大步骤实现：

1. webpack 开启监听模式时会监听文件变化事件，在文件发生变化时重新构建，输出新的结果。也就是说webpack 的职责是监听文件变化和重新构建。
2. webpack-dev-server 在收到webpack发送给它的文件变化消息后，通过websocket向网页发指令，运行在网页中的代理客户端收到指令后刷新网页。也就是webpack-dev-server的职责是去控制浏览器。

详情见 4-5使用自动刷新

[gaoguoxin]

hey,你书里面说的是webpack原生支持网页自动刷新,而不是通过webpack-dev-server,按照你的解释，webpack是不能原生支持网页自动刷新的，是必须通过webpack-dev-server的，无论是通过模块热加载还是通过websocket,都是借助了webpack-dev-server，所以我觉得书里面说的webpack原生只会网页自动刷新是错误的。

[zshawk1992]

@gaoguoxin 作者没有解释错误，webpack只负责监听文件，webpack-dev-server负责刷新

[biley]

我也是看到这个问题来找 issue 的，这是 1-6 中的内容。其中原文为：

实际开发中你可能会需要：

1. 提供 HTTP 服务而不是使用本地文件预览；
2. 监听文件的变化并自动刷新网页，做到实时预览；
3. 支持 Source Map，以方便调试。

以及

Webpack 原生支持上述第2、3点内容，再结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。

其中 webpack 可以原生支持第二点是有误的。