Code comfort: Eleventy and webpack

Note, 2020-09-09: Although the site long since is no longer using the stack mentioned here, at least some parts of the repo remain online for viewing by the curious.

Following up on my recent post about how I got this site back to my favorite static site generator (SSG), Eleventy, and also provided some enhancements with the webpack bundler app . . .

As I mentioned, my process in making this happy transition was much easier than it might have been, thanks to the publicly available code from others who’d done it before me. Thus, I’m following their kind example by making this site’s GitHub repo public. What follows, then, is some explanation of which code does what.

A tale of three webpack config files

A lot of tutorials for using webpack will have you go through the motions of constructing a webpack.config.js file, only to come in when things get hot and heavy and say, “Au contraire, sucker! Actually, you need separate configuration files for development and production.”

Not gonna pull that one on ya.

You can do it with just a webpack.config.js file — one to rule them all, so to speak — but just about all the best-practices-kinda-stuff you’ll see says to set things up as follows, so that’s what I’m telling you, too:¹

• webpack.dev.js — Contains only config code for development. Or, to put it another way: the code in this file is not intended for when you actually build your site on, say, Netlify. See my site’s webpack.dev.js file here.

• webpack.prod.js — You guessed it: this is the first file’s bro, except that this one contains only config code for production. See my site’s webpack.prod.js file here.

• webpack.common.js — Contains everything you’ll need for either production or development. The other two files merge this content when they’re run, thus ensuring everything happens as it should. Having this separate file, rather than duplicating code between the other two files, is DRY-friendly (well, maybe) and thus keeps peace among all of Babbage’s descendants, genetic or otherwise. See my site’s webpack.common.js file here.

Configuring Eleventy itself

As for .eleventy.js, the main config file for Eleventy (thankfully, no separate .dev and .prod versions here), see my site’s .eleventy.js file here.

package.json

By now, the more observant among you, having seen certain items mentioned in these files, may be wondering what’s in the package.json file. Wonder no longer — although, I caution you, there are things in there I no longer use but simply haven’t gotten around to opening up a can of npm uninstall on ’em as yet.

Copy-pasta meal?

So, there you go. If you see anything in this site’s repo that’s helpful to your project, by all means, copy-pasta to your heart’s content. If nothing else, perhaps the package.json file will give you some hints about cool npm packages to try if you, too, decide to weld Eleventy and webpack — which, I assure you, is a worthy endeavor.