webpack.config.ts无法使用ts-loader构建React TypeScript项目求助

核心原因分析 #

1. 第一个错误（找不到ts-node/register）：webpack-cli本身无法直接解析TypeScript格式的配置文件，需要ts-node将.ts配置转译为Node.js可执行的JavaScript。
2. 第二个错误（value.replace is not a function）：大概率是tsconfig.json的模块配置不兼容Node.js环境，比如设置了"module": "ESNext"或"ESModule"，导致ts-node转译后的配置文件以ES模块导出，而webpack-cli期望的是CommonJS模块格式，进而引发解析错误。

最少依赖的解决方案 #

不需要替换ts-loader，也不用放弃TypeScript配置文件，按以下步骤修复：

1. 补充必要依赖 #

安装ts-node和webpack相关类型定义（类型定义可选，但能提升TS编写配置的体验）：

npm install -D ts-node @types/webpack @types/webpack-dev-server

注意：如果使用webpack-cli 4.x版本，建议安装ts-node 10.x系列，避免高版本ts-node与webpack-cli的兼容性问题

2. 修正tsconfig.json配置 #

确保你的tsconfig.json满足Node.js环境的模块要求：

{
  "compilerOptions": {
    "module": "CommonJS", // 必须设为CommonJS，匹配Node.js模块规范
    "target": "ES2015", // 选择Node.js兼容的ES版本
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["webpack.config.ts"] // 确保配置文件被TS编译处理
}

3. 重新执行构建命令 #

直接使用原命令即可：

webpack --mode=production --config ./webpack.config.ts

如果仍有问题，可尝试手动指定ts-node的register来启动webpack：

node -r ts-node/register node_modules/webpack/bin/webpack.js --mode=production --config ./webpack.config.ts

备选方案（无需ts-node） #

如果想彻底避免ts-node依赖，可以将webpack.config.ts单独编译为JavaScript：

1. 在tsconfig中添加"outDir": "./dist"（或其他目录）
2. 编译配置文件：tsc webpack.config.ts --outDir ./dist
3. 使用编译后的JS配置执行构建：webpack --mode=production --config ./dist/webpack.config.js
   缺点：每次修改配置文件都需要重新编译

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