Webpack 实现 Node.js 代码热替换(webpack使用ejs)

编辑：rootadmin

推荐整理分享Webpack 实现 Node.js 代码热替换(webpack使用ejs)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:webpackjsonp,node.js+webpack开发实战,webpack使用ejs,node.js+webpack开发实战,webpack nodejs,webpack nodejs,webpack5 node,webpack5 node,内容如对您有帮助，希望把文章链接给更多的朋友！

这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌顶啊... 理解之后主要就是 Webpack 怎么配置和脚本怎么运行我写了一遍, 代码仅仅是这么短, 热替换就实现了: jlongster 的配置教程里抄: 注意是 webpack 而不是 webpack-dev-server注意后台运行的 & 只是为了不阻塞, 你有两个终端就开两个吧

我写了两个测试文件, 一个是会修改的代码 src/lib.coffee:

另一个入口文件 src/main.coffee 包含了处理模块替换的代码:

跑一跑 Demo, 就知道效果怎么样了, setInterval 不受替换的干扰而在 build/ 目录, 每次修改都会生成一个 JSON 文件记录修改的内容:

具体的文件内容也就是这样, 大致可以认为包含了识别更新所需的信息:

其他方案

白天在网上查找方案, 顺便在论坛上发了个帖子问这个事情,现成的主要两个说明比较清楚的方案, 值得借鉴一下

一个是百度的技术博客上, 写的大概是怎么对 module 对象做处理,也就是手工监听文件修改, 然后清楚模块缓存, 重新挂载模块思路清晰考虑细致, 虽然有点冗余代码, 还是可以一试: require.extensions 做了 hack, 增加了操作和事件,当模块文件更新时, 对应模块自动更新, 并且 emit 一个事件,通过这样的效果, 模块引用的位置可以做一些处理, 使用新的代码,这个应该说还是比较粗暴的, 毕竟不是所有的代码都容易替换 Webpack 这棵树上吊死, 也就不打算深入研究了,也许 Node.js 官方对 lib/module.js 做下优化能搞出不错的功能来,然而, JavaScript 毕竟不是不可变数据使用成风的社区, 比不了 Erlang,因为代码替换就涉及到状态更新的问题, 不好搞, 不如重启来得省事,而重启现在有 node-dev supervisor nodemon 三套方案任你选

对我来说, 主要是 Cumulo 方案对 WebSocket 存在巨大的依赖,现在前端开发已经能做到服务器上更新代码, 客户端自动更新了,通过 Webpack 和 React 的机制, 局部更新 DOM 和纯函数模块,如果说能够做到开发环境也能热替换, 这对于开发效率的提升就太大了,本来觉得热替换遥不可及的, 然而很可能是触手可及的效率提升!

后面大概还有坑, 毕竟黑科技... 遇到再说了

有兴趣可以细看下 jlongster 写的相关的几篇神作, 非常有帮助:

浅谈node.js中async异步编程 1.什么是异步编程？异步编程是指由于异步I/O等因素，无法同步获得执行结果时，在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、a

浅析Node.js 中 Stream API 的使用本文由浅入深给大家介绍node.jsstreamapi，具体详情请看下文吧。基本介绍在Node.js中，读取文件的方式有两种，一种是用fs.readFile，另外一种是利用fs.createR

Nodejs实战心得之eventproxy模块控制并发目标建立一个lesson4项目，在其中编写代码。代码的入口是app.js，当调用nodeapp.js时，它会输出CNode(