我最近开始研究webpack，因为它具有一些酷炫的功能，可以编写真正的CSS模块，并具有智能捆绑功能，而且还有HMR，这就是为什么我在这里。我已经看到了React Redux项目的示例，这些示例使得无需重新加载浏览器就可以更新javascript代码。哇，我认为那是不可能的。
我想了解更多，尤其是它在后台的工作方式，以使其与我当前的项目Vanilla JS一起使用。
同时，我对函数式编程语言的兴趣将我带到了Emacs。我发现emacs编辑器中有一个skewer-mode可以更新javascript和HTML！实时，无需浏览器。
我知道他们俩都使用本地服务器将更改推送到浏览器，并在客户端上以某种方式将代码更新的脚本。但是它们如何保留应用程序的状态。就React项目而言，这是可以想象的，因为应用程序基于组件的性质，您可以将组件替换为新组件，但是我不确定它们如何搜索变量并为它们重新分配新值。也许他们确实使用了一些评估魔法。但我不确定。
那么它们究竟如何工作？也许我从错误的角度看，但是我没有清晰的画面。
Emacs也有实时更新的HTML，webpack HMR可以做到吗？
（我不太在乎HTML，因为我是在JS中完成的。但是我认为它可以解释这两者之间的区别。）
这样做哪个更好？
它们各自的优缺点是什么，或者它们只是世界的不同部分，可以整合起来变得更好吗？
也许有更好的选择，而无需像本地Web服务器这样的中间件，而只是编辑器插件与某些浏览器扩展通信？
附注：我不介意学习工具可以优化我的工作，因为它总能带来回报。
最佳答案
那么它们究竟如何工作？
在Webpack HMR documentation中，
通常，模块开发人员编写在更新此模块的依赖项时调用的处理程序。他还可以编写一个在更新此模块时调用的处理程序。
每种模块类型都需要为其编写更新逻辑。
在skewer-mode repository中，
表达式是从编辑缓冲区中即时发送的，以便在浏览器中进行评估，就像Emacs在Lisp模式下使用劣等的Lisp进程一样。
您的代码以字符串形式发送到浏览器，并通过全局eval运行。
这样做哪个更好？各自的优缺点是什么？
如果您使用已为其编写了HMR插件的库，则值得使用此功能。没有HMR钩子的库将无法从中受益。 Webpack的HMR似乎极其复杂，并且其文档和插件警告HMR的“实验”状态。因此，它可能不可靠，因此可能会不利于您的开发。例如，重装模块需要正确清理非重装模块。如果某些脚本将侦听器添加到window或document并且没有提供删除它们的方法怎么办？
如果希望文本编辑器充当浏览器的附加REPL，则可以使用skewer-mode。要在应用程序中进行任何更改，必须通过全局变量公开其中的某些部分。也许您导出了一个全局对象并附加了一堆子模块，例如window.APP = {}，APP.Dialog，APP.Form ...，或者，可能只是将数百个隐式全局变量和函数释放到您的环境中。您可以通过评估这些模块/函数/变量的定义，然后评估一些使用它们的代码来查看应用程序中的更改，例如通过调用引导您的应用程序的函数APP.initialize()或触发您使用的视图库中的重绘（通常通过执行用户操作（例如单击元素））。
如果您的应用程序编写的方式无法在浏览器控制台中进行修改（例如，如果您使用的模块编译器（如Browserify或Webpack）将您的代码封装在一个大的闭包中），那么您将无法做很多事情skewer-mode。此外，请考虑手动评估代码段/文件并重新运行初始化代码（并可能创建不可能的应用程序状态，这会浪费您的调试时间），还是只是刷新页面并重新创建您的先前状态，会更快。
从这两种工具中获得的收益很大程度上取决于应用程序的结构方式。我可以看到他们在完全正确的条件下（如上所述）创建了令人愉快的开发工作流。否则，它们似乎很可能造成伤害，因此不值得。