Webpack + TypeScript 项目执行Webpack脚本时出现ERR_UNSUPPORTED_DIR_IMPORT错误求助

我在项目中调用webpack脚本时遇到了错误ERR_UNSUPPORTED_DIR_IMPORT，提前感谢各位的回复。
使用的版本：

• webpack: ^5.64.4
• typescript: ^4.9.5
• NodeJS: 23.7.0
  错误文本：

[webpack-cli] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Projects\project-templates\JavaScript\webpack\webpack-app\webpackConfig' is not supported resolving ES mod

嘿，我来帮你捋捋这个问题！你遇到的ERR_UNSUPPORTED_DIR_IMPORT错误，核心原因是Node.js的ES模块规范不支持直接导入目录——除非这个目录里有默认的入口文件（比如index.ts/index.js），或者在目录的package.json里配置了exports字段指定入口。结合你的技术栈，我整理了几个实用的解决思路：

• 补全导入路径的文件名：检查下你是不是在代码或Webpack配置里直接写了import './webpackConfig'这类目录导入？改成明确指定文件名的形式，比如import './webpackConfig/index.ts'（如果你的入口文件是index.ts的话），Node就能正确识别要加载的文件了。
• 检查项目的模块类型配置：打开项目根目录的package.json，看看有没有"type": "module"字段。如果有的话，整个项目会以ES模块模式运行，所有导入都得遵循ES模块规则；如果没有，要注意别在TS或Webpack配置里混用CommonJS和ES模块语法。另外，tsconfig.json里的module建议设为"ESNext"或"ES6"，moduleResolution设为"NodeNext"或"Node16"，这样能更好适配Node的模块解析规则。
• 规范Webpack配置文件的导入：如果你的Webpack配置是用TypeScript写的（比如webpack.config.ts），确保里面所有的导入路径都写全文件名，不要省略后缀或者直接导入目录。比如导入配置片段时，要写import { devConfig } from './webpackConfig/dev.ts'而不是./webpackConfig/dev。
• 确认Node版本的适配性：你用的Node 23.7.0对ES模块的支持已经很成熟，但目录导入的限制还是比较严格的，所以补全文件名通常是最直接有效的解决办法。

内容来源于stack exchange