如何获取Webpack详细编译错误？迁移Create-React-App后日志优化

将Create-React-App项目迁移至Webpack后，编译过程中出现错误，但现有错误日志信息不足以定位问题根源。请问是否有方法优化Webpack的编译日志输出？

当前启动命令：

webpack-dev-server --mode development --open --hot

当前编译日志：

<i> [webpack-dev-server] 项目运行地址：
<i> [webpack-dev-server] 本地回环地址：http://localhost:8080/
<i> [webpack-dev-server] 局域网（IPv4）地址：http://192.168.0.70:8080/
<i> [webpack-dev-server] 非Webpack生成的资源将从 'E:\WORKSPACE\testpoub\web_simulation\public' 目录提供
i ｢atl｣: 使用 typescript@4.8.4
i ｢atl｣: 使用 tsconfig.json 路径：E:/WORKSPACE/testpoub/web_simulation/tsconfig.json
× ｢atl｣: 子进程处理请求失败：Error: 调试失败。表达式不成立。
    at resolveNamesWithLocalCache (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:123200:26)
    at Object.resolveModuleNames (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:123244:20)
    at Object.resolveModuleNames (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:125393:134)
    at actualResolveModuleNamesWorker (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:118239:153)
    at resolveModuleNamesWorker (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:118542:26)
    at resolveModuleNamesReusingOldState (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:118640:24)
    at processImportedModules (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:120165:35)
    at findSourceFileWorker (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:119945:17)
    at findSourceFile (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:119791:26)
    at processImportedModules (E:\WORKSPACE\testpoub\web_simulation\node_modules\typescript\lib\typescript.js:120200:25)
× ｢atl｣: 子进程处理请求失败：TypeError: 无法读取未定义属性 'updateRootFileNames'
    at getProgram (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:152:10)
    at getEmitOutput (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:403:19)
    at emit (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:422:24)
    at processEmit (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:458:22)
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:610:6
    at Object.send (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:49:6)
    at Checker.req (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\checker.ts:100:15)
    at Checker.emitFile (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\checker.ts:105:15)
    at transform (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\index.ts:130:26)
    at transformationFunction (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\index.ts:72:40)
(node:345424) 未处理Promise拒绝警告：null
(使用 `node --trace-warnings ...` 查看警告来源)
(node:345424) 未处理Promise拒绝警告：未处理的Promise拒绝。该错误要么是在异步函数中抛出但未捕获，要么是Promise被拒绝但未用.catch()处理。若要让Node.js进程在出现未处理Promise拒绝时终止，可使用CLI参数 `--unhandled-rejections=strict`。(拒绝ID: 1)
(node:345424) [DEP0018] 废弃警告：未处理的Promise拒绝已被废弃。未来，未处理的Promise拒绝将导致Node.js进程以非零退出码终止。
<i> [webpack-dev-middleware] 等待打包完成：/
× ｢atl｣: 子进程处理请求失败：TypeError: 无法读取未定义属性 'getProgram'
    at getProgram (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:154:16)
    at processFiles (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:468:11)
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:616:6
    at Object.send (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\runtime.ts:49:6)
    at Checker.req (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\checker.ts:100:15)
    at Checker.getFiles (E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\checker\checker.ts:141:15)
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\awesome-typescript-loader\src\instance.ts:483:34
    at Hook.eval [as callAsync] (eval at create (E:\WORKSPACE\testpoub\web_simulation\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\WORKSPACE\testpoub\web_simulation\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\webpack\lib\Compiler.js:1192:33
资源 index_bundle.js 219 KiB [已输出] (名称: main) 1个关联资源
资源 index.html 1.61 KiB [已输出]
运行时模块 27.4 KiB 12个模块
按路径分类的模块 ./node_modules/ 160 KiB
  按路径分类的模块 ./node_modules/webpack-dev-server/client/ 55.8 KiB 12个模块
  按路径分类的模块 ./node_modules/webpack/hot/*.js 4.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.59 KiB [已构建] [代码生成完成]
    ./node_modules/webpack/hot/log.js 1.34 KiB [已构建] [代码生成完成]
    + 2个模块
  按路径分类的模块 ./node_modules/html-entities/lib/*.js 81.3 KiB
    ./node_modules/html-entities/lib/index.js 7.74 KiB [已构建] [代码生成完成]
    ./node_modules/html-entities/lib/named-references.js 72.7 KiB [已构建] [代码生成完成]
    + 2个模块
  ./node_modules/ansi-html-community/index.js 4.16 KiB [已构建] [代码生成完成]
  ./node_modules/events/events.js 14.5 KiB [已构建] [代码生成完成]
./src/index.tsx 39字节 [已构建] [代码生成完成] [1个错误]

ERROR in ./src/index.tsx
模块构建失败：Error: 最终加载器(./node_modules/awesome-typescript-loader/dist/entry.js)未返回Buffer或字符串
    at processResult (E:\WORKSPACE\testpoub\web_simulation\node_modules\webpack\lib\NormalModule.js:774:17)
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\webpack\lib\NormalModule.js:860:5
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\loader-runner\lib\LoaderRunner.js:407:3
    at iterateNormalLoaders (E:\WORKSPACE\testpoub\web_simulation\node_modules\loader-runner\lib\LoaderRunner.js:233:10)
    at iterateNormalLoaders (E:\WORKSPACE\testpoub\web_simulation\node_modules\loader-runner\lib\LoaderRunner.js:240:10)
    at E:\WORKSPACE\testpoub\web_simulation\node_modules\loader-runner\lib\LoaderRunner.js:255:3
    at context.callback (E:\WORKSPACE\testpoub\web_simulation\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

webpack 5.74.0 编译完成，出现1个错误，耗时9115毫秒

1. 调整Webpack日志级别 #

在启动命令中添加--stats参数，指定更详细的日志输出级别：

• --stats verbose：输出最详细的编译信息，包括模块构建细节、依赖关系等
• --stats detailed：比默认更详细，包含错误和警告的完整上下文
• --stats errors-only：只输出错误信息，适合快速定位问题

修改后的启动命令示例：

webpack-dev-server --mode development --open --hot --stats verbose

也可以在webpack.config.js中配置stats选项，实现持久化设置：

module.exports = {
  // ...其他配置
  stats: 'verbose' // 可选值: 'errors-only', 'minimal', 'normal', 'detailed', 'verbose'
};

2. 启用TypeScript详细诊断日志 #

从日志看，错误源于TypeScript模块解析和awesome-typescript-loader的运行异常，可在tsconfig.json中开启TypeScript的调试日志：

{
  "compilerOptions": {
    "diagnostics": true,
    "traceResolution": true
  }
}

• diagnostics：输出TypeScript编译的完整诊断信息
• traceResolution：跟踪模块解析的全过程，能帮你定位调试失败。表达式不成立这类底层解析错误的根源

3. 强化Promise错误追踪 #

日志中出现未处理的Promise拒绝警告，可修改启动命令，让Node.js输出更详细的错误追踪并在出现此类问题时直接终止进程：

node --unhandled-rejections=strict node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --open --hot --stats verbose

4. 替换兼容性不佳的加载器（额外建议） #

awesome-typescript-loader已长期未维护，与Webpack 5、TypeScript 4.8.x的兼容性存在明显问题。建议替换为官方维护的ts-loader：

• 安装依赖：

npm install ts-loader --save-dev

• 修改webpack.config.js中的loader配置：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

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