使用webpack构建React项目时如何获取可读错误信息以方便调试？

修复webpack mode参数不生效问题 #

webpack配置文件如果硬编码了mode字段，会覆盖命令行传入的--mode参数，按如下方式修改即可：

1. 调整webpack.config.js配置，优先读取环境变量判断运行模式：

// 配置顶部添加
const mode = process.env.NODE_ENV || 'production'

// 导出配置中替换硬编码的mode字段
module.exports = {
  mode: mode,
  // 其余原有配置保持不变
}

2. 调整npm脚本实现跨平台模式快速切换，推荐安装cross-env包避免不同系统环境变量语法差异：

"client": "cross-env NODE_ENV=production webpack -w --config ./gen/config/webpack.config.js",
"client-dev": "cross-env NODE_ENV=development webpack -w --config ./gen/config/webpack.config.js",

配置完成后，运行npm run client即为生产模式，运行npm run client-dev即为开发模式，无需手动改配置。

配置source map实现React报错源码定位 #

要在控制台直接查看React代码报错的具体行，需要在开发模式下开启对应精度的source map，在webpack配置中新增devtool字段即可：

module.exports = {
  mode: mode,
  // 开发模式开启低成本高可用的source map，生产模式可关闭减少打包体积
  devtool: mode === 'development' ? 'cheap-module-source-map' : false,
  // 其余原有配置保持不变
}

配置后开发环境下浏览器控制台报错会直接映射到本地React源码的对应行数，无需调试打包后的混淆代码。

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