Webpack is your Achilles’ heel

And it’s slowing you down

How do you build your website currently? Do you Webpack and bundle everything together, use the CommonsChunkPlugin to make things faster only to learn you’re not doing it right?

Did you make the jump to Webpack 2 because you expected Tree Shaking support (and were given it, kinda), only to find out the killer feature you upgraded for doesn’t actually work yet?

How much time have you spent messing around with your Webpack configuration to try make it performant, and work seamlessly with your HMR, your linter, TypeScript, Babel — so you could finally achieve developer Zen. How much time have you wasted finagling Webpack into doing what you want, instead of actually shipping product?

Webpack is your Achilles’ heel

Oof. That looks like it hurt. He must have been using Webpack.

By now you probably think I’m here to spread hype about Rollup and how awesome it is…


Not at all.

Hey. Pop quiz! What are websites made of?

A) HTML
B) CSS
C) JavaScript
D) Media
E) All of the above

If you chose anything but E, click here.


But just how is Webpack slowing you down?

If you made it to this point, you’re probably curious so I’m not going to beat around the bush. You’ve been over-engineering.

Blasphemy!

Okay. Maybe you’re doing everything perfectly. Who am I to judge? But what are you really building? Are you making an app that’s going to save the world? Or are you simply building product for some company in exchange for some money? (Hint: You should be saving the world, but you’re probably not.)


Wait. WTF are you talking about? That doesn’t even make sense… How was I over-engineering? And what does any of this have to do with Webpack?

Remember that quiz you took earlier? Did you answer E?

If so, you were wrong…

If Ace Ventura were a website built with Webpack.
Websites are made of whatever you throw at them.

And in the case of Webpack, that’s pretty much everything.

But you’re not building a website, because you’re still messing around with your Webpack config, your Webpack plugins, trying to make it play nice with TypeScript, or Buble, cross-referencing your setup with Awesome React Boilerplates, tweaking linter rules, bracing for the inevitable pain of Babel 7, and the list. goes. on.

And even if have been shipping product, is your architecture solid? Are you sure your React sites aren’t invisible to Google? Are you building the future of Web Apps? Properly lazyloading your app bundles? Are your dependencies secure, licensed, semantically versioned, even maintained? Do you scale both vertically and horizontally? I’m guessing some of these needs got deprioritized while you were upgrading to the latest version of Webpack.


While many of you were busy perfecting your Webpack builds, others were quietly building towards a different Web architecture — the JAMstack. And unless you’re building an app right now that has less than 800 million dependencies, some of you are going to experience pain maintaining them later — especially if JAMstack takes off the way SPAs did, and developer focus shifts again. Because, let’s be honest, no one wants to be the neckbeard sitting alone in a dimly-lit room trying not to breathe too hard on a house of cards.


So. Now that we gotten that out of the way…

Think of the movement to NPM scripts following Grunt and Gulp. Do you remember? Why did that happen? It happened because complexity sucks, and it slows us down.

So how do we fix it? We simplify.

Here are 33 lines of code I wrote to start simplifying.

I like to think of them as as acupuncture for that pain I’ve feeling on the back my leg. And perhaps, one day, you’ll come to think of them that way too. That is, if you’re not still busy trying to figure out Webpack.