CODEWITHSUNDEEP
webpackwebpack-4
jakub.g
jakub.g

Reputation: 41398

How to print effective webpack build config to the console?

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?

Upvotes: 21

Views: 13321

Answers (3)

boatcoder
boatcoder

Reputation: 18107

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

There are installation and use instructions on the npm page.

Upvotes: 6

Ali Ghali
Ali Ghali

Reputation: 81

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

Upvotes: 7

jakub.g
jakub.g

Reputation: 41398

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

Upvotes: 21

Related Questions