Javascript 如何使源代码映射与Chrome开发工具和webpack配合使用？

我正在使用

webpack dev server-d--inline

来提供通过webpack生成的dist/app.js文件。我已经激活了源代码映射，它正在我的dist/文件夹中生成一个app.js.map文件，以及文件末尾的

/#sourceMappingURL=app.js.map

，但Chrome devtools似乎没有使用源代码映射

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

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

我将非常感谢您的帮助。

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

webpack.config.js

---

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

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