如何在 Webpack 5 多编译器（配置数组）模式下使用单个服务器在一个包上设置 HMR 并在其他包上实时重新加载

Question

我们有一个 webpack 项目，我们只使用一个简单的快速服务器查看文件和提供文件。现在我们正在尝试将 webpack-dev-server 集成到其中。 我们有一个多编译器 webpack 设置。有一个“App”包和多个其他“libraryXYZ”包（它们相互依赖）。

我要

• HMR 在主“App”包上正常工作。
• 对于其他“库”包，我想触发实时重新加载。（库在需要时以编程方式注入到主应用程序中）。

我知道我可以为不同的包启动不同的 webpack 服务器，但为了方便，我想使用单个 webpack 服务器来完成。 （如果多个本地服务器用于捆绑，当前设置代码库的方式将不得不重构很多东西）

我们目前的App配置有点像这样（只有必要的细节）

const AppConfig  = {
    name:'app',
    entry: { app: path.resolve(basePath,'/src/index.tsx') },
    devServer: {
        port: 3000,
        hot:true,
        historyApiFallback: true
    }, 
    output: { path: path.resolve(basePath, 'dist') },
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                exclude: /node_modules/,
                use: [
                  {
                    loader: require.resolve('babel-loader'),
                    options: {
                      plugins: [require.resolve('react-refresh/babel')],
                    },
                  },
                ],
              }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({ template: path.resolve('/src/index.html') }),
        new ReactRefreshWebpackPlugin()
    ],
};

我们当前的 LibraryXYZ 配置（还有更多这样的库）

const LibraryXYZconfig = {
    name:'libraryxyz',
    dependencies:['libabc'],
    entry: {
        "main":path.resolve(basePath,'/src/libxyz/main.js'),
        "react-modify": path.resolve(basePath,"/src/libxyz/react-modify.js")
    },
    output: {  path: path.resolve(basePath, 'dist','libxyz')    },
};

当然最后

module.exports = [appConfig,libxyzConfig,libAbCConfig,libDEFConfig];;

现在 webpack 状态

请注意，在导出多个配置时，只有 将考虑第一个配置的 devServer 选项 帐户并用于数组中的所有配置。

这意味着我不能为每个包配置不同的开发服务器。 （不能设置 hot:true 一个 false 另一个）。 我的配置规则应该是什么样子以适合用例？ 这甚至是可能的事情吗？对处理此问题的替代方法持开放态度。 此外，如果有人知道使每个捆绑包热重载的方法，也会有兴趣知道这一点。（虽然我不确定它是如何工作的）。