Webpack非根目录执行构建报Can't resolve './src'错误排查

报错由两个核心问题共同导致：

1. 配置路径和实际目录结构不匹配：你贴出的项目结构中src目录位于MyApp/src、产物输出目录位于MyApp/static/frontend，但webpack配置的entry、output路径，以及tsconfig的include规则都多写了一层不存在的frontend目录，指向了不存在的路径。
2. 路径解析基准随执行目录漂移：webpack和ts-loader默认会使用**终端当前执行命令的工作目录（process.cwd()）**作为相对路径的解析基准，你虽然在部分配置里用了__dirname固定路径，但没有给ts-loader显式指定tsconfig的绝对位置，换目录执行时ts-loader会找错tsconfig位置、解析错include规则；同时错误设置的context参数会让webpack在entry路径无效时，fallback到context路径下找默认入口./src，最终拼出MyApp/MyApp/src这种错误路径触发报错。
   另外你的tsconfig.json里compilerOptions最后一项多了多余的尾逗号，JSON标准不支持尾逗号，会导致配置解析失败。

• 第一步，修正webpack.config.js配置，所有路径统一基于__dirname（即配置文件所在的项目根目录）拼接绝对路径，同时给ts-loader显式指定tsconfig位置，彻底屏蔽执行目录的影响，修正后配置如下：

const path = require("path");
const projectRoot = __dirname;

module.exports = {
  context: projectRoot,
  entry: {
    app: [
      path.resolve(projectRoot, "MyApp/src/index.tsx"),
      path.resolve(projectRoot, "MyApp/src/components/App.tsx"),
    ],
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            // 固定tsconfig的绝对路径，不受执行目录影响
            configFile: path.resolve(projectRoot, "tsconfig.json"),
            context: projectRoot
          }
        },
        exclude: path.resolve(projectRoot, "node_modules"),
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
  },
  output: {
    filename: "main.js",
    path: path.resolve(projectRoot, "MyApp/static/frontend"),
  },
};

• 第二步，修正tsconfig.json，对齐实际目录路径，删除多余的尾逗号，修正后配置如下：

{
    "compilerOptions": {
      "noImplicitAny": false,
      "module": "es6",
      "target": "es6",
      "jsx": "react",
      "allowJs": true,
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "strictNullChecks": false,
      "sourceMap": true,
      "skipLibCheck": true
    },
    "include": ["./MyApp/src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

• 第三步，在项目根目录的package.json中添加固定构建脚本，避免手动输入命令时的路径问题：

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

后续无论终端在哪个工作目录，只要执行npm run build --prefix 你的MyApp-django项目的绝对路径即可正常构建；如果需要全局任意位置直接调用命令，可以自行给上述命令添加系统alias，配置层面已经完全消除了执行目录带来的路径影响。

配置修正后，所有路径解析逻辑都会固定以webpack配置文件所在的项目根目录为基准，不会再出现路径重复拼接、找不到模块的问题。之前报错中出现的C:\absolutepath\MyApp\MyApp\src这类错误路径，本质就是相对路径解析基准漂移导致的，全部替换为基于__dirname的绝对路径后这类问题会彻底消失。

内容的提问来源于stack exchange，提问作者tomma-d