Typescript + Webpack 项目中缺少源映射

Posted 2023-03-13

【中文标题】Typescript + Webpack 项目中缺少源映射

【英文标题】：Missing sourcemaps in Typescript + Webpack project

【发布时间】：2016-06-29 00:56:41

【问题描述】：

我创建了一个 Github 存储库，其中包含与此问题相关的所有 source code。运行npm install 后，我可以在浏览器中加载build/index.html。但是，当我在 Chrome 中查看源选项卡时，我看不到与 .tsx 文件关联的源映射。

这是我看到的截图：

我在 tsconfig.json 中添加了 sourceMap: true，在 webpack.config.json 中添加了 debug: true 和 devtool: "source-map"。对我在这里缺少什么有什么想法吗？

编辑：

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

【问题讨论】：

我在这里没有看到问题，我克隆了你的 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 似乎正在工作 - 也许您的问题是在输入网址之前首先打开开发工具（或在打开后按F5开发工具） - 但你的配置似乎工作。 - 运行 Node v4.2.6（我认为 Webpack 需要>=4.x.x）

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

不，源映射将使用 webpack 和 webpack-dev-server 生成 - 因为它基本上是相同的，添加了 dev-server 自动提供的东西webpack 已打包。 - 所以你可以使用npm run build 或npm run dev 两者都会生成一个源映射。

@olsn 不幸的是，当我使用webpack 而不是webpack-dev-server 时，情况并非如此 :(

你使用了'npm run build'？确保没有安装全局版本的 webpack。日志中是否有任何错误或警告？在我上次发表评论之前，我再次对其进行了测试，并且它有效。什么系统？什么节点版本？你在哪里找地图？ （它生成到“build/bundle.js.map”中，您可能需要先清除构建文件夹。

【参考方案1】：

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

【讨论】：

出于好奇，你在运行 webpack 或 webpack-dev-server 后能看到 sourcemap 吗？

是的，源地图在 chrome dev 中可用。控制台:)

【参考方案2】：

您的tsconfig.json 可能会很好。

在您的webpack.config.js 中尝试devtool: "inline-source-map" 或删除debug 和devtool 两个选项完成。 就我而言，我不需要它们。

【讨论】：

嗯，我尝试了你的两个建议，但都没有为我解决：(