Feature Request: Debug Support, print webpack config

[trcarden]

Hey Guys,

Can we please add a way to print/dump the entire webpack config easily.

The naive things don't work particularly well:

//environment.js
console.log(environment.toWebpackConfig()); // Doesn't serialize ConfigObjects or Reg ex (dumps an [Object] reference or worse a blank object {} respectively)
console.log(JSON.stringify(environment.toWebpackConfig())); // similar issues to #1
debugger; // Have to inject a `node inspect` somehow into the invocation of webpack

All I want is the ability to plainly see the state of the webpack config as its configured by webpacker without having to do something like this:

//environment.js
  environment.plugins.append('Print Webpack Config Plugin', {
    apply(compiler) {
      compiler.hooks.beforeRun.tapAsync('PrintCompilerOptionsBeforeRunHook', function (compiler, callback) {
        // console.log(util.inspect(compiler.options, {showHidden: false, depth: 4, colors: true}));
        console.log(util.inspect(compiler.options.module, {showHidden: false, depth: null, colors: true}));
        callback()
      })
    },
  });

My goal in all of this was trying to determine what the END state AFTER all config files had been processed what my module and rules were.

[jakeNiemiec]

This might be of interest: #1916

Have to inspect a node inspect somehow into the invocation of webpack

I eventually want to implement a feature like this. Try util.inspect:

// run with `node ./this_file.js`
// This file MUST be in the base directory (wherever package.json is)

const util = require('util')
const ConfigObject = require("./node_modules/@rails/webpacker/package/environments/production.js"); // or whatever
const output = new ConfigObject();

//console.log(util.inspect(output, false, null, true));
console.log(util.inspect(output.toWebpackConfig(), false, null, true));

This is almost too much for me, but I hope it helps to solve your problem.

You can also interactively debug node from chrome's dev tools.

[trcarden]

It does, as a matter-of-fact. My option above uses the same util.inspect line however as a rails/ruby guy there was a wasted 20 min looking up why regular expressions were not being serialized, then another effort to figure out the depth of the inspect, and then another one hooking into the webpacker hooks and then developing my own plugin to support the dumping AFTER ALL config files were processed regardless of if we were in dev/test/prod.

I really like the idea of moving away from a "magic" config and instead dumping a template generator file for a default config. #1916. I think the obvious tradeoff there is that you have to expose people to all the crap associated with webpack configs (however I think its going to happen anyway since thats the tool DHH decided to use for rails JS assets anyway). Seems odd to try and hide it when we need to dig into it anyway.

[jakeNiemiec]

Seems odd to try and hide it when we need to dig into it anyway.

This is exactly the sentiment that I have been expressing: #1938 (comment). I stopped using webpacker a long time ago but stick around to "hold the door open" for others. I hope to slowly resolve the pain points that both new & power users experience (and eventually move back to webpacker).

I think the obvious tradeoff there is that you have to expose people to all the crap associated with webpack configs

I would argue that webpack has better documentation and is better suited to handle this.

I really like the idea of moving away from a "magic" config and instead dumping a template generator file for a default config.

Ideally, you could pass a static config to webpackER, but WDS will give you problems since it is Rails that handles the proxy. Right now, it is just a matter of learning how users want & expect to use webpacker. Issues like this really help with that.

[jackocnr]

Taking #2161 (comment) a step further, to debug your own customised config:

debug_webpacker.js (in the root of your project)

const util = require('util');
const output = require("./config/webpack/development.js");
console.log(util.inspect(output, false, null, true));

And then run: node ./debug_webpacker.js

[rossta]

@jackocnr Yes, I do something similar except with console.dir, which I believe accomplishes the same thing:

console.dir(require('./config/webpack/development'), { depth: null })

[h0jeZvgoxFepBQ2C]

Yeah, please add an easier debugging option! 👍

Also setting webpack_compile_output doesnt show anythign for me when I run precompile in production output?

[guillaumebriday]

With Webpacker 6, it's easier to see the config. But this comment is the way to go for now.

Feel free to reopen if needed.