How to print effective webpack build config to the console?

Question

I have a complex webpack config setup (merge of dynamic settings over multiple config files) and I would like to see what is the final config that webpack uses, i.e. the result of the merge of all of those and the default settings.

How can this be done?

Answer 1

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).

Answer 2

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;
};