idea courtesy of juan hart

If you’re running a Node backend there’s a very good chance you’ve used Webpack to bundle your modules (it is industry standard, after all), and if you’ve used Webpack in development but haven’t explored webpack-dev-server (WDS from here on out because I’m lazy) yet, then you’re in for a treat.

In short, WDS is Webpack’s dedicated development server, which comes prepackaged with a whole slew of options to make your development process so silky smooth. Options like hot module reloading, gzip compression and code splitting/lazy loading are an absolute breeze — all it takes is a few keystrokes under the options tags to get the ball rolling.

How the heck does webpack-dev-server work

Basically, our Node/Express/What-have-you server is where our application does the heavy lifting. This handles our database logic, business logic, and serves our minified, uglified bundle which lives on the hard disk. In contrast, WDS takes care of our frontend logic (JS, CSS, HTML). It’s kind of a “facade” and acts as a proxy for our Node server. WDS serves a bundle that lives in our machine’s RAM — as opposed to the hard disk — this is why even after we delete our bundle.js from the /dist folder (or wherever you decided to place your bundle), we are still able to serve up our site in development mode — because even though the bundle no longer lives in the /dist filepath, it persists in RAM.

Think of it like this; in a restaurant there might be a Head Chef and a Line Cook. Maybe the restaurant’s entire menu has been decided by the Head Chef; however, the Line Cook still knows how to prepare all the meals to a T. Even if the Head Chef took the day off, the Line Cook still knows how to prepare all the meals — but the recipe ideas originally came from the Head Chef, and they get credit for the creation.

That was a weird analogy, and I’m sorry

Are you confused, very confused or somewhat confused? Youtube search webpack-dev-server and set one up on your own, and hopefully this will all start to make a bit more sense. If you’re with me so far, let’s move on…

industry standard = bigger ecosystem, better support, better docs, less headaches (maybe)

Why Webpack is sick and I use it a lot

In my humble opinion, webpack makes module bundling super easy and very very customizable. Some of my favorite options:

HTMLwebpackPlugin: Use HTMLwebpackplugin to build an index.html file either by default using default properties, or based on a template.

Watch mode: Run Webpack in “watch” mode to continuously watch for updates and rebuild our bundle upon any changes

Common chunks plugin: Optimizes bundle sizes if we’re using any particular module in multiple bundles (in a multi-page app) by only rendering one instance of the common item in both bundles (by default it will render twice for each)

Hot module reloading: So, so, so helpful in development. You never have to reload your server to observe changes to the DOM; they populate automatically on save. Makes frontend development times waaaaay faster.

Code splitting: Allows you to use webpack to split your code into multiple bundles which can then be either loaded immediately or lazily when needed.

Webpack — properties you may have seen and should probably be aware of

publicPath: specifies the base path where dev-server would store the bundle in RAM, and serve it, and takes precedence over content-base.

contentBase: specifies the base folder from where dev-server would serve the application. This is only necessary if you want to serve static files.

compress: enable gzip compression for everything served

devServer.after: specifies the ability to run some functionality after all other middleware has run its course

devServer.before: specifies the ability to fun some functionality before all other middleware has run its course

devServer.lazy: specifies lazy mode. The bundle will only be compiled when it is requested.

This is really just the tip of the iceberg, people — if you want to know more and get into the really nitty gritty stuff, just go build something. And read the docs. And follow me on twitter. That’s all for today, cheers

-C