如何从React开发服务器获取完整的Webpack开发服务器输出信息

我完全懂你的困扰——默认情况下，create-react-app的开发服务器只输出最基础的编译成功提示，Webpack本身大量的运行细节都被隐藏起来了。下面有几种实用方法可以开启详细日志，按推荐程度排序：

方法1：使用环境变量（最简便，无需额外依赖） #

Webpack Dev Server（WDS）支持通过环境变量WEBPACK_DEV_SERVER_LOG_LEVEL控制日志的详细程度，你可以直接在启动命令前追加这个变量：

Mac/Linux终端： #

WEBPACK_DEV_SERVER_LOG_LEVEL=trace npm start

Windows命令提示符（CMD）： #

set WEBPACK_DEV_SERVER_LOG_LEVEL=trace&&npm start

Windows PowerShell： #

$env:WEBPACK_DEV_SERVER_LOG_LEVEL="trace"; npm start

如果不想每次启动都手动输入，可以把环境变量整合到package.json的脚本里。为了跨平台兼容，先安装cross-env（统一环境变量设置的工具）：

npm install --save-dev cross-env

接着修改package.json中的start脚本：

"scripts": {
  "start": "cross-env WEBPACK_DEV_SERVER_LOG_LEVEL=trace react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test"
}

之后直接运行npm start就能看到完整的WDS日志了。

日志级别可选值（从最详细到最简洁）：trace > log > info > warn > error > none，你可以根据需求调整。

方法2：用Craco覆盖开发服务器配置（灵活可控） #

如果需要更精细地调整WDS配置（比如区分客户端和服务器端日志），可以用craco（Create React App Configuration Override）工具，无需eject项目：

1. 安装Craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js文件，添加配置：

module.exports = {
  devServer: {
    // 控制浏览器端的日志输出
    client: {
      logging: 'trace',
    },
    // 控制服务器端的日志输出
    logging: 'trace',
  },
};

3. 修改package.json中的脚本，替换react-scripts为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

启动项目后，就能看到Webpack Dev Server的完整运行日志了。

不推荐：Eject项目（不可逆） #

虽然你可以通过npm run eject暴露create-react-app的所有配置文件，直接修改webpack.config.js中的WDS设置，但这个操作不可逆——之后你无法再接收create-react-app的官方更新和维护，除非有特殊需求，否则不建议这么做。

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