Webpack 在单个进程/相同端口上具有节点后端，前后热重载......？答案

【问题标题】：Webpack with node backend on single process/same port with hot reload for both front and back…?Webpack 在单个进程/相同端口上具有节点后端，前后热重载......？
【发布时间】：2019-10-31 21:03:35
【问题描述】：

我有一个非常标准的设置，它带有一个节点后端，它将 SPA 作为 webpack 包提供，以及为该 SPA 应用程序提供服务的 api。后端使用的是koa2。

所以我的前端部分的热重载工作得很好，但我现在在后端有更多的工作，需要让我的往返速度更快。

我想知道最好的方法是什么。我是这样开始的：

1。从 webpack 引导

我使用了当时看起来很标准的 webpack-serve，并将 KOA 作为中间件添加到 webpack 配置中：

serve: {
  add: app => {
    require('./src/node/backend')(app)
}
....

但是，这不会热重载后端，而且非常痛苦，因为我必须在后端更改时重新启动整个 webpack-serve 命令。

然后我尝试了

2 从节点后端以 webpack 作为中间件进行引导

const Koa = require('koa')
const koaWebpack = require('koa-webpack')
const webpack = require('webpack')
const app = new Koa()

const config = require('../../webpack.dev.js')
const compiler = webpack(config)

koaWebpack({ compiler }).then(middleware => {
  require('./backend')(app) // delegate to the common
  app.listen(process.env.port)
  app.use(middleware)
  return app
})

这也适用于前端，但我仍然没有重新加载后端，所以基本上是相同的体验。

3。将 webpack-dev-server 和后端作为不同的进程运行。

这很好用，然后我可以将nodemon 用于 koa 后端，这对我来说已经足够了，但是我必须对我认为的端口进行一些改组。

我猜 webpack-dev-server/webpack-serve 可以充当代理并将内容传递到后端，除非它遇到我的任何前端内容。但这一切都让人感到乏味。我宁愿把它们都放在同一个端口上。

那么有没有其他简单的方法可以让两个构建热重新加载但仍然在同一个端口上一起运行......？

我发现了这个项目https://github.com/vlazh/node-hot-loader，这可能很有趣，但我真的觉得有必要先问一下我是否遗漏了一些更明显的东西，因为我真的很高兴重启我的服务器 nodemon 样式......（它很小而且快）

【问题讨论】：

标签： javascript node.js webpack koa2

【解决方案1】：

经过大量搜索，我找到了一些解决此问题的工具，但它们都使用 webpack 来捆绑服务器端代码，我觉得这对我来说有点过头了。

我最终为服务器端进行了应用内重新加载，停留在上面的备选方案 2 中。所以对于 koa 后端，我只是添加了一个文件监视来使开发服务器的需求缓存无效：

const chokidar = require('chokidar')
const watcher = chokidar.watch('.')
watcher.on('ready', () => {
  watcher.on('all', () => {
    Object.keys(require.cache).forEach(function(id) {
      if (id.indexOf('src/node') > 0 && id.indexOf('node_modules') < 0) {
        delete require.cache[id]
      }
    })
  })
})

然后是间接，因此总是通过 dev 中的要求：

const reloadable =
  process.env.NODE_ENV === 'development' ? id => (ctx, next) => require(id).then(r => r(ctx, next)) : id => require(id)

然后我在所有路由定义中使用它，例如：

const use = app.use.bind(app)
reloadable('./auth').then(use)
reloadable('./users').then(use)
reloadable('./ingredients').then(use)

这对我来说已经足够了。

【讨论】：