程序员经验分享-hwhale

配置 webpack 以允许浏览器调试

2024-03-04

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

我正在使用 webpack 来捆绑和缩小我的 JS，这在部署时非常有用，但这使得在开发过程中调试非常困难。

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

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

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

我还没有时间将所有内容转换为模块和使用要求。所以我只是使用 require("script!./file.js") 模式进行加载。


您可以使用源地图 http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/保留源代码和捆绑/缩小的源代码之间的映射。

Webpack 提供了devtool http://webpack.github.io/docs/configuration.html#devtool选项来增强开发人员工具中的调试，只需为您创建捆绑文件的源映射。该选项可以从命令行使用，也可以在您的webpack.config.js配置文件。

您可以在下面找到一个使用命令行生成捆绑文件的人为示例（捆绑包.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]

索引.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!';
};

如果你打开索引.html在您的浏览器中（我使用 Chrome，但我认为其他浏览器也支持它），您将在选项卡中看到Sources您的捆绑文件位于file://方案和特殊下的源文件网页包:// scheme.

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

WEBPACK

配置 webpack 以允许浏览器调试 的相关文章