Webpack 4 Woes

02/04/20191 Min Read — In DevTools, JavaScript

I wanted to have a basic working webpack configuration so that I could try out different things without a framework. Doesn't sound so hard, does it?

Hours later, I came up with this Minimal Webpack Babel Setup.

Robin Wieruch's React + Webpack 4 + Babel 7 Setup Tutorial and Valentin Gagliardi's Webpack 4 Tutorial: from 0 Conf to Production Mode guided my boilerplate.

Both articles do a good job of explaining how this tool works, so I won't rehash their explanations.

My setup has a basic webpack and babel configuration with a development and a production script. It also hot-reloads HTML and CSS (this was missing from Robin's tutorial). Additionally, it uses clean-webpack-plugin to clear the production folder before generating new build files.

After I finished my boilerplate, I found another tutorial: A tale of Webpack 4 and how to finally configure it in the right way. Updated. - this might be useful, too.

Sometimes my coding journey takes detours. While I didn't plan on tackling build tools at this step, it still was useful to see how configuring webpack works. I can now use my minimal setup for creating framework-less frontend projects or as a stepping stone for playing around with Cycle.js.