Webpack-dev-middleware and webpack-hot-middleware configuration

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.

Webpack-dev-middleware and webpack-hot-middleware configuration

0 Answers0