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