configurationwebpack以允许浏览器debugging
我是新来的webpack，我正在转换现有的Web应用程序使用它。
我正在使用webpack捆绑和缩小我的JS，这是很好的部署，但是这使得它非常具有挑战性的发展debugging。
通常我使用chrome的内置debugging器来debuggingJS问题。 （或Firefox上的Firebug）。 然而，对于webpack，所有东西都塞进一个文件中，使用这种机制进行debugging变得非常困难。
有没有办法快速打开和closuresbundeling？ 或打开和closures缩小？
我看过，看是否有一些脚本加载器configuration或其他设置，但它不会出现。
我还没有时间把所有的东西都转换成一个模块，并且使用需求。 所以我简单地使用require（“script！./ file.js”）模式来加载。
您可以使用源映射来保留源代码与捆绑/缩小之间的映射。
Webpack提供了devtool选项来增强开发人员工具中的debuggingfunction，只需为您创build捆绑文件的源映射即可。 这个选项可以从命令行使用，或者在你的webpack.config.jsconfiguration文件中使用。
下面你可以find一个使用命令行生成捆绑文件（ 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] 的index.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();
hello.js
module.exports = function () { return 'Hello world!'; };
如果您在浏览器中打开了index.html （我使用了Chrome浏览器，但是我认为它在其他浏览器中也受支持），您将在标签中看到您拥有file：//scheme下的捆绑文件和源文件特殊的webpack：//scheme。
是的，你可以开始debugging，就像你有原始的源代码！ 尝试在一行中放置断点并刷新页面。
看看这里
它是一个美化JavaScript的JavaScript。 在底部，它有一个浏览器的各种插件和扩展名列表，检查出来。
您可能会对FireFox Deminifier感兴趣，它应该从服务器中检索到它的应用程序 ，以便对其进行清理和设置。
源图是非常有用的，正如已经指出的那样。
但有时select使用哪个源图可能是一个痛苦。
对Webpack源地图问题之一的此评论可能有助于根据需求select要使用的源地图。
