从CRA迁移至Webpack+Babel后，错误栈文件名和行号异常问题

以下是几个关键配置调整，让错误栈展示效果和CRA保持一致：

1. 调整devtool配置 #

CRA开发环境默认使用eval-cheap-module-source-map，而非cheap-module-source-map。该选项在保证构建速度的同时，能更精准地映射原始文件的行号：

module.exports = {
  devtool: 'eval-cheap-module-source-map',
  // 其他配置...
};

2. 配置Babel生成正确的Source Map #

在你的Babel配置文件（babel.config.js或.babelrc）中，开启source map生成，确保Webpack能正确关联编译后的代码与原始文件：

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  sourceMaps: 'both', // 同时生成inline和external source map，适配Webpack的解析逻辑
};

3. 规范Source Map中的文件名格式 #

在Webpack配置的output字段中添加devtoolModuleFilenameTemplate，让错误栈显示的文件名和CRA一致（以项目根目录为基准的相对路径）：

module.exports = {
  output: {
    // 其他output配置...
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]?[loaders]',
  },
};

4. 确保开发环境的优化配置正确 #

• 确认Webpack的mode设置为development，避免生产环境的代码压缩、混淆干扰source map：

  module.exports = {
    mode: 'development',
    // 其他配置...
  };
  

• 开发环境不要使用mini-css-extract-plugin，改用style-loader，前者会破坏CSS相关的source map关联。
• 关闭开发环境下的代码压缩插件（如TerserPlugin），代码压缩会打乱原始行号和文件名对应关系。

5. 检查resolve配置 #

确保resolve.alias没有导致路径解析混乱，保持相对路径的一致性：

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 使用别名时确保路径指向正确
    },
    extensions: ['.js', '.jsx', '.json'],
  },
};

调整完以上配置后，重启Webpack开发服务器，模拟错误即可看到和CRA一致的清晰错误栈信息。

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