Webpack构建报Cannot resolve module模块无法解析错误咨询

数据老陈

2026-8-29

问题根因

Webpack 默认解析非相对路径导入时，只会优先从node_modules目录查找匹配模块，不会主动将路径开头的src识别为项目本地源码目录。你使用的src/features/...格式的导入属于项目根目录下的绝对路径别名写法，没有提前在Webpack中做对应映射配置的话，就会批量触发Module not found报错，和路径本身是否真实存在没有关系。

修复方案

你可以任选以下一种方案配置，配置完成后必须重启Webpack构建进程（配置改动不会触发热更新），再执行构建命令即可消除全部同类报错：

方案1：配置路径别名（最常用，路径匹配优先级最高）
在webpack.dev.js中添加resolve.alias配置，将src映射到项目本地的src源码目录：

const path = require('path');

module.exports = {
  // 保留原有其他配置项不要改动
  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src/'),
    },
    // 原有extensions等配置保留，示例：
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
  }
}

方案2：添加模块搜索目录
在webpack.dev.js中修改resolve.modules配置，告诉Webpack解析模块时把项目根目录加入搜索范围：

const path = require('path');

module.exports = {
  // 保留原有其他配置项不要改动
  resolve: {
    modules: [path.resolve(__dirname, './'), 'node_modules'],
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
  }
}

补充：如果你的项目使用TypeScript，需要同步在tsconfig.json中添加对应路径配置，避免TS类型校验报错：
```
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}
```