Webpack加载TypeScript配置文件时出现未知文件扩展名错误

问题场景 #

• TypeScript项目使用Webpack编译，package.json中配置了"type": "module"
• 执行webpack -c ./webpack.config.ts时，触发ERR_UNKNOWN_FILE_EXTENSION错误，无法识别.ts扩展名
• 尝试用node --loader ts-node/esm node_modules/.bin/webpack -c ./webpack.config.ts运行，出现Shell脚本语法错误

解决方案 #

方案1：直接使用Webpack CLI的加载器参数（推荐） #

Webpack CLI支持直接指定加载器处理配置文件，无需额外复杂命令，执行：

webpack --loader ts-node/esm -c ./webpack.config.ts

该命令会让webpack-cli通过ts-node/esm加载器解析TypeScript配置文件，完美适配ESM环境。

方案2：为Webpack配置单独创建TS编译配置 #

1. 在项目根目录新建tsconfig.webpack.json，专门用于Webpack配置的编译：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "CommonJS",
    "moduleResolution": "Node",
    "noEmit": false,
    "outDir": "./.webpack-temp"
  },
  "include": ["./webpack.config.ts"]
}

2. 在package.json的scripts中添加构建命令：

{
  "scripts": {
    "build": "ts-node --project tsconfig.webpack.json node_modules/webpack-cli/bin/cli.js -c ./webpack.config.ts"
  }
}

3. 运行npm run build即可完成构建。此方案通过单独的TS配置将Webpack编译为CommonJS格式，规避ESM加载器的冲突问题。

方案3：将Webpack配置转为ESM格式的JavaScript文件 #

如果不想处理TS配置的加载问题，可直接将webpack.config.ts改为webpack.config.js，用ESM语法编写：

import path from 'path';
import webpack from 'webpack';
// 其他依赖导入

export default {
  // Webpack配置内容
};

修改后直接执行webpack -c ./webpack.config.js即可正常运行。

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