Горячая перезагрузка модуля с помощью Node API webpack-dev-server

Question

Я пытаюсь сделать так, чтобы я мог получить веб-пакет для вывода 2-х комплектных файлов (клиент и сервер) отдельно с горячей перезагрузкой для обоих. Для этого я использую прямой API Node.JS, а не CLI.

Я прочитал кое-что о параметрах мультикомпилятора, но мне не совсем понятно, как я могу получить живую перезагрузкуработать на моем экспресс-сервере. Моей конечной целью является автоматический запуск моего экспресс-сервера и повторная загрузка всех изменений, которые я внесу в файл этого сервера ниже.

Сервер

const express = require('express')
const app = express()
const port = 3002

app.get('/', (req, res) => res.send('tests!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Файл конфигурации Webpack

  const { client } = webpackConfig()

  const devServer = { host, port, ...client.devServer }

  WebpackDevServer.addDevServerEntrypoints(client, devServer)
  const compiler = webpack(client)

  const server = new WebpackDevServer(compiler, devServer)
  server.listen(port, host, err => {
    if (err) {
      console.error(err)
      process.exit(1)
    } else if (args.open) {
      openBrowser(`http://${host}:${port}${publicPath}/`)
    }
  })

Объект конфигурации Webpack (при ведении журнала консоли)

{ entry: './src/server.js',
  output:
   { path: '/project/target/webapp',
     filename: 'bundle.server.js',
     globalObject: 'this' },
  plugins:
   [ DefinePlugin { definitions: [Object] },
     NamedModulesPlugin { options: {} },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     HtmlWebpackPlugin {
       options: [Object],
       childCompilerHash: undefined,
       childCompilationOutputName: undefined,
       assetJson: undefined,
       hash: undefined,
       version: 4 },
     ProgressPlugin { profile: undefined, handler: [Function] } ],
  externals: [ [Function] ],
  module: { rules: [ [Object] ] },
  resolve:
   { alias: {},
     extensions: [ '.mjs', '.js', '.json', '.jsx', '.ts', '.tsx' ],
     modules:
      [ 'src/main/webapp/',
        'src/main/webapp/js',
        'src/main/webapp/css',
        'src/main/webapp/lib/',
        'node_modules' ] },
  devServer:
   { watchOptions: { poll: 1000 },
     publicPath: '/dat',
     hotOnly: true,
     inline: true,
     disableHostCheck: true,
     historyApiFallback: true,
     contentBase:
      '/Users/Desktop/proj/src/main/resources',
     proxy:
      { '/admin': [Object],
        '/search': [Object],
        '/services': [Object],
        '/webjars': [Object] } },
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',

Часть сервера, которую яДеструктура в конфигурацию webpack выглядит следующим образом:

const server = () => ({
  target: 'node',

  // Tell webpack the root file of our
  // server application
  entry: './src/main/webapp/server.js',

  // Tell webpack where to put the output file that is generate
  output: {
    path: resolve('./target/webapp'),
    filename: 'bundle.server.js',
    globalObject: 'this',
  },
  externals: [webpackNodeExternals()],
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {},
      },
    ],
  },
})