webpack - 服务器上的热模块重新加载

时间:2016-03-17 23:44:07

标签: node.js webpack webpack-dev-server isomorphic-javascript webpack-hmr

Webpack热重载(webpack-hot-middleware)非常适合客户端;每当文件发生更改时,它都会在客户端上重建和更新资产。但对于通用/同构服务器,服务器需要预呈现HTML响应,这非常困难。

天真的解决方案是每当文件更改时重启(例如使用nodemon)服务器,但这会关闭所有客户端连接,对于大型服务器,这非常慢。

稍微好一点的解决方案是手动监视资产(例如使用chokidar),并在文件更改后再次清除缓存/需求。但是,当需要监视依赖关系时,这需要额外的复杂性;必须解析文件以确定它们需要什么。

此外,如果代码库是用compile-to-js语言编写的,最好运行编译服务器进行生产(不再有babel-node)。使用已编译的服务器,不再可能使用上述机制,因为:

  • webpack对动态需求支持不足:require(variable)而不是require('./file.js')
  • 节点本身不需要代码

就我而言,我已将require函数抽象为一个使用babel-register ed require的包(之前我使用过babel API,但它依赖于大量未记录的节点源)。

这是我目前在https://github.com/edge/cyc中使用的解决方案,它在某种程度上有效,但它是偶然的并且有很多警告。通常,与webpack并行编写的自定义代码越多,进一步偏离了所需的行为。

是否有更强大的方法可以更轻松地复制webpack的行为?

2 个答案:

答案 0 :(得分:1)

我写了package,可能会有所帮助。您可以在服务器代码中使用if (module.hot) {...}

简而言之,在webpack配置中,此function将服务器创建为分叉进程。如果源文件发生更改,webpack将重新编译并向子进程发送信号。在您的服务器代码中,您可以包含if (module.hot) {... module.hot.accept(...) ...}以接受或拒绝更新。

但是,如果您接受更新,请记住删除所有可能的副作用。如果拒绝,服务器将重新启动。

我还在学习......希望这有帮助

答案 1 :(得分:1)

我最近发布了webpack-hot-server-middleware,旨在与webpack-dev-middleware(以及可选webpack-hot-middleware)一起使用。

这需要一种非常简单的方法,允许您热更新服务器渲染包,而无需重新启动进程或对代码执行任何特别的操作。