Get log directly from Webpack

[yacinehmito]

Disclaimer

This pull request is not meant to be merged as-is.
The code is a bit ugly and needs reviewing.
It is however a working implementation.

The changes

Now, webpack-dashboard can get the logs directly from Webpack.
Instead of using 2 IPCs (standard output for logs, sockets for everything else) you can now use sockets only.

Usage

To use this, just omit the child command. Hence, the usage would be:

webpack-dashboard

or, for a specific port, say 3001

webpack-dasboard --port 3001

Motivation

I needed this for myself, and here's why.

Remote webpack process

I run webpack in a container. It is much easier for me to simply connect to the socket than it is to redirect the standard output properly. I first tried that but ended up with contrived commands (and loss of color output).

Multiple webpack entries/outputs

I have a single webpack process that produces two bundles ; one for my app's server, the other for my app's client. Using webpack-dashboard the current way, only data from the last working bundle is processed. A workaround is to specify a different port for each bundle and open webpack-dashboard in two terminals (each connected to a different socket). Problem is, because there is a single webpack process, you can only get the logs for one of those. And nothing guarantees that the logs will match the bundle you're connected to.

More flexible output

I don't have a use case for this but the issue #138 asks for custom log output.
With this change, it would be done like so:

webpack --watch > /dev/null &
webpack-dashboard -- <command>

where <command> is a command that outputs custom logs in standard output.

The code

I think this design is simpler and more elegant. However, the code is not that great.

In bin/webpack there is a bunch of ugly if statements. If you want to see the behavior I propose implemented, some guidance on how to fix this is very welcome.

In plugin/index.js, the plugin sends the log output trough the socket when the done event occurs. This is very simple but wasteful in the case when this it ends up being ignored. I don't think this is an issue but it's worth being mentioned.

[kenwheeler]

Whoah this is awesome. I'm gonna give this a spin locally later and see if I can get this merged/release

[yacinehmito]

Check out webpack-dashboard-isomorphic-example for a full-fledged example.

[yacinehmito]

Any new thoughts? 😄

[kenwheeler]

Checking today

[kenwheeler]

This works great

[yacinehmito]

I'm glad it does. Thanks for merging!

I may do a PR soon to update the documentation if you wish.