我是 webpack 的新手，我正在转换现有的 web 应用程序以使用它。
我正在使用 webpack 来捆绑和缩小我的 JS，这在部署时非常棒，但是这使得在开发时调试非常具有挑战性。
通常我使用 chrome 的内置调试器来调试 JS 问题。（或firefox上的Firebug）。然而，使用 webpack，所有内容都被塞进一个文件中，使用该机制进行调试变得具有挑战性。
有没有办法快速打开和关闭捆绑？或打开和关闭缩小？
我查看了是否有一些脚本加载器配置或其他设置，但它看起来并不奇怪。
我还没有时间把所有东西都转换成一个模块并使用需求。所以我只是使用 require("script!./file.js") 模式来加载。
您可以使用源映射来保留源代码与捆绑/缩小的代码之间的映射。
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>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
module.exports = function () {
return 'Hello world!';
};
如果您在浏览器中打开index.html （我使用 Chrome，但我认为其他浏览器也支持它），您将在选项卡Sources中看到您在file://方案下拥有捆绑文件，而在源文件下特殊的webpack://方案。
是的，您可以像拥有原始源代码一样开始调试！尝试在一行中放置一个断点并刷新页面。
我认为最好使用生产和开发模式设置您的项目 https://webpack.js.org/guides/production/ 它还包括如何将您的代码映射到调试
devtool: 'inline-source-map'
正如已经指出的，源映射非常有用。
但有时选择使用哪个源地图可能会很痛苦。
对其中一个Webpack 源映射问题的评论可能有助于根据需求选择要使用的源映射。
Chrome 在调试器中也有一个格式选项。它没有普通源文件的所有信息，但这是一个很好的开始，您也可以设置断点。您单击的按钮位于第一个屏幕截图的左下方，类似于 {}。
格式化前：
格式化后。
看看这里
它是一个美化 JavaScript 的美化工具。在底部，它有一个用于浏览器的各种插件和扩展的列表，请查看它们。
您可能对FireFox Deminifier感兴趣，它应该在从服务器检索时对您的 javascript 进行 deminify 和样式化。
（来源：Mozilla.net）
