javascript - webpack 使用什么方法在开发工具中显示 'webpack://' 文件夹中的源?

标签 javascript webpack build source-maps

如果我在开发模式下使用 webpack,当我打开 chrome 开发工具时,在“源代码”选项卡中,我可以看到一个包含我所有源代码的“webpack://”文件夹。

enter image description here

我想知道如何用我自己的代码(没有 webpack)做类似的事情。

假设我想编写自己的构建系统。这个构建系统获取一些源代码然后转译它。如何在特殊文件夹(例如“mysource://”)中显示原始源代码(包括 js、html 和 css 文件)?

最佳答案

您在 DevTool 窗口中看到的源代码被称为“源映射”,在 webpack 中它们是由 SourceMapDevToolPlugin 生成的(在大多数情况下)默认情况下处于“开发”模式时。

Here是另一篇关于如何生成源映射的文章。

关于javascript - webpack 使用什么方法在开发工具中显示 'webpack://' 文件夹中的源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55311219/

相关文章:

java - 如何避免gradle中的字母数字执行顺序

javascript - 无法弄清楚为什么 jsLint 在正则表达式中抛出未转义的 '['

javascript - 数据排序应该在客户端还是在服务器端完成?

javascript - Ramda R.pickBy R.identity 包括零 0

javascript - rails/网络包 : Can't access a JS library

node.js - Angular 10 run ng serve get webpack,内存错误

css - Webpack - 文件加载器 - 父目录 + 不同的服务路径

java - 使用 jetty 构建 docker 镜像 - 我应该什么时候构建?

javascript - 如何检查数据时间是否有时区偏移?

build - 发布时如何针对特定的 .NET Core 运行时?