TypeScript + Webpack 项目中缺少源映射文件

Question

我创建了一个 Github 存储库，其中包含与此问题相关的源代码。在运行npm install后，我可以在浏览器中加载build/index.html。然而，在Chrome的“资源”选项卡中查看时，我没有看到与 .tsx 文件相关联的源映射。

以下是我所看到的屏幕截图： 我在我的tsconfig.json文件中添加了sourceMap:true以及在webpack.config.json文件中添加了debug:true和devtool:"source-map"。您认为我错过了什么吗？

编辑：

这可能是一个愚蠢的问题，但是您必须使用webpack-dev-server才能查看sourcemaps吗？

- wmock

---

我这里没有问题，我克隆了你的repo: npm install && typings install && npm run dev -> 打开chrome -> F12 -> 导航到localhost:8080/webpack-dev-server (或 localhost:8080/build - 两者都可以)，我看到了来自ReactDOM.js:66和app.tsx:14的日志，因此sourceMaps似乎正在工作 - 也许你的问题是要先打开dev-tools再输入url（或在打开dev-tools后按F5）-但是你的配置似乎是有效的。- 运行Node v4.2.6（>=4.x.x是Webpack所需的） - olsn

@olsn 当我最初提出这个问题时，我想知道当我只使用webpack而不是webpack-dev-server时，是否可以看到源映射。看起来为了看到源映射，我需要使用webpack-dev-server，对吗？ - wmock

不，源码映射将使用webpack和webpack-dev-server生成 - 因为它基本上是相同的东西，只是dev-server自动提供webpack打包的内容。- 因此，您可以使用npm run build或npm run dev，两者都会生成源代码映射。 - olsn

很遗憾，当我使用webpack而不是webpack-dev-server时，情况并非如此 :( - wmock

你使用了 'npm run build' 吗？请确保没有全局安装 webpack。日志中有任何错误或警告吗？在我发表最后一条评论之前，我再次进行了测试，它可以正常工作。是什么系统？使用的是哪个 Node 版本？你在哪里查找地图？（它生成到 'build/bundle.js.map' 中，你可能需要先清除构建文件夹。） - olsn

Answer 1

你的tsconfig.json可能已经很好了。

在你的webpack.config.js中尝试使用devtool: "inline-source-map"或完全删除debug和devtool两个选项。 在我的情况下，我不需要它们。

- Matthias

---

嗯，我尝试了你提供的两个建议，但都没有解决我的问题 :( - wmock

Answer 2

我需要为源映射文件添加一个文件路径。请查看webpack.config.js的输出部分： https://github.com/nwinger/reactreduxtodo/blob/master/webpack.config.js

- Nicklas Pouey-Winger

---

你好，你能在运行webpack或webpack-dev-server后看到sourcemaps吗？ - wmock

是的，在 Chrome 开发者控制台中可以找到源代码映射 :) - Nicklas Pouey-Winger