如何获取源映射以使用Chrome Dev Tools和webpack？

Question

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

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

不幸的是,我得到了"工作区映射不匹配",我不确定为什么文件会有所不同,我也不确定即使文件匹配也会修复源映射问题.

我将不胜感激任何帮助.

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