配置webpack以允许浏览器调试

Question

配置webpack以允许浏览器调试

javascriptwebpack

152

我刚接触Webpack，正在将现有的Web应用程序迁移到Webpack上。

我使用Webpack捆绑和压缩JS，这在部署时非常好，但在开发过程中调试变得非常具有挑战性。

通常我使用Chrome内置的调试器来调试JS问题（或Firefox上的Firebug）。但是，使用Webpack后，所有内容都被塞到一个文件中，这使得使用该机制进行调试变得具有挑战性。

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

我已经尝试查找脚本加载器配置或其他设置，但这似乎不明显。

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

- Jim

3

你最终解决了这个问题吗？我也倾向于使用JS控制台查看可用变量。我的主要问题是，webpack将所有这些变量隐藏在模块内部，因此它们变得无法访问。 - user1496984

2

我们很遗憾地没有找到解决方案，因此放弃了使用webpack。 - Jim

你现在使用什么？在撰写本文时，Webpack 仍然似乎是我能找到的最受欢迎的构建工具。 - Richard

6个回答

7

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

代码如下：

devtool: 'inline-source-map'

- m-farhan

4

源文件映射（Source maps）非常有用，正如先前所指出的。

但是有时候选择使用哪个源文件映射可能会很麻烦。

这个评论在 Webpack 源文件映射问题中可能有助于根据需求选择要使用的源文件映射。

- Abhinav Singi

3

Chrome在调试器中也有一个格式化选项。虽然它没有正常源文件的所有信息，但这是一个很好的开始，而且您可以设置断点。您要单击的按钮位于第一张截图左下角，看起来像{}。

格式化之前：

格式化之后：

- Jolly1234

1

请看这里

这是一个美化JavaScript的工具。在底部，有各种浏览器插件和扩展的列表，请查看。

您可能会对FireFox Deminifier感兴趣，它可以在从服务器检索JavaScript时对其进行美化和样式化。

_{（来源：mozilla.net）}

- Banana

12

去除压缩并不等同于禁用压缩，因为注释仍然被删除，行号不再匹配，变量名称也不相同。话虽如此，这还是比没有好。 - Jim

1

当您的本地开发构建未更改时，可以使用源映射。但是，如果您想在生产环境中测试本地捆绑包的更改，则很难设置。

如果您没有使用组件或捆绑级别的代码拆分，那么您可以使用Chrome扩展程序（例如Requestly）来将生产版本与本地版本进行交换。以下是一个示例： maplocal feature

- Kaavian Sivam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dreyescat · Accepted Answer

你可以使用源映射来保留你的源代码和打包/压缩后的代码之间的映射关系。

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，但我认为其他浏览器也支持），则可以在选项卡Sources中看到捆绑文件位于file://方案下，源文件位于特殊的webpack://方案下。

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