Webpack4.x升级至5.x时webpack-hot-client报entry格式错误如何解决

问题根因 #

Webpack5 对 entry 配置做了标准化处理，即使传入数组格式的 entry，内部也会自动转换为 main: { import: [ 'webpack-hot-middleware/client', './src/index.js' ] } 的对象结构，而旧版 koa-webpack 依赖的 webpack-hot-client 仅支持 entry 值为数组或函数类型，无法识别 Webpack5 的新 entry 对象结构，因此抛出对应报错。

解决方案 #

方案1：升级兼容Webpack5的koa-webpack版本 #

旧版koa-webpack（v5及以下）依赖的webpack-hot-client没有适配Webpack5的entry新格式，直接将koa-webpack升级到v8及以上版本即可，该版本已经移除了对webpack-hot-client的依赖，改用Webpack原生的热更新能力，自动兼容Webpack5的entry结构。
升级命令：

npm install koa-webpack@latest --save-dev
# 或使用yarn
yarn add koa-webpack@latest -D

方案2：手动调整entry格式适配旧版依赖 #

如果不想升级koa-webpack版本，可以在给koa-webpack传配置前，先手动把Webpack转换后的entry结构转回webpack-hot-client能识别的格式：
在server.js中初始化koa-webpack的位置添加预处理逻辑：

const koaWebpack = require('koa-webpack');
const webpack = require('webpack');
const webpackConfig = require('./webpack.base.config.js');

// 预处理entry，适配旧版webpack-hot-client
if (process.env.NODE_ENV === 'development') {
  const { entry } = webpackConfig;
  // 处理Webpack5自动转换后的对象格式entry
  if (typeof entry === 'object' && !Array.isArray(entry)) {
    Object.keys(entry).forEach(key => {
      const entryVal = entry[key];
      if (entryVal.import && Array.isArray(entryVal.import)) {
        // 把{import: [...]}直接转为数组
        entry[key] = entryVal.import;
      }
    });
  }
}

// 再初始化koa-webpack
app.use(koaWebpack({
  config: webpackConfig,
  // 保留其他原有配置
}))

方案3：弃用webpack-hot-client，改用Webpack5原生热更新 #

如果不想动依赖版本也不想加entry预处理逻辑，直接关闭koa-webpack的hotClient配置，改用Webpack5自带的HotModuleReplacementPlugin + webpack-hot-middleware的组合即可：

1. 首先在webpack配置中添加热更新插件：

// webpack.base.config.js
const webpack = require('webpack');

module.exports = {
  // 其他原有配置
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // 其他原有插件
  ]
}

2. 在server.js初始化koa-webpack时关闭hotClient，单独挂载热更新中间件：

const compiler = webpack(webpackConfig);
app.use(koaWebpack({
  config: webpackConfig,
  hotClient: false, // 关闭内置的webpack-hot-client
  // 保留其他原有配置
}))
app.use(require('webpack-hot-middleware')(compiler));

内容的提问来源于stack exchange，提问作者whitefacejunior