Webpack构建TypeScript项目遇Module not found错误求助

核心排查与修复步骤 #

1. 核对Webpack配置的entry字段 #

错误提示找不到./src，大概率是入口路径配置问题：

• 若你直接将entry设为./src，Webpack会尝试读取src目录下的默认入口文件（如index.js/index.ts），如果该文件不存在就会报错。
• 正确做法是指定具体入口文件，示例：

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  // 其他配置
};

2. 确认src目录及入口文件存在 #

检查项目根目录下是否存在src文件夹，且内部有你在entry中指定的文件（如index.ts）。注意路径拼写是否正确（比如不要写成Src或source）。

3. 配置resolve.extensions解析TypeScript文件 #

Webpack默认不会自动识别.ts后缀，需在配置中添加：

// webpack.config.js
module.exports = {
  // 其他配置
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

这样Webpack查找入口时会自动匹配.ts后缀的文件。

4. 确保构建命令的工作目录正确 #

如果在子目录下执行webpack命令，Webpack会以当前子目录为根目录查找./src，导致路径错误。解决方式：

• 回到项目根目录执行构建命令；
• 或者用path.resolve定义绝对路径，示例：

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.ts'),
  // 其他配置
};

额外检查点 #

• 确认Webpack有权限读取src目录下的文件（极少数权限问题会触发该错误）；
• 若使用webpack-dev-server，检查devServer配置是否修改了路径相关设置，导致入口路径被篡改。

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