Debugging in devtools with Webpack

Question

With require.js it was very easy to debug a module in Chrome's DevTools, by simply entering:

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

With Webpack this is not possible anymore, because it compiles the modules via CLI and does not export require.

window.webpackJsonp is globally exposed, so I thought I could just find the module ID and call it like this: webpackJsonp([1],[]), but unfortunately this returns undefined.

Are there any workarounds to still be able to debug like require.js?

Answer 1

Add code to module in bundle

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

Now you can use 'require' from chrome console like require('app').doSmth()