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.