基于TypeScript的Webpack配置文件无法运行问题求助

核心冲突 #

你的问题根源在于项目全局的ES模块设置与Webpack CLI加载TS配置的默认逻辑不兼容：package.json中"type": "module"强制所有文件默认按ES模块解析，但Webpack CLI默认调用ts-node时未启用ES模块模式，导致配置文件的模块处理规则混乱，引发报错。

具体修复步骤 #

1. 调整ts-node配置，明确启用ES模块模式 #

在tsconfig.json的ts-node配置段中添加esm: true，确保ts-node按ES模块规则编译Webpack配置文件：

{
  "compilerOptions": {
    // 保留你的原有编译配置
  },
  "ts-node": {
    "esm": true,
    "module": "ESNext",
    "skipIgnore": true
  }
}

2. 修改npm脚本，让Webpack正确加载ES模块TS配置 #

Webpack CLI需要明确指定用ts-node的ES模块加载器处理配置文件，修改package.json的脚本：

{
  "scripts": {
    "dev": "node --loader ts-node/esm node_modules/webpack-cli/bin/cli.js --config webpack.dev.ts",
    "build": "node --loader ts-node/esm node_modules/webpack-cli/bin/cli.js --config webpack.prod.ts"
  }
}

如果你的ts-node版本较新，也可以用更简洁的写法：

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

3. 统一Webpack配置文件的导出规范 #

将原CommonJS风格的module.exports = {...}改为ES模块的export default {...}：

// webpack.dev.ts示例
import { merge } from 'webpack-merge';
import commonConfig from './webpack.common.ts';

export default merge(commonConfig, {
  mode: 'development',
  // 其他开发环境配置项
});

4. 确保依赖版本适配 #

安装/更新必要的依赖包，避免版本不兼容问题：

npm install -D ts-node typescript webpack webpack-cli webpack-merge @types/webpack @types/node

错误原因复盘 #

你之前仅在tsconfig中指定ts-node的module为CommonJS，但项目全局通过type:module强制使用ES模块，导致模块系统规则冲突。Webpack CLI调用ts-node时，默认遵循项目全局的ES模块设置，但你的ts-node配置又要求用CommonJS编译，两者矛盾引发报错。

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