配置 webpack 以允许浏览器调试

javascript webpack

2022-08-30 03:04:32

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

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

通常，我使用chrome的内置调试器来调试JS问题。（或火狐上的火虫）。但是，使用webpack，所有内容都塞在一个文件中，并且使用该机制进行调试变得具有挑战性。

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

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

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

答案 1

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

Webpack 提供了 devtool 选项，用于在开发人员工具中增强调试，只需为您创建捆绑文件的源映射即可。此选项可以从命令行使用，也可以在 webpack.config.js 配置文件中使用。

您可以在下面找到一个使用命令行生成捆绑文件（捆绑包.js）以及生成的源映射文件（捆绑包.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]

索引.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

条目.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

你好.js

module.exports = function () {
  return 'Hello world!';
};

如果您在浏览器中打开索引.html（我使用Chrome，但我认为其他浏览器也支持它），您将在“源”选项卡中看到，您在 file:// 方案下有捆绑的文件，在特殊 webpack:// 方案下有源文件。

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

答案 2

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

devtool: 'inline-source-map'