webpack - 如何在DevTools中查看webpack生成的文件

Question

有没有办法从 DevTools 面板检查 webpack 生成的文件？它们都是空的。

我说的是一个生产应用程序，我没有源代码， Assets 通过 CDN 托管。

我可以清楚地看到树，但看不到内容。不确定这是否可能？ (或者至少看到未缩小的版本)

Answer 1

Webpack devtool 选项 nosources-source-map 会列出所有文件但无法查看其内容。来自他们的 documentation :

nosources-source-map - A SourceMap is created without the sourcesContent in it. It can be used to map stack traces on the client without exposing all of the source code. You can deploy the Source Map file to the webserver.

It still exposes filenames and structure for decompiling, but it doesn't expose the original code.

因为源映射是在没有映射回原始源 Material 的情况下生成的，所以您将看不到原始源代码。

---

编辑 当我第一次阅读你的问题时，我跳过了你说这是在外部生产应用程序上的部分，并认为你正在寻找调试你自己的 webpack 配置在“源”面板中查看配置本身。这是我的原始答案，以防有人在谷歌上发现这个:

Sources 选项卡只会显示加载到浏览器中的文件；此外，看起来您的普通 Webpack 配置会 Hook 到文件系统中，如果您尝试将 webpack 导入其中以进行调试，则会导致您的应用无法正常运行:

也就是说，您可以在计算机上打开 Node 并从那里访问 webpack 配置: