Creating a Node Express-Webpack App with Dev and Prod Builds

Looking for a great (remote only) React Dev? Visit my profile on LinkedIn and say hi! 😃

This is a very long article. I’m sorry — it takes time to explain this stuff.

I REALLY struggled with building an error-free Webpack and Express application boilerplate.

Every time I would pass one hurdle, another error would get generated by the next thing in the heap that was breaking. Honestly, it was a very frustrating experience.

Considering the fact that Express and Webpack are amongst the most used technologies on the web, you’d think that there were a lot more blog posts out there about how to set them up together, but no, you’d be wrong.

There are a couple that look at one aspect or another of integration, but besides Alejandro Napoles’ (alejandronapoles.com) FANTASTIC series on the issue, there’s really not much else.

If you like this article or the projects (Expack and Rexpack), please show some love by hitting the Clap/Applause button, starring it on Github, or just tweeting me a quick thank you note at [@bengrunfeld](https://twitter.com/bengrunfeld). I’m not asking this because of some marketing effort — I couldn’t care less about that. The feedback means a lot to me personally, and every single star/clap makes me happy. Thank you!!

Link to code:

• Expack — https://github.com/bengrunfeld/expack (Express + Webpack).
• Rexpack — https://github.com/bengrunfeld/rexpack (React + Express + Webpack).

What We Want To Make

Firstly, we want to have both a development build of our code, as well as a production build, because we want to employ certain tools in one but not the other.

For our Development build, we want to transpile it from ES6+, lint it, run unit tests on it, run coverage reports for it, and to enable Hot Module Reloading (HMR) for an easier development experience. Re bundling, we do NOT want to minify it or uglify it, so that we can explore features and find bugs more easily. Similarly, we want the images to stay as their own files so that they are more easily identifiable — as opposed to being encoded in Base64 straight into our…