本质是sourcemap的sources字段路径与浏览器实际请求路径不匹配，需统一配置devtool、sourcemapfilename和devtoolmodulefilenametemplate，并确保webpack-dev-server静态资源映射或publicpath与sourcemapfilename一致。
Webpack 中 SourceMap 路径不正确，本质是 devtool 生成的 SourceMap 文件里记录的源文件路径（sources 字段）与浏览器实际请求时的路径不匹配，导致调试时找不到原始代码。关键在于控制两个地方：SourceMap 文件本身的输出位置（output.sourceMapFilename），以及 SourceMap 内部指向源码的路径（output.devtoolModuleFilenameTemplate 和 devtool 类型的选择）。
检查并统一 devtool 与 sourceMapFilename 的配合
不同 devtool 值对 SourceMap 的生成方式和路径行为影响很大：
-
source-map：生成独立 .map 文件，依赖output.sourceMapFilename控制其存放位置；此时必须确保该路径在浏览器中可被静态服务访问（比如放在public/或与打包 JS 同目录）。 -
inline-source-map或eval-source-map：SourceMap 内联在 JS 中，不涉及外部 .map 文件路径问题，但可能影响加载性能或部署安全性。 -
hidden-source-map：生成 .map 文件但不自动追加sourceMappingURL注释，适合生产环境手动上传到错误监控平台。
常见错误是用了 source-map 却没配 sourceMapFilename，导致 .map 文件默认输出到 dist/ 根目录，而 JS 文件在子目录（如 dist/js/app.js），这时浏览器解析 app.js 里的 sourceMappingURL 就会找错位置（例如尝试请求 /app.js.map 而不是 /js/app.js.map）。
用 output.devtoolModuleFilenameTemplate 精确控制源码路径显示
即使 .map 文件位置正确，浏览器开发者工具里仍可能显示类似 webpack:///./src/index.js 这样的路径，点不开——这是因为 SourceMap 的 sources 字段写的是模块标识符，而非真实 URL。你需要告诉 Webpack 如何把模块路径转成浏览器能访问的地址：
- 开发时推荐配置：
devtoolModuleFilenameTemplate: '[file]' // 直接用相对路径，如 src/index.js
配合服务器将src/目录映射为可访问资源（如 Webpack Dev Server 的static配置），或使用webpack://协议 +resolve.alias配合浏览器插件（如 React Developer Tools 自带支持）。 - 更通用且兼容性好的方式：
devtoolModuleFilenameTemplate: 'file:///[absoluteResourcePath]'
这样生成的路径形如file:///Users/name/project/src/index.js，需确保浏览器允许本地文件访问（Chrome 需启动时加--allow-file-access-from-files，仅限本地调试）。 - 部署到服务器时，若源码已上传至某个 CDN 或子路径（如
https://cdn.example.com/src/），可用：devtoolModuleFilenameTemplate: 'https://cdn.example.com/[path][name].[ext]'
验证并修复 webpack-dev-server 的资源映射
Webpack Dev Server 默认不会暴露 src/ 目录，所以即使 devtoolModuleFilenameTemplate 输出了 src/index.js，浏览器也 404。解决方法有两种：
- 启用
static配置，把源码目录作为静态资源提供：devServer: { static: { directory: path.resolve(__dirname, 'src') } } - 改用
webpack://协议，并安装支持该协议的浏览器扩展（如 Webpack Extensions），它能自动将webpack:///./src/index.js映射到本地项目文件。
同时确认 devServer.headers 没有误设 Access-Control-Allow-Origin 导致跨域拦截 SourceMap 请求。
生产环境注意 publicPath 与 sourceMappingURL 的一致性
当使用 output.publicPath（如 /assets/）时，Webpack 会在 JS 文件末尾注入：//# sourceMappingURL=main.js.map
这个路径是相对于 publicPath 解析的。如果 publicPath: '/assets/'，那浏览器实际请求的是 /assets/main.js.map —— 所以你要确保 output.sourceMapFilename 输出的 .map 文件真正在 dist/assets/ 下，而不是 dist/ 根目录。
- 正确示例：
output: { publicPath: '/assets/', sourceMapFilename: 'assets/[name].js.map' } - 错误示例：
output: { publicPath: '/assets/', sourceMapFilename: '[name].js.map' }
此时 .map 文件输出到dist/[name].js.map，但浏览器去/assets/[name].js.map请求，404。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
