Docker+Webpack预生产/生产环境无src文件启动故障排查

我在Docker中配置Webpack，开发环境运行正常，但预生产和生产环境无法正常工作。两者的区别在于开发环境会拷贝整个仓库，而预生产/生产环境仅拷贝构建文件（构建在Jenkins流水线中完成），目的是优化服务器空间。

Dockerfile配置 #

FROM node:alpine AS base
USER root
WORKDIR /app
COPY frontend/package*.json /app/
RUN npm install
RUN npm install -g serve

FROM base AS development
COPY frontend /app/
RUN npm run build:development

FROM base AS preproduction
COPY frontend/build /app/build
COPY frontend/public /app/public
COPY frontend/webpack.config.js /app/
COPY frontend/env /app/env

FROM base AS production
COPY frontend/build /app/build
COPY frontend/public /app/public
COPY frontend/webpack.config.js /app/
COPY frontend/env /app/env

Webpack配置 #

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

module.exports = () => {
  console.info("Environment: ", process.env.NODE_ENV);
  return {
    entry: path.resolve(__dirname, "src", "index.tsx"),
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      assetModuleFilename: "assets/[name][ext]",
    },
    devServer: {
      compress: true,
      port: 3000,
      static: __dirname,
      historyApiFallback: true,
    },
    plugins: [
      new Dotenv({
        path: path.resolve(__dirname, `./env/.env.${process.env.NODE_ENV}`),
        systemvars: true,
      }),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "build", "index.html"),
        filename: "index.html",
        favicon: "./public/favicon.ico",
        manifest: "./public/manifest.json",
        inject: "body",
      }),
    ],
    ...
}

package.json脚本命令 #

"cleanBuild": "rm -rf build/* && cp public/index.html build/index.html",
"build:preproduction": "npm run cleanBuild && NODE_ENV=preproduction webpack --mode production",
"start:preproduction": "NODE_ENV=preproduction webpack serve --mode production --port 3000 --allowed-hosts all",

核心疑问 #

运行Webpack是否必须在app目录下存在src文件？如果不需要，该如何解决当前问题？

运行Webpack构建确实需要src文件，因为Webpack的核心逻辑是从entry配置指定的入口文件（这里是src/index.tsx）出发，打包所有依赖的源码文件。但你的场景里，预生产/生产环境的构建已经在Jenkins完成，容器不需要再执行Webpack构建，只需托管已生成的静态产物即可，这才是优化服务器空间的正确思路。

你的预生产/生产镜像配置存在以下关键问题：

• 拷贝了webpack.config.js却没有src目录，若执行webpack serve这类命令，Webpack会找不到入口文件直接报错。
• 保留了完整的npm install依赖，其中包含Webpack等构建工具，完全没必要，徒增镜像体积。

具体修复方案 #

1. 精简Dockerfile的预生产/生产阶段

只保留静态服务所需的文件和依赖，移除构建相关内容：

FROM node:alpine AS base
USER root
WORKDIR /app
# 仅安装静态服务工具serve，无需安装所有项目依赖
RUN npm install -g serve

FROM base AS development
COPY frontend /app/
RUN npm install
RUN npm run build:development

FROM base AS preproduction
# 仅拷贝构建好的产物和必要的静态资源
COPY frontend/build /app/build
# 若build目录已包含public下的资源（如favicon、manifest），可省略此行
COPY frontend/public /app/public

FROM base AS production
COPY frontend/build /app/build
COPY frontend/public /app/public

2. 修改启动脚本，替换为静态服务命令

在package.json中替换预生产/生产的启动命令，不再使用Webpack：

"start:preproduction": "serve -s build -l 3000",
"start:production": "serve -s build -l 3000"

参数说明：

• -s：启用单页应用路由 fallback，对应Webpack devServer的historyApiFallback，解决页面刷新404问题。
• -l：指定服务端口为3000。

3. 验证Jenkins构建产物完整性

确保Jenkins执行build:preproduction后，build目录包含所有必要文件：

• 打包后的bundle.js及其他chunk文件
• 经过Webpack处理的index.html
• 所有静态资源（assets、favicon、manifest等）

额外说明 #

如果预生产环境需要热重载或动态构建能力，那才需要保留Webpack和src文件，但这会违背你优化服务器空间的初衷。既然构建流程已放在Jenkins完成，容器仅需作为静态文件服务器，这样镜像体积更小、启动速度更快，也更符合生产环境的部署规范。

内容的提问来源于stack exchange，提问作者Srevinu