如何获取源映射以使用 Chrome 开发工具和 webpack？

Posted 2023-03-07

【中文标题】如何获取源映射以使用 Chrome 开发工具和 webpack？

【英文标题】：How do I get source mapping to work with Chrome Dev Tools and webpack?

【发布时间】：2016-02-08 17:20:34

【问题描述】：

我正在使用webpack-dev-server -d --inline 来提供通过 webpack 生成的 dist/app.js 文件。我已经激活了源映射，它正在我的 dist/ 文件夹中生成一个 app.js.map 文件，以及文件末尾的//# sourceMappingURL=app.js.map，但 Chrome devtools 似乎没有使用源映射。

我认为问题可能是 Chrome 看不到原始源文件（因为 webpack-dev-server 只提供 dist/ 文件夹），所以我尝试将提供的文件映射到本地开发工具中的文件。

不幸的是，我得到一个“工作区映射不匹配”，我不确定为什么文件会有所不同，我也不确定即使文件匹配，这也能解决源映射问题。

我将不胜感激。

【问题讨论】：

可以通过浏览器直接打开地图文件吗？

【参考方案1】：

配置publicPath 对我有用。在您的情况下，您可以尝试指向捆绑输出的相同路径。

webpack.config.js

var path = require("path");
module.exports = 
  entry: './main.js',
  output: 
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'app.js'
  
;