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?

score 20 · Accepted Answer · answered Oct 01 '18 at 16:15

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

score 7 · Answer 2 · answered Feb 08 '19 at 15:44

7

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

answered Feb 08 '19 at 15:44

Ali Ghali

81
1
2

This is the only solution that worked for me, not sure why it was voted down. There is no magic the the webpack config that requires a tap into webpack to dump it. And with webpack 4, the code in the answer by @jakub.g just didn't work. – boatcoder Feb 24 '20 at 15:22
This works for me! This is a smart solution! Thanks a lot! – 尤川豪 Jul 13 '20 at 08:24

score 6 · Answer 3 · answered Feb 24 '20 at 22:53

6

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

There are installation and use instructions on the npm page.

answered Feb 24 '20 at 22:53

boatcoder

17,525
18
114
178

How to print effective webpack build config to the console?

3 Answers3