如何配置 angular-cli 和 webpack 以创建用于调试的源映射答案

【问题标题】：How do i configure angular-cli & webpack to create source maps for debugging如何配置 angular-cli 和 webpack 以创建用于调试的源映射
【发布时间】：2018-04-18 08:14:30
【问题描述】：

这个本应该是微不足道的话题对我来说却是一团糟。我有一个 angular-cli 项目，并尝试配置 webpack 以创建源映射、d.ts 文件和 polyfill 文件。首先，尝试配置源映射。我做了 ngject 并拥有配置文件。我需要在配置文件中配置什么来创建源映射？

尝试在网上寻找答案...没有什么真正相关的。

【问题讨论】：

标签： javascript typescript webpack angular-cli source-maps

【解决方案1】：

如果我理解你的话，你需要做的就是将这一行添加到你的 webpack.config 中

devtool: 'source-map'

【讨论】：

当使用 ng 弹出 来控制 webpack 配置时，它使用 plugins 属性而不是 devtool 属性跨度>

【解决方案2】：

了解如何解决此问题。在 angular-cli 项目中，webpack 配置是隐藏的，直到 ng 弹出 命令吐出 webpack.config 文件。 webpack 配置文件不使用常规的 devTools 属性，而是使用 plugins 属性，它创建一个 SourceMapDevToolPlugin 实例，并传递 4 个参数 filename、moduleFilenameTemplate、fallbackModuleFilenameTemplate、sourceRoot，删除除 filename 之外的所有参数并将其值更改为 "[name].js.map" 解决了此问题，并且现在为每个捆绑文件创建一个 map.js 文件。

【讨论】：