配置 webpack 以允许浏览器调试

我是新的网络包，我正在转换一个现有的网络应用程序来使用它。

我使用 webpack 来捆绑和缩小我的 JS，这在部署时非常棒，但是这使得在开发时调试变得非常具有挑战性。

通常我使用 chrome 内置的调试器来调试 JS 问题。(或者 Firefox 上的 Firebug)。然而，对于 webpack，所有内容都被塞入一个文件中，使用这种机制进行调试变得很有挑战性。

有没有一种方法可以快速打开和关闭捆绑? 或打开和关闭缩小？

我已经查看了是否有一些脚本加载程序配置或其他设置，但它并不显得明显。

我还没有时间把所有东西都转换成模块和使用需求。所以我简单地使用 request (“ script！./file.js”)模式。

78840 次浏览
小开

看看 给你

它是一个美化器，去除了 javascript。在底部，它有一个各种各样的浏览器插件和扩展的列表，检查他们。

你可能会对 火狐排除器感兴趣，当你从服务器上检索到它时，它应该会贬低你的 javascript 并且改变它的样式。

enter image description here
(资料来源: Mozilla.net)

小开
最佳答案

您可以使用 源图来保存源代码和绑定/缩小的源代码之间的映射。

Webpack 提供了 Devtool选项来增强开发人员工具中的调试，只需为您创建绑定文件的源映射即可。此选项可以从命令行使用，也可以在 Webpack.config.js配置文件中使用。

下面您可以找到一个使用命令行生成捆绑文件(Bundle.js)和生成的源映射文件(Bundle.js.map)的人为示例。

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
Asset     Size  Chunks             Chunk Names
bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
[0] ./entry.js 85 bytes {0} [built]
[1] ./hello.js 59 bytes {0} [built]

Html

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

Entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

你好 JS

module.exports = function () {
return 'Hello world!';
};

如果你在浏览器中打开 Html(我使用 Chrome 浏览器，但我认为其他浏览器也支持) ，你会在标签 消息来源中看到，你有 档案://方案下的捆绑文件和特殊 Webpack://方案下的源文件。

debug with source maps

是的，您可以像拥有原始源代码一样开始调试！尝试在一行中放置断点并刷新页面。

breakpoint with source maps

小开

如前所述，源地图非常有用。
但是有时候选择使用哪个源映射可能是一件痛苦的事情。

这个关于 Webpack 源地图问题的注释 可能有助于根据需求选择使用哪个源映射。

小开

我认为最好使用生产和开发模式来设置您的项目 Https://webpack.js.org/guides/production/ 它还包括如何将代码映射到调试

devtool: 'inline-source-map'

小开

Chrome 在调试器中还有一个格式选项。它没有普通源文件应该包含的所有信息，但是它是一个很好的开始，您还可以设置断点。您单击的按钮位于第一个屏幕快照的左下角，看起来像{}。

格式化前: enter image description here

格式化之后。

enter image description here


提交答案