配置Webpack允许浏览器调试

130

我是webpack的新手，我正在转换现有的Web应用程序以使用它。

我正在使用webpack捆绑并缩小我的JS，这在部署时很棒，但是这使得在开发过程中进行调试非常困难。

通常，我使用chrome的内置调试器来调试JS问题。（或Firefox上的Firebug）。但是，对于webpack，所有内容都填充在一个文件中，使用该机制进行调试变得非常困难。

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

我已经看过是否有一些脚本加载器配置或其他设置，但是它看起来并不明显。

我还没有时间将所有内容转换为模块和使用需求。因此，我只需使用require（“ script！./ file.js”）模式进行加载。

javascript webpack

— 吉姆
source

3

您最终找到了解决该问题的方法吗？我也更喜欢使用JS控制台查看可用的变量。我的主要问题是webpack将所有这些变量隐藏在模块内，因此它们变得不可访问

— user1496984 2015年

2

从来没有真正找到解决方案，因此很遗憾，我们使用了webpack。

— 吉姆

您现在使用什么？在撰写本文时，webpack似乎仍然是我可以找到的最受欢迎的构建工具。

— 理查德

100

您可以使用源映射来保留源代码与捆绑/缩小的源代码之间的映射。

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]

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：//方案下有捆绑文件，在特殊的webpack：//方案。

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

— 眼猫
source

2

bundle.map指向js文件，但是如果实际的js文件也有一个地图可以说tsx或ts怎么办？

— 安德烈·科瓦西克

4

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

devtool: 'inline-source-map'

— 法汉
source

3

正如已经指出的那样，源映射非常有用。
但是有时选择要使用的源地图可能会很麻烦。

对Webpack源地图问题之一的此评论可能有助于根据需求选择要使用的源地图。

— Abhinav Singi
source

1

看一看在这里

它的美化器可减少javascript的使用。在底部，它具有浏览器的各种插件和扩展的列表，请检出它们。

您可能对FireFox Deminifier感兴趣，当从服务器中检索JavaScript时，它应该对JavaScript进行缩小和样式设置。

在此处输入图片说明

— 香蕉
source

10

缩小功能与禁用缩小功能不同，因为注释仍然被剥夺，行号不再匹配，变量名也不相同。话虽这么说，总比没有好。

— 2015年

1

Chrome的调试器中还有一个format选项。它没有普通源文件提供的所有信息，但是这是一个很好的开始，您还可以设置断点。您单击的按钮在第一个屏幕截图的左下方，看起来像{}。

格式化之前：

格式化后。

— 欢乐1234
source