9

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?

spacek33z
  • 2,203
  • 1
  • 25
  • 31
  • Possible duplicate of [How do I require() from the console using webpack?](http://stackoverflow.com/questions/29223071/how-do-i-require-from-the-console-using-webpack) – Venryx Mar 27 '17 at 20:31

2 Answers2

1

You can get something pretty close using expose-loader. Ie. for React you could have { test: require.resolve("react"), loader: "expose?React" } at your loader configuration. After that you can access React through console. The same idea applies for other libraries.

Juho Vepsäläinen
  • 26,573
  • 12
  • 79
  • 105
  • 2
    Yeah, but then I would need to do this for every module that I have (and it would create globals). This takes away the ease of testing that I had before with require.js. – spacek33z Jun 13 '15 at 14:56
  • 1
    That's definitely true! I've "solved" this problem by using hot loading. If I want to introspect something I just add a `console.log` somewhere. After that it triggers my build and updates the browser where I can see the answer I was after. Would that work for you? – Juho Vepsäläinen Jun 13 '15 at 16:34
  • Unfortunately no, because being able to freely test all modules in the console can really speed up debugging. Is there really no way to just do something like `getWebpackModule(moduleId)`? – spacek33z Jun 17 '15 at 08:34
  • As far as I understand, nope. Webpack just gives you a bundle. Fortunately Webpack's watcher works fast during development so that helps a bit. Btw, see http://blog.player.me/ditching-requirejs-webpack-reasons-lessons-learned/ . Some good info on moving from RequireJS to Webpack. – Juho Vepsäläinen Jun 17 '15 at 08:50
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()

Vitaly Volkov
  • 203
  • 2
  • 7