Vue Server-Sided Rendering Горячая перезагрузка модуля Поддержка новых модулей

Question

Vue предлагает пример HackerNews, демонстрирующий, как выполнять рендеринг на стороне сервера, а также поддержку перезагрузки горячих модулей.

По сути, код на стороне клиента и сервера разделен на два файла: скомпилирован в два файла json entry-client.js а также entry-server.js, Затем для каждого из них пишутся две конфигурации веб-пакетов, которые будут скомпилированы в файлы JSON.

Тогда есть сервер server.js который использует vue-server-renderer обрабатывать два JSON и обслуживать содержимое.

Что касается перезагрузки горячих модулей, то внутри конфигурации есть файл setup-dev-server.js build папка, которая обрабатывает задачу и хранит скомпилированный контент внутри webpack-dev-middlewareФайловая система.

Эта настройка работает идеально, если вы только вносите изменения в entry-client.js а также entry-server.js и связанные с ними модули. Тем не менее, я хочу добавить новый модуль, который используется только server.js наряду с поддержкой перезагрузки горячего модуля.

Примером может быть добавление RESTful API, entry-api.js:

export function apiRoutes(app) {
  app.get('/hihi', (req, res, next) => {
    res.send(JSON.stringify({ status: 'hmr hi hitest success' }));
  });
  app.get('/byebye', (req, res, next) => {
    res.send(JSON.stringify({ status: 'hmr bye byetest success' }));
  });
}

И в server.js:

const isProd = process.env.NODE_ENV === 'production'
// ...
const app = express()

// ...
if (isProd) {
  const template = fs.readFileSync(templatePath, 'utf-8')
  const bundle = require('./dist/vue-ssr-server-bundle.json')
  const clientManifest = require('./dist/vue-ssr-client-manifest.json')
    renderer = createRenderer(bundle, {
    template,
    clientManifest
  })
  apiRoutes = require('./dist/api-bundle.js')
  apiRoutes(app)
} else {
  readyPromise = require('./build/setup-dev-server')(
    app,
    templatePath,
    (bundle, api, options) => {
      renderer = createRenderer(bundle, options)
    }
  )
}
// ...
app.get('*', isProd ? render : (req, res) => {
  readyPromise.then(() => render(req, res))
})

Мне удалось написать конфиг веб-пакета для компиляции entry-api.js который отлично работает для сборки производства. Что касается перезагрузки горячего модуля, любые изменения в коде, связанные с entry-api.js вызывает перекомпиляцию, но изменения не отражаются в реальном времени. Может ли кто-нибудь показать мне, какие изменения я должен внести в set-dev-server.js заставить это работать?

Ссылка:

Мой конфиг веб-пакета для entry-api.js:

const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')

module.exports = merge(base, {
  target: 'node',
  devtool: '#source-map',
  entry: './src/entry-api.ts',
  output: {
    filename: 'api-bundle.js',
    libraryTarget: 'commonjs2'
  },
  // https://webpack.js.org/configuration/externals/#externals
  // https://github.com/liady/webpack-node-externals
  externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
    whitelist: /\.css$/
  }),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
})

Я также открыл вопрос о GitHub, который, я сомневаюсь, получит какой-либо ответ.