How to print effective webpack build config to the console?

The easiest way is to use the webpack-config-dump-plugin

There are installation and use instructions on the npm page.

This works for me with webpack 4.x:

let config = {
  // ...
  plugins: [
    // ...
    { // anonymous plugin
      apply(compiler) {
        compiler.hooks.beforeRun.tapAsync('MyCustomBeforeRunPlugin', function(compiler, callback) {
          // debugger
          console.dir(compiler.options)
          callback()
        })
      },
    }
  ]
}

When you uncomment the debugger statement and run the build with --inspect-brk flag (node --inspect-brk run-webpack.js), you can also see it in Chrome devtools on chrome://inspect/ page (useful to inspect the functions and object instances that are not serializable to the console).

what worked for me well also is, I created all the configs I want before the export statement and then exported a function which can console and return the configs

module.exports = () => {
  // I have two configs to export and wanted to see the rules
  // you may not see the nested objects then you have to console log them
  // directly

  console.log(config[0].module.rules);
  console.log(config[1].module.rules);
  return config;
};