如何在Chrome Dev Tools和webpack中启用源代码映射？

Question

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

我认为问题可能是Chrome无法看到原始源文件(因为只有dist/文件夹由webpack-dev-server提供)，所以我尝试将服务文件映射到dev工具中的本地文件。

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

我们需要任何帮助。

- sanity

---

你能否直接通过浏览器打开地图文件？ - abhirathore2006

Answer 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'
  }
};

- dreyescat