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

Question

我正在使用webpack-dev-server -d --inline來提供通過webpack生成的dist / app.js文件。 我已激活源映射，它正在我的dist /文件夾中生成app.js.map文件，以及文件末尾的//# sourceMappingURL=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'
  }
};