javascript - 如何获得源映射以与 Chrome 开发工具和 webpack 一起使用？

Question

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

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

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

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

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