MERN脚手架执行yarn run build失败，报错求助

问题重现 #

执行yarn run build时，终端输出如下警告与错误：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Users\0110\Documents\boilerplate-mern-stack-master'
resolve './src' in 'C:\Users\0110\Documents\boilerplate-mern-stack-master'
  using description file: C:\Users\0110\Documents\boilerplate-mern-stack-master\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\0110\Documents\boilerplate-mern-stack-master\package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\0110\Documents\boilerplate-mern-stack-master\src doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\0110\Documents\boilerplate-mern-stack-master\src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\0110\Documents\boilerplate-mern-stack-master\src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\0110\Documents\boilerplate-mern-stack-master\src.wasm doesn't exist
      as directory
        C:\Users\0110\Documents\boilerplate-mern-stack-master\src doesn't exist

webpack 5.74.0 compiled with 1 error and 1 warning in 494 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

项目根目录package.json内容如下：

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "react boiler plate",
  "main": "index.js",
  "engine": {
    "node": "10.16.0",
    "npm": "6.9.0"
  },
  "scripts": {
    "start": "node server/index.js",
    "build": "webpack",
    "backend": "nodemon server/index.js",
    "frontend": "npm run start --prefix client",
    "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"",
    "predeploy": "yarn build",
    "deploy": "gh-pages -d build"
  },
  "dependencies": {
    "async": "^3.2.0",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.18.3",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.5",
    "debug": "^4.1.1",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.24.0",
    "mongoose": "^5.4.20",
    "multer": "^1.4.2",
    "react-redux": "^5.0.7",
    "saslprep": "^1.0.3",
    "supports-color": "^7.1.0",
    "webpack": "^5.74.0"
  },
  "devDependencies": {
    "concurrently": "^4.1.0",
    "gh-pages": "^4.0.0",
    "nodemon": "^1.19.1",
    "webpack-cli": "^4.10.0"
  }
}

已尝试npm和yarn两种工具，问题未解决。

错误分析 #

1. 警告说明：webpack未指定mode参数，默认使用production模式。该警告不阻断构建，但明确配置模式可以启用对应环境的默认优化策略。
2. 核心错误：webpack在项目根目录查找./src入口失败——根目录既没有src目录，也不存在src.js、src.json等文件。从frontend脚本可以看出，前端代码实际存放在client目录下，但当前build脚本直接调用webpack，未指定正确的入口路径或配置文件。

解决方案 #

方案1：修改根目录build脚本（推荐） #

既然前端代码在client目录，且已有npm run start --prefix client启动命令，说明client目录下有独立的package.json和构建配置（比如Create React App生成的项目）。修改根目录package.json的build脚本，让它执行client目录下的构建命令：

"scripts": {
  // 保留其他脚本不变
  "build": "npm run build --prefix client",
  // 保留其他脚本不变
}

修改后，yarn run build会自动进入client目录执行前端构建，生成的产物目录也能匹配deploy脚本中的gh-pages -d build。

方案2：配置根目录webpack.config.js #

如果需要在根目录统一管理webpack构建，需创建webpack.config.js文件，指定正确的入口和输出：

const path = require('path');

module.exports = {
  mode: 'production', // 明确设置模式，消除警告
  entry: './client/src/index.js', // 指向client目录下的实际入口文件
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  // 按需添加其他配置：babel-loader、css-loader、插件等
};

注意：如果client目录已有完整的webpack配置，该方案会增加额外的配置成本，不推荐。

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