运行Docker时webpack配置文件找不到的问题求助

错误信息 #

> webpack-dev-server --open --progress --config webpack.dev.js && npm run build:css -- -w

[webpack-cli] Failed to load '/usr/src/webpack.dev.js' config
[webpack-cli] Error: Cannot find module '/usr/src/webpack.dev.js'
Require stack:
- /usr/src/node_modules/webpack-cli/lib/webpack-cli.js
- /usr/src/node_modules/webpack-cli/lib/bootstrap.js
- /usr/src/node_modules/webpack-cli/bin/cli.js
- /usr/src/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:955:15)
    at Module._load (node:internal/modules/cjs/loader:803:27)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at WebpackCLI.tryRequireThenImport (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:204:22)
    at loadConfigByPath (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1404:38)
    at /usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1454:88
    at Array.map (<anonymous>)
    at WebpackCLI.loadConfig (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1454:68)
    at WebpackCLI.createCompiler (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1785:33) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/src/node_modules/webpack-cli/lib/webpack-cli.js',
    '/usr/src/node_modules/webpack-cli/lib/bootstrap.js',
    '/usr/src/node_modules/webpack-cli/bin/cli.js',
    '/usr/src/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

解决方案 #

1. 修正Dockerfile的工作目录与文件复制逻辑 #

原Dockerfile存在工作目录混乱问题（创建了/usr/src/app但未实际使用），导致项目文件路径错误。修改后的Dockerfile如下：

FROM node:latest

# 设置正确的工作目录
WORKDIR /usr/src/app

# 将node_modules的bin目录加入系统PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# 先复制package.json以利用Docker缓存优化构建速度
COPY package.json ./
RUN npm install

# 复制项目所有文件到容器工作目录
COPY . .

# 启动应用
CMD ["npm", "start"]

2. 检查并修正.dockerignore文件 #

如果.dockerignore中包含了webpack配置文件、src目录或其他必要文件的忽略规则，会导致这些文件无法复制到容器内。确保你的.dockerignore只忽略无关文件，示例：

node_modules
dist
.git
.gitignore
.DS_Store

3. 验证文件是否被正确复制 #

可以在Dockerfile中添加目录查看命令，确认webpack配置文件已被复制到容器内：

...
COPY . .
# 查看当前目录所有文件，验证配置文件存在
RUN ls -la
...

重新构建镜像并运行，查看终端输出中是否包含webpack.dev.js、webpack.common.js等文件。

4. 确认webpack命令的路径正确性 #

你的package.json脚本webpack-dev-server --open --progress --config webpack.dev.js使用相对路径调用配置文件，只要工作目录正确，该路径就能正常找到配置文件，无需额外修改。

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