Webpack + docker + hot reload 404 page not found

Я пытаюсь реализовать поведение hot reload при помощи react + webpack + docker. Я перепробовал множество способов. Основное отличие было замечено при использовании опции "writeToDisk". Если оно false, то мой /app/dist внутри контейнера становится пустым после hot reload, а страница теперь 404 page not found. Если оно true, то в dist появляются новые файлы, с постфиксом hot-reload. Но на странице нет никаких изменений. Я не силён в сборке, прошу о помощи.

Вот мои конфиги:

compose.yml

services:
  backend:
    build: ./backend
    restart: always
    volumes:
      - frontend-dist:/app/frontend-build
    ports:
      - '8080:8080'
    environment:
      - GIN_MODE=release
    env_file:
      - env
    depends_on:
      - db
      - frontend

  frontend:
    build: ./frontend
    volumes:
      - frontend-dist:/app/dist
    restart: always
    environment:
      - NODE_ENV=production
      - WATCHPACK_POLLING=true
    command: ['pnpm', 'run', 'dev']

volumes:
  frontend-dist:

webpack.config.js

import * as path from "path";

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);


export default {
  mode: 'development',
  entry: ["@babel/polyfill", "./src/main.tsx"],
  output: {
      publicPath: '/',
      path: path.resolve(__dirname, "dist"),
      filename: "[name].[hash].js"
  },
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    historyApiFallback: true,
    devMiddleware: {
      // writeToDisk: true,
      // publicPath: '/dist/'
    },
    hot: true,

  },    
  watchOptions: {
    aggregateTimeout: 500,
    poll: 1000
  },
  plugins: [ 
    new HTMLWebpackPlugin({ template: "./index.html", inject: true }),
    new CleanWebpackPlugin(),
    new NodePolyfillPlugin(),
    new StylelintPlugin()
  ],

Dockerfile (front)

FROM node:18

WORKDIR /app

COPY package.json pnpm-lock.yaml ./

RUN corepack enable
RUN pnpm install

COPY . .
RUN pnpm run build