webpack-cli加载webpack.config.ts报错：未知文件扩展名.ts

错误信息 #

[webpack-cli] Failed to load 'webpack.config.ts' config
[webpack-cli] TypeError: Unknown file extension ".ts" for webpack.config.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

问题原因 #

项目package.json中设置了"type": "module"，启用了ES模块模式。此时Node.js默认将.js文件当作ES模块处理，但webpack-cli无法直接解析.ts格式的配置文件，需要借助ts-node的ES模块加载器完成解析。

解决方案 #

方案1：修改npm脚本指定加载器 #

更新package.json的scripts字段，明确让webpack使用ts-node/esm加载器解析.ts配置文件：

"scripts": {
  "dev": "webpack serve --config webpack.config.ts --loader ts-node/esm",
  "build": "webpack --config webpack.config.ts --loader ts-node/esm"
}

此配置会让webpack-cli通过ts-node的ES模块加载器处理webpack.config.ts，解决扩展名识别错误。

方案2：优化tsconfig.json模块解析策略 #

将tsconfig.json中的moduleResolution改为node16或nodenext，适配ES模块模式：

"compilerOptions": {
  // ...其他配置
  "moduleResolution": "node16"
}

该设置让TypeScript严格遵循Node.js的ES模块解析规则，与项目"type": "module"配置保持一致，减少解析冲突。

方案3：预编译webpack配置文件（备选） #

如果上述方案无效，可先编译webpack.config.ts为.js文件再使用：

1. 在tsconfig.json的include中添加配置文件：

   "include": ["**/*.ts", "**/*.tsx", "webpack.config.ts"]
   

2. 添加编译脚本到package.json：

   "scripts": {
     "build:config": "tsc webpack.config.ts --outDir ./",
     "dev": "npm run build:config && webpack serve --config webpack.config.js",
     "build": "npm run build:config && webpack --config webpack.config.js"
   }
   

运行时会先编译配置文件，再执行webpack命令。

验证 #

修改完成后执行npm run dev，若配置文件正常加载，报错将消失，项目可正常启动。

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