webpack-dev-middleware和webpack-hot-middleware配置

Question

我对webpack-dev-middleware和webpack-hot-middleware我有一些概念上的麻烦

我有ssr应用（react + express），webpack（带有客户端和服务器配置）。 WebPack配置：

client.config

const config: Configuration = {
    name: 'client',
    target: 'web',
    mode: IS_DEV ? "development" : "production",
    output: {
        path: path.join(DIST_DIR, 'client'),
        filename: IS_DEV ? 'core/js/[name].js' : 'core/js/[contenthash].js',
        publicPath: '/',
    },
    entry: [
        path.join(SRC_DIR, 'client.tsx'),
        IS_DEV && 'webpack-hot-middleware/client',
    ].filter(Boolean) as Entry,
    module: {
        rules: [
            *client rules here*
        ],
    } as ModuleOptions,
    optimization: *optimization here*,
    resolve: *resolve*,
    plugins: [
        IS_DEV && new webpack.HotModuleReplacementPlugin(),
        IS_DEV && new ReactRefreshWebpackPlugin({
            overlay: {
                sockIntegration: 'whm',
            },
        }),
        new MiniCssExtractPlugin({
            filename: IS_DEV ? "core/css/[name].css" : "core/css/[contenthash].css",
            chunkFilename: IS_DEV ? "core/css/[id].css" : "core/css/[contenthash].css",
        }),
        new ESLintPlugin({
            extensions: ["js", "jsx", "ts", "tsx"],
        }),
        new LoadablePlugin(),
        new CopyWebpackPlugin({
            patterns: [{ from: './src/assets', to: 'assets' }]
        }),
    ].filter(Boolean) as WebpackPluginInstance[],
    devtool: IS_DEV ? "source-map" : false,
}

和

server.config

const config: Configuration = {
    name: 'server',
    mode: IS_DEV ? "development" : "production",
    target: 'node',
    output: {
        path: path.join(DIST_DIR, 'server'),
        filename: 'server.js',
        libraryTarget: 'commonjs',
        publicPath: '/',
    },
    entry: path.join(SRC_DIR, 'server.ts'),
    module: {
        rules: [
            *server rules here*
        ],
    },
    optimization: common.optimization,
    resolve: common.resolve,
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    devtool: IS_DEV ? "source-map" : false,
    externals: [
        nodeExternals(),
        '@loadable/component'
    ],
    node: {
        __dirname: false,
        __filename: false,
    },
};

服务器文件：

import { IS_DEV } from '../webpack/env';
import devMiddleware from 'webpack-dev-middleware';
import hotMiddleware from 'webpack-hot-middleware';

import config from '../webpack/client.config';

const app = express();

const compiler = webpack(config);

if (IS_DEV) {

    const devServer = devMiddleware(compiler, {
        serverSideRender: true,
        publicPath: '/'
    });

    app.use(hotMiddleware(compiler, {
        path: '/__webpack_hmr'
    }));

    app.use(devServer);
}

app.get('*', *server render here*);

const port = process.env.PORT || 8080;

app.listen(port, () => {
    console.log(`Application is started on ${port}`);
});

Compile的结果（构建文件夹）：

/build
   /client
        /assets
        /core
             /css
             /js
             /static
   /server

生产版本运行良好，客户端由NGINX提供的文件，Express在端口上也在nginx代理上运行。我想用热装加载制作开发服务器，与指令写的相同，但我被困在这里。我无法理解它必须如何工作以及package.json中的命令。

例如：我必须在devmiddleware编译器 - 客户端或服务器或合并中使用哪种WebPack配置？

如果有人解释（最好指出我出错的地方），请感到高兴。多谢。