Javascript 配置 webpack 以允许浏览器调试
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27626764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Configure webpack to allow browser debugging
提问by Jim
I am new to webpack and I am converting an existing web application to use it.
我是 webpack 的新手，我正在转换现有的 Web 应用程序以使用它。
I am using webpack to bundle and minify my JS which is great when deployed, however this makes it very challenging to debug while in developement.
我正在使用 webpack 来捆绑和缩小我的 JS，这在部署时很棒，但是这使得在开发过程中调试非常具有挑战性。
Typically I use chrome's built in debugger to debug JS issues. (Or Firebug on firefox). However with webpack everything is stuffed in one file and it becomes challenging to debug using that mechanism.
通常我使用 chrome 的内置调试器来调试 JS 问题。（或 Firefox 上的 Firebug）。然而，在 webpack 中，一切都被塞进了一个文件中，使用这种机制进行调试变得具有挑战性。
Is there a way to quickly turn on and off bundeling? or turn on and off minifying?
有没有办法快速打开和关闭捆绑？或打开和关闭缩小？
I have looked to see if there is some script loader configuration or other setting but it does not appear ovious.
我查看了是否有一些脚本加载程序配置或其他设置，但它看起来并不明显。
I have not yet had the time to convert everything to act like a module and use requires. So I simply use require("script!./file.js") pattern for my loading.
我还没有时间将所有东西都转换成一个模块并使用需要。所以我只是使用 require("script!./file.js") 模式来加载。
采纳答案by dreyescat
You can use source mapsto preserve the mapping between your source code and the bundled/minified one.
您可以使用源映射来保留源代码和捆绑/缩小的源代码之间的映射。
Webpack provides the devtooloption to enhance debugging in the developer tool just creating a source map of the bundled file for you. This option can be used from the command line or used in your webpack.config.jsconfiguration file.
Webpack 提供了devtool选项来增强开发人员工具中的调试，只需为您创建捆绑文件的源映射。这个选项可以从命令行使用，也可以在你的webpack.config.js配置文件中使用。
Below you can find a contrived example using the command line to generate the bundled file (bundle.js) along with the generated source map file (bundle.js.map).
您可以在下面找到一个使用命令行生成捆绑文件 ( 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
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
entry.js
入口.js
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
hello.js
你好.js
module.exports = function () {
return 'Hello world!';
};
If you open index.htmlin your browser (I use Chrome but I think it is also supported in other browsers), you will see in the tab Sourcesthat you have the bundled file under the file://scheme and the source files under the special webpack://scheme.
如果您在浏览器中打开index.html（我使用 Chrome，但我认为其他浏览器也支持它），您将在选项卡Sources 中看到您在file://方案下拥有捆绑文件和下的源文件特殊的webpack://方案。
And yes, you can start debugging as if you had the original source code! Try to put a breakpoint in one line and refresh the page.
是的，您可以像拥有原始源代码一样开始调试！尝试在一行中放置一个断点并刷新页面。
回答by m-farhan
I think its better to setup your project using production and development mode https://webpack.js.org/guides/production/Its also include how to map your code to debug
我认为最好使用生产和开发模式设置您的项目 https://webpack.js.org/guides/production/它还包括如何映射您的代码以进行调试
devtool: 'inline-source-map'
devtool: 'inline-source-map'
回答by Abhinav Singi
Source maps are very useful as already pointed out.
But sometimes selecting which source map to use could be a pain.
正如已经指出的那样，源映射非常有用。
但有时选择使用哪个源映射可能会很痛苦。
This commenton one of the Webpack source map issuemight be helpful for selecting which source map to use based on requirements.
对Webpack 源映射问题之一的评论可能有助于根据需求选择要使用的源映射。
回答by Banana
Have a look Here
看看这里
its a beautifier that deminifies javascript. at the bottom, it has a list of various plugins and extensions for browsers, check them out.
它是一种美化 javascript 的美化工具。在底部，它有一个针对浏览器的各种插件和扩展的列表，请查看它们。
you might be interested in FireFox Deminifier, its supposed to deminify and style your javascript when its retrieved from the server.
您可能对FireFox Deminifier感兴趣，它应该在从服务器检索时对您的 javascript 进行 deminify 和样式化。
回答by Jolly1234
Chrome also has a format option in the debugger. It doesn't have all the information a normal source file would but it's a great start, also you can set breakpoints. The button you click is on the bottom left of the first screen shot, looks like {}.
Chrome 在调试器中还有一个格式选项。它没有普通源文件的所有信息，但这是一个很好的开始，你也可以设置断点。您点击的按钮位于第一个屏幕截图的左下角，看起来像 {}。
Before formatting:
格式化前：
After formatting.
格式化后。
