shellscape/koa-webpack

Support server hot reloading using webpack-hot-server-middleware

pho3nixf1re opened this issue · 3 comments

  • Node Version: n/a
  • NPM Version: n/a
  • koa Version: n/a
  • koa-wepback Version: n/a

Expected Behavior

For the server to properly hot reload without having to restart.

Actual Behavior

Not possible to integrate webpack-hot-server-middleware

How can we reproduce the behavior?

By attempting to setup webpack-hot-server-middleware.

The primary problem is that this package expects a single compiler but to properly support SSR it needs to support a MultiCompiler instance which contains both server and client compilers. The MultiCompiler instance can be passed to the dev middleware but the hot middleware only needs to receive the client.

There are two solutions here:

  1. Allow setting which compiler 'name' to use for the hot client middleware. The advantage here is that it leaves the implementation of the server middleware to the user.
  2. Do the implementation of the hot server middleware within the package. The advantage to this is that it follows the apparent spirit of this package where it attempts to manage all the dependencies and middleware setup for the user.

I would be happy to open a PR for this but would like feedback from @shellscape on the preferred approach. For now I have rolled my own integration with Koa but keeping up with updates is a pain considering that it is all nearly duplicated with this package. My only change is to support the use of a MultiCompiler.

This is a more fleshed out version of issue #66 which attempts to make a feature request fit the project issue template.

Man, I'm very confused by this and the mentioned project. This module explicitly composes webpack-dev-middleware into a Koa-compatible pipeline, and initializes webpack-hot-client. What it's not meant to do is compose every possible sort of middleware for webpack to work with koa. In that sense it's focused and opinionated. It looks a lot like webpack-hot-server-middleware is incompatible with that due to a number of things it's doing on its own, coupled with an odd suggestion of using webpack-hot-middleware (which is a great project, but which concerns are handled by webpack-hot-client)

This module is really meant to be used with a bare koa setup, so I'm not quite sure it's the best fit for your project.

keeping up with updates is a pain

Not sure what kind of updates you're referencing there. Koa has been fairly api-stagnant for quite some time, and the maintainers prefer it that way. Webpack is... well let's just hope that they learned their lesson with the shit show that was the v4.0 release, and hopefully updates won't be quite so painful for people.

  1. Allow setting which compiler 'name' to use for the hot client middleware.

webpack-hot-client already supports and accounts for multicompilers. If there's a shortcoming in that lib, I'd suggest heading that way to open a modification request. This module tries to stay as pass-through as possible (meaning all options are merely passed through to the underlying dependencies) and I don't want it to get in the business of managing custom options.

  1. Do the implementation of the hot server middleware within the package. The advantage to this is that it follows the apparent spirit of this package where it attempts to manage all the dependencies and middleware setup for the user.

As I mentioned above, the intent of this module is to compose/setup two dependencies to enable easy HMR integration with koa: webpack-dev-middleware and webpack-hot-client (older versions used webpack-hot-middleware fwiw). There's really no spirit of the module in the way you suggest, noble as it may be. Unfortunately I don't have much interest in trying to add support for additional middleware in this module at this time.

Probably not the response you were looking for, but hopefully you have an idea of where to go from here.

So... looks like webpack-hot-client handles the server compiler just fine. Not sure if there will be any consequences to that but everything is working fine for me now. For some reason I couldn't use this package when I first implemented everything (over a year ago). I had to do some fiddling with everything but it's all working smooth now. Thanks for the extremely great response. As long as everything is working together nicely we should be good on this. It was my left over assumption that including the server compiler would cause problems when passed through webpack-hot-client. Glad it's not the case!

Glad you got it working.

You might also find it interesting that you don't really need need webpack-dev-middleware. It's bloaty and weird and does a bunch of stuff that most users probably don't need. It also does some trickery with watching files, which makes it nice for users, but which is already handled by webpack itself. It also keeps all of the build (bundle files) and HMR data in memory and that may cause issues with larger bundles. You could, in theory, skip this module and webpack-dev-middleware altogether, and just use webpack-hot-client (or webpack-hot-middleware for older browser support!). Hit me up on twitter and I can show you some stuff that isn't public just yet.