How does webpack dev server fit in?

Question

I have my server, upon starting it, it bundles my latest client assets in a static directory using webpack. Then serves responses to the server. Some routes send back html, /static sends back images and stuff, pretty normal.

I'd like to add webpack dev server to my development setup but I'm not clear on how it fits into my flow. Basically what happens to my current server? What tasks do I give to the dev server? How does my app know to interact with the dev server?

Thanks for any help, just a big lost and unclear on the separation here.

Answer 1

The webpack dev server is a convenient way to use webpack in a development environment, since it will automatically rebuild the application bundle when the underlying files change, allowing a fast edit/reload cycle without the need to manually run webpack. It can also optionally do an automatic reload of the application when files change.

It is standalone server intended for development of client-side-only applications, which thus don't need any special behavior on the server. In other words, applications that could ultimately be deployed entirely on a static file service like Amazon S3 or Github Pages.

It sounds like you have a hybrid application that includes both client-side and server-side code in the same codebase. In that case, you may be able to combine your existing server with the functionality of the webpack dev server using the webpack dev middleware. This allows you to introduce webpack auto-build functionality into your own server, using standard routing mechanisms to route requests to either your own code or to the webpack code.

Note well that the webpack dev middleware is intended only for development use, so your application should be set up so that it only uses this middleware in dev environments, and once deployed instead uses something like serve-static to serve the static files that were presumably built by webpack during the application build process.