Webpack your shit and GTFO
Did you know more than 18,000 packages on NPM depend on Webpack? These are mostly toolchains, plugins and frameworks, and a bunch of packages where some idiot couldn’t tell the difference between dependencies and devDependencies.
JS goes here, CSS goes there, images go … Photo: Pxfuel
With that many toolchains and frameworks using Webpack under the hood, who knows whether you’re using it - until something goes wrong and there’s the word “Webpack” in the stack trace. And then you realise making your own toolchain isn’t such a bad idea after all.
Best toolchain ever
You get a new project. Clean, unopinionated, you can do whatever you want, and damn sure you’re going to own it! No more bloaty toolchains, you know exactly what to do - Webpack, Babel to make your beautiful code run in older browsers, and a local dev server with hot reload.
It starts right away, page updates are almost instant, build takes only a couple seconds, it’s the best toolchain ever!
Old projects suck
Now that you have this project set up perfectly going back to your old projects is painful. You hate every minute spent there fixing bugs or adding features. Reloads feel slow, build takes forever, the bundle is too big, and the worst of all: it hangs from time to time, and takes ages to restart. Perhaps it’s time to tell everyone in the office how great your new toolchain is, and hopefully, someone will take a few weeks to move from an old, well-tested toolchain to this great thing you’ve just made.
Look at everything Webpack can
Development on your new project is a breeze, and before you know it you add some images, import styles, add a bunch of libraries and webmanifest, … It seems there’s a Webpack loader for everything. Once your code gets too big, you add code splitting and build optimisers, strong type checking, service workers, localisation.
Deploy time
Finally, the time comes to deploy your project. That should be simple, install and build, then copy the dist folder to the server.
5 minutes later it finished installing dependencies.
10 minutes later it crashed, some paths weren’t set correctly.
Try again.
It took another 20 minutes, but the build passed. Wait, why does it need so many chunks? And why are some chunks so big? Never mind, no time for that. Does it work? Not really, seems some loaders need explicitly configured URLs and paths.
Just a few more fixes, but you totally got it.
Onto a next project
You’ve done it, without bloaty toolchains and magic under-the-hood configurations. It feels good to have complete control over the development process.
There’s already a new project coming up. No need to start from scratch, you’ll use the same config and tools to save some time.
Even better, put them in a package so you can use them on every new project.
The number is now 18,001.