Webpack Dev Server未正确映射错误源文件问题求助

• 优先调整开发模式下的devtool配置：
  生产环境常用的source-map生成独立映射文件，在开发模式下效率偏低且易出现映射失效问题。建议在webpack.dev.js中覆盖devtool为开发模式专属的高效映射选项：

  module.exports = merge(common, {
    mode: "development",
    devtool: "eval-cheap-module-source-map", // 替换为该值
    devServer: {
      static: "./dist",
      client: {
        overlay: true,
      },
    },
  });
  

  该选项通过eval包裹模块，同时保留原文件行信息，既能保证映射准确性，又能提升开发环境构建速度。

• 确认浏览器开发者工具设置：
  打开浏览器控制台设置（齿轮图标），确保启用JavaScript源映射选项已勾选——部分浏览器默认关闭该功能，会导致无法加载源映射文件。

• 验证Bundle文件的映射注释：
  启动devserver后，在浏览器中查看print.bundle.js源代码末尾，确认存在类似//# sourceMappingURL=print.bundle.js.map的注释。若缺失，说明Webpack未正确生成映射文件，可手动删除dist目录后重新启动服务。

• 优化DevServer的静态资源配置：
  开发模式下Webpack DevServer默认将文件存放在内存中，无需依赖dist目录物理文件。可尝试将devServer.static配置修改为static: './src'，或直接移除该配置（Webpack 5默认会处理入口相关静态资源加载）。

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