Webpack-dev-middleware and webpack-hot-middleware configuration - node.js

Question

I have some conceptual troubles with webpack-dev-middleware and webpack-hot-middleware
I have SSR app (react + express), webpack (with clientside and serverside configs). Webpack configs:
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,
}
and
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,
},
};
Server file:
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}`);
});
Result of compile here (build folder):
/build
/client
/assets
/core
/css
/js
/static
/server
Production version works well, client's files served by nginx, express runs on port with nginx proxy also. I want to make dev server with hot reload, make same as it written in instruction,but i'm stuck here. I cant understand how it must work and what command in package.json must be.
For example: what webpack config i must use in devMiddleware compiler - client or server or merged?
Be glad if someone explain (best with pointing out where i went wrong). Thanks a lot.