Question

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

我正在使用webpack捆绑和缩小我的JS，这在部署时非常好，但这使得在开发过程中进行调试非常具有挑战性。

通常我使用chrome内置的调试器来调试JS问题。（或firefox上的Firebug）。然而，对于webpack，所有内容都填充在一个文件中，使用该机制进行调试变得很有挑战性。

有没有办法快速打开和关闭bundeling？或者打开和关闭缩小？

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

我还没有时间将所有内容转换为模块和使用要求。所以我只是使用require（＆＃34; script！。/ file.js＆＃34;）模式来加载。

Answer 1

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

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：// 方案下的源文件。

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

Answer 2

如前所述，源地图非常有用但有时选择使用哪个源地图可能会很痛苦。

其中一个Nina Scholz上的

This comment可能有助于根据要求选择要使用的源地图。

Answer 3

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

devtool: 'inline-source-map'

Answer 4

看看Here

它是一个美化你的javascript。在底部，它有一个浏览器的各种插件和扩展的列表，检查出来。

您可能对FireFox Deminifier感兴趣，它应该在从服务器检索到javascript时对其进行区分和设置。

enter image description here

Answer 5

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

格式化之前：

格式化后。

配置webpack以允许浏览器调试

5 个答案:

的index.html

entry.js

hello.js