How do I enable debug mode in Webpack?

Question

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?

Answer 1

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.