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

How do I get source mapping to work with Chrome Dev Tools and webpack?

本文关键字：获取 映射 webpack 何使用 Chrome 开发工具      更新时间：2023-09-26

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

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

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

如果有任何帮助，我将不胜感激。

配置publicPath成功了。在您的情况下，您可以尝试指向捆绑输出的相同路径。

webpack.config.js

var path = require("path");
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'app.js'
  }
};
相关文章：