使用 Webpack 在 devtools 中调试

Question

使用 require.js，在 Chrome 的 DevTools 中调试模块非常容易，只需输入：

require('my-module').callThisFunction()

使用 Webpack 这不再是可能的，因为它通过 CLI 编译模块并且不导出 require。

window.webpackJsonp 是全局公开的，所以我想我可以找到模块 ID 并像这样调用它：webpackJsonp([1],[])，但不幸的是这个 returns undefined。

是否有任何解决方法仍然能够像 require.js 一样进行调试？

Answer 1

您可以使用 expose-loader 获得非常接近的结果。 IE。对于 React，您可以在加载程序配置中使用 { test: require.resolve("react"), loader: "expose?React" }。之后，您可以通过控制台访问 React。同样的想法也适用于其他图书馆。

Answer 2

将代码添加到包中的模块

require.ensure([], function() {
  window.require = function(smth) {
    return require('./' + smth);
  };
});

现在您可以从 chrome 控制台使用 'require'，例如 require('app').doSmth()

使用 Webpack 在 devtools 中调试

Debugging in devtools with Webpack

javascript

webpack