React+Webpack5+Docker热重载异常：404或页面无变化求助

问题描述 #

我正在尝试实现React + Webpack5 + Docker环境下的热重载功能，已尝试多种方案，发现差异主要来自writeToDisk配置项：

• 当设为false时，容器内的/app/dist目录在热重载后变为空，页面出现404错误；
• 当设为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

解决方案 #

1. 修正Docker Compose前端服务配置 #

核心问题在于开发环境误用生产环境变量，且未挂载本地源码目录让Webpack监听变化：

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:/app  # 挂载本地源码，让Webpack监听文件变化
      - frontend-dist:/app/dist
    # 移除restart: always，开发环境不需要自动重启
    environment:
      - NODE_ENV=development  # 改为开发环境，启用HMR
      - WATCHPACK_POLLING=true
    command: ['pnpm', 'run', 'dev']
    ports:
      - '3000:8080'  # 暴露前端dev server端口，方便本地直接访问

volumes:
  frontend-dist:

2. 调整Webpack配置，适配容器环境 #

• 关闭CleanWebpackPlugin，避免开发时清空dist目录导致404
• 配置devMiddleware的publicPath，确保资源路径正确
• 保持writeToDisk默认false，依赖Webpack Dev Server的内存托管

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: {
      publicPath: '/'  // 与output.publicPath保持一致
    },
    hot: true,
    liveReload: false  // 只启用HMR，禁用自动刷新
  },    
  watchOptions: {
    aggregateTimeout: 500,
    poll: 1000
  },
  plugins: [ 
    new HTMLWebpackPlugin({ template: "./index.html", inject: true }),
    // 注释掉CleanWebpackPlugin，开发环境无需清空dist
    // new CleanWebpackPlugin(),
    new NodePolyfillPlugin(),
    new StylelintPlugin()
  ],
};

3. 简化Dockerfile，适配开发流程 #

开发环境不需要预先构建，由Webpack Dev Server实时编译：

FROM node:18

WORKDIR /app

COPY package.json pnpm-lock.yaml ./

RUN corepack enable
RUN pnpm install

COPY . .

# 移除预先构建命令，开发时由dev server实时处理
# RUN pnpm run build

EXPOSE 8080

原理说明 #

• 挂载本地源码目录后，Webpack能通过poll机制实时监听文件变化，触发热重载（HMR）
• 开发环境下Webpack Dev Server默认将编译后的资源存在内存中，不需要写入磁盘，避免文件同步冲突
• 关闭CleanWebpackPlugin防止dist目录被意外清空，解决404问题
• 前端容器暴露3000端口后，直接访问localhost:3000即可看到实时热重载效果，后端仍可通过共享卷读取dist目录的构建产物（如需）

内容的提问来源于stack exchange，提问作者Никита Шевченко