使用TypeScript 5的bundler模块解析时Webpack加载配置失败

问题场景 #

当前使用typescript@5.0.2、webpack-cli@5.0.1、webpack@5.76.2，已在package.json中设置"type": "module"，tsconfig.json启用了TypeScript 5新增的"bundler"模块解析策略：

{
  "target": "ESNext",
  "module": "ESNext",
  "moduleResolution": "bundler"
}

执行构建命令webpack --config ./webpack/webpack.config.prod.ts时，出现以下错误：

[webpack-cli] Failed to load '/myProject/webpack/webpack.config.prod.ts' config
[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /myProject/webpack/webpack.config.prod.ts

解决方法 #

1. 安装必要依赖 #

Node.js的ESM模式默认不支持直接加载.ts文件，需要ts-node处理TypeScript配置文件的编译加载，执行以下命令安装依赖：

npm install --save-dev ts-node @types/node @types/webpack

2. 配置专属的TypeScript配置文件（可选但推荐） #

在webpack目录下创建tsconfig.webpack.json，避免和项目主tsconfig冲突：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true,
    "moduleDetection": "force",
    "resolveJsonModule": true
  },
  "include": ["./webpack.config.prod.ts"]
}

3. 修改构建命令 #

通过ts-node预编译配置文件后再运行webpack-cli，可直接执行：

npx ts-node --project ./webpack/tsconfig.webpack.json node_modules/webpack-cli/bin/cli.js --config ./webpack/webpack.config.prod.ts

也可以在package.json的scripts中添加快捷命令：

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

之后直接执行npm run build即可完成构建。

4. 替代方案：改用JavaScript配置文件 #

如果不想额外安装依赖，可将webpack.config.prod.ts改为webpack.config.prod.js，通过JSDoc实现类型提示：

/** @type {import('webpack').Configuration} */
export default {
  // 你的Webpack配置内容
}

原因说明 #

由于package.json设置了"type": "module"，Node.js会以ESM模式处理所有文件，但ESM本身不识别.ts扩展名，Webpack-cli也无法直接编译TypeScript配置文件，因此需要ts-node预先编译.ts配置文件，让Node.js能够正确加载解析。

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