webpack – 在服务器上重新加载热模块

Webpack热重载(webpack-hot-middleware)为客户提供了极好的服务。 它会在文件发生更改时重build和更新客户端上的资产。 但是对于服务器需要预渲染HTML响应的通用/同构服务器来说,这是非常困难的。

天真的解决scheme是,每当文件发生变化时,重新启动服务器(例如使用nodemon),但是这会closures所有的客户端连接,而对于大型服务器来说,这是非常缓慢的。

稍微好一点的解决scheme是手动观看资产(例如chokidar),并在文件更改后再次清除caching/需求。 但是,当需要监视依赖关系时,这需要更多的复杂性。 文件必须parsing以确定他们需要什么。

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

  • webpack对dynamic需求的支持很差: require(variable)而不是require('./file.js')
  • 节点本身不需要代码

在我的例子中,我已经将require函数抽象成了一个使用babel-register ed require的包(之前我使用过babel API,但是依赖于很多未公开的节点源)。

这是我目前在https://github.com/edge/cyc中使用的解决scheme,这个解决scheme有点用处,但它是随意的,并且有很多警告。 一般来说,与webpack并行编写的定制代码越多,越偏离期望的行为。

有没有一个强大的方法来更容易地复制webpack的行为?

我写了一个可能有所帮助的软件包 。 您可以在您的服务器代码中使用if (module.hot) {...}

简而言之,在一个webpackconfiguration中,这个函数创build一个服务器作为分叉进程。 如果源文件发生变化,webpack将重新编译并向subprocess发送一个信号。 在您的服务器代码中,可以包含if (module.hot) {... module.hot.accept(...) ...}来接受或拒绝更新。

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

我仍然在学习…希望这有助于

我最近推出了webpack-hot-server-middleware ,它被devise成与webpack-dev-middleware (和可选的webpack-hot-middleware )一起使用。

这需要一个非常简单的方法,使您可以热点更新服务器渲染包,而不必重新启动该过程,或对代码执行任何特别的操作。