35

I'm trying to utilize the bypassOnDebug option in image-loader, which means I need to put webpack in "debug mode" (according to the image-loader docs).

Is it automatically in debug mode when using the dev server, or do I need to specify that in the webpack config?

If I need to specify it could you please provide a code sample?

1 Answer 1

54

Webpack 2 & 3

The debug property on the top-level configuration is not only deprecated, but invalid.

Instead, you have to configure it on a per-loader level, as described by this incredibly friendly error message that displays when you run with the now-invalid debug top-level property set:

The 'debug' property was removed in webpack 2.

Loaders should be updated to allow passing this option 
via loader options in module.rules.

Until loaders are updated one can use the LoaderOptionsPlugin 
to switch loaders into debug mode:

plugins: [
  new webpack.LoaderOptionsPlugin({
    debug: true
  })
]

The docs also have similar information.


Note

I found that updating all my loaders to latest and then trying them one by one to see if they accept a debug option was a bit heavyweight, considering that I only wanted to set them either all true or all false depending on the config.

If this is your situation, I can confirm that using webpack.LoaderOptionsPlugin is the simplest way. It just works, for all loaders old and new.

Sign up to request clarification or add additional context in comments.

1 Comment

Are you sure this works in webpack 3? I have tried your solution and I can get no debug output for my webpack build apart from the list of files at the end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.