配置webpack以允许浏览器调试

7gyucuyw 于 2023-08-06 发布在 Webpack

关注(0)|答案(6)|浏览(140)

我是Webpack的新手，我正在转换现有的Web应用程序来使用它。
我正在使用webpack来捆绑和缩小我的JS，这在部署时非常好，但是这使得在开发过程中调试非常具有挑战性。
通常我使用chrome的内置调试器来调试JS问题。（或Firefox上的Firebug）。然而，使用webpack，所有内容都被塞进一个文件中，使用这种机制进行调试变得具有挑战性。
有没有一种方法可以快速打开和关闭bundeling？或者打开和关闭缩小功能？
我已经看过了，看看是否有一些脚本加载器配置或其他设置，但它并没有出现ovious。
我还没有时间把所有的东西都转换成像一个模块和使用要求一样。所以我简单地使用require（“script！./file.js”）模式。

webpack

来源：https://stackoverflow.com/questions/27626764/configure-webpack-to-allow-browser-debugging

6条答案

按热度按时间

pkwftd7m1#

您可以使用source maps来保留源代码和捆绑/缩小的源代码之间的Map。
Webpack提供了devtool选项来增强开发人员工具中的调试，只需为您创建捆绑文件的源Map。这个选项可以在命令行中使用，也可以在 * webpack.config.js * 配置文件中使用。
下面是一个使用命令行生成捆绑文件（* bundle.js *）沿着生成的源Map文件（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：// 方案下有源文件。
x1c 0d1x的数据
是的，您可以像拥有原始源代码一样开始调试！尝试在一行中放置断点并刷新页面。

的