How to efficiently debug webpack applications?

Question

I am trying to adopt webpack dev server in my project. I know it\'s quite widely adopted, so it surprised me that debugging the application seems to be quite hard. Since webpack

Answer 1

I have found it useful to add an npm run watch task that kicks off webpack like so:

webpack -w --devtool eval

This results in source maps that at least have the correct module name. It is somewhat confusing though as the source mapped source is pre-some sort of processing (babel)? So you'll see in the source something like:

import react from 'react';

But the actual variable name will be munged to something like _react2 or similar. I'd love for the mapped source to be the processed version with the ugly variable names or for the scope to have the definitions as seen in the mapped source.

The actual line I have in my package.json for the above task is:

  "scripts": {
    // other lines edited out
    "watch": "node ./node_modules/webpack/bin/webpack.js -w --devtool eval"
  }