使用 server 选项时如何在 webpack-hot-client 上设置客户端主机和端口？答案

【问题标题】：How to set client host and port on webpack-hot-client when using server option？使用 server 选项时如何在 webpack-hot-client 上设置客户端主机和端口？
【发布时间】：2019-09-11 14:05:22
【问题描述】：

我想构建一个全栈koa服务器，webpack-hot-client doc上有一些例子。

这是我的代码：

const KoaWebpack = require('koa-webpack')
const app = new Koa()
app.use(myApi) // server side code
const server = app.listen(3000)
const webpackMiddleware = KoaWebpack(config, hotClient: { server })
app.use(webpackMiddleware)

在浏览器控制台中，发现无法连接到 ws://[::]:3000 的错误。

我认为这是对我的服务器属性的引用，但我们使用 nginx 作为代理，无需更改。

那么，这种情况下如何设置当前呢？

顺便说一下，它是远程服务器，而不是本地服务器。

【问题讨论】：

标签： webpack websocket koa

【解决方案1】：

无需修改服务器主机和端口。

我犯了一些错误。

步骤：

通过 koa2 制作服务器端应用，不监听端口
将热客户端设置为远程服务器，不需要端口（随机）。
使用 webpack 中间件。
监听你想要的端口

代码：

const webpack = require('webpack');
const koaWebpack = require('koa-webpack');

const devConfig = require('./build/webpack.dev.conf.js');
const app = require('./server');
const { dev, hotClient } = require('./build/config'); //hotClient: { host }

async function devel() {
  const config =  await devConfig;
  await app.ready; // promise => server ready?
  const koaMiddleware = await koaWebpack({ config, hotClient });
  app.use(koaMiddleware);
  app.listen(dev.port, () => console.log(`full stack hot client listen on port ${dev.port}, wait for webpack compile`));
}

devel().catch(console.error);

module.exports = app;

我有这个问题是因为我目前无法监听端口，它显示一些进程已经在使用它。这种情况发生在我身上，终端已经关闭，但 nodemon 没有。当我更改文件时，很多 nodemon “运行良好”，所以我不能使用我想要的端口。这让我判断错误并在 webpack 和 koa 端口问题上浪费了很多时间。

【讨论】：