Pause server and wait for Webpack to compile

[drewhamlett]

This is an issue we've ran into with our own Webpack solution as well as something this plugin will face. When you save a asset and refresh the page you're not exactly sure if the asset has finished compiling. Most of the time the bundle compilation is super fast if extracting out vendor dependencies, but it can an issue. This is something the Webpack dev server kind of does for you but in this case we're not running through it. We've landed on just using the notification plugin to show OS notification when bundle has compiled successfully(or has failed). While this works it's not ideal. Another solution is Live Reload or Browser sync, but I've never been a huge fan of these outside of CSS reloading.

It would be nice to pause the server until asset has finished compiling completely. This is something the Django Webpack project does. https://github.com/owais/django-webpack-loader/blob/6c297a038a60f21356d4dc6bbfedd8ad49a34731/webpack_loader/loader.py

It could even be taken a step farther and show errors in the browser much like sprockets does. The stats.json holds most of this information.

Is this something anyone is interested in?

[dhh]

Drew, in my work so far, I just have the watcher running in a console by itself. It gives you great feedback on the compilation process. Particularly as it comes to errors in your code. So I haven't so far felt a need to add something bigger on top of that, but maybe that's just a function of not compiling a big enough project yet. But happy to see people explore options to make that better. Especially options for showing errors inline as well. Do dig in! You can open a PR if you come up with something.

…

On Sat, Dec 24, 2016 at 7:25 AM, Drew Hamlett ***@***.***> wrote: With our own Webpack solution and Rails, when you save a asset and refresh the page your not exactly sure if the asset had finished compiling. Most of the time the bundle compilation is super fast if extracting out vendor dependencies, but it's an issue sometimes. This is something the Webpack dev server kind of does for you but in this case we're not running through it. We've landed on just using the notification plugin to show OS notification when bundle has compiled successfully(or has failed). While this works it's not ideal. Another solution is Live Reload or Browser sync, but I've never been a huge fan of these outside of CSS reloading. It would be nice to pause the server until asset has finished compiling completely. This is something the Django Webpack project does. https://github.com/owais/django-webpack-loader/blob/ 6c297a038a60f21356d4dc6bbfedd8ad49a34731/webpack_loader/loader.py It could even be taken a step farther and show errors in the browser much like sprockets does. The stats.json holds most of this information. Is this something anyone is interested in? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#43>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAKtVNL6DX_2PX6OIhnFvk_jlWtLcqHks5rLTlagaJpZM4LVPw6> .

[cgarvis]

I have a project were the webpack build takes 27396ms on my computer. It would be nice to have rails pause and wait for it.

[dhh]

We now have a PR that's nearing completion to use the webpack-dev-server. I think that's the way to go for this.

[sspread]

+1 this is what's missing from my workflow. I don't want to watch the watcher feedback or guess when webpack is done compiling and ready for me to manually reload the browser. webpack-dev-server allows for auto browser reload, but I do not want this behavior as I often go between text editor and web dev tools quickly and auto browser reload is too jarring. And finally, a compile on every request (not using watcher or webpack-dev-server) takes too long.

Ideally webpack-dev-server watches for changes and compiles as it currently does, without auto browser reload. A request to the server is then blocked while it waits for an in-process webpack compilation to complete. AFAIK there isn't any way to accomplish this through configuration, is there? If not, a polling approach like in the Django Webpack project mentioned above could work (https://github.com/ezhome/django-webpack-loader/blob/6c297a038a60f21356d4dc6bbfedd8ad49a34731/webpack_loader/loader.py#L66-L70)

[gauravtiwari]

@sspread You mean, you want to use watcher the same way as dev server i.e. if using watcher it should auto reload like dev server does?

There are two solutions:

1. You can turn off auto reload for dev server (as needed) then manually reload but I guess the behaviour will be more or less same as watcher.
2. Use hot reload API to don't reload at all but hot update the UI

[sspread]

@gauravtiwari I do not want auto reload of browser. I want full control (manual reload browser). However, I also want to utilize the speed of watcher and dev-server because it only recompiles what it needs after a change in css/js. The problem is, if I disable auto-reload and manually reload the browser while webpack is still compiling, I will get the stale assets. My ideal behavior in this case is for the request to hang until the compile is complete.

In effect, I want the same old behavior as sprockets, but browser reloads will be faster because of efficient 'piecewise' recompiling by webpack.

note - hot reload api may be a step in the right direction but now its too much work to port my legacy code to make that work, especially with css.