Thoughts on things

I Like Webpack

May 18, 2019

I really like Webpack. I like, really, really, really like Webpack and I want to take a second to share why. This isn’t to say that Webpack is the only tool that can accomplish what I’m going to mention. Alternatives like Parcel.js are definitely worth a look. But, at the end of the day, Webpack is amazing!! Without further adu, let me tell you why.

It makes me feel powerful

We wanted to be able to start taking advantage of type="module" to serve our users more optimised bundles (inspired by this). My first thoughts were sounds cool, I have no idea how to do this. My second thoughts were I have no idea how to do this but I know that we can achieve this with Webpack. And you know what, we did achieve it.

The limitation is me, not Webpack. It gives me this amazing toolbox and ecosystem, that honestly makes me feel like we can achieve anything with our asset pipeline. Need an SVG to be a React component, done. Want to try out WebAssembly, done. Want to go offline, done. How cool is that!

It empowers me to experiment

The other day I wanted to have a quick look at CSS modules. Thanks to the amazing css-loader it took me more time to write this sentence than it did to enable them within our config. (you probably don’t want to know how long it took me to write this sentence).

Within an hour I’d been able to:

  • Have a coffee.
  • Get CSS modules working in the main app.
  • Rewritten a component to use them.
  • Show it to a colleague to see what they thought.
  • Come up with a poorly informed opinion about them.
  • Have another coffee.

Out of curiousity and narcissism, I looked up how we could have achieved the same with Sprockets. The first Google result is this. The author is clearly an amazing developer and an even better person for writing it all up, but all that setup looks painful. Compare it to adding modules: true to your config and I know which I would prefer.

It makes life better for our users

You know what I love? Needing to redownload all the JavaScript for a site because a variable was renamed. Split chunks turns off my favourite web feature out of the box. Don’t like the out the box config? That’s fine, tweak to your hearts content.

Know what else I really love? Slow first paints. Webpack spoils that for us again with dynamic imports. Drop in a import('my-expensive-js-file').then(...) and get all that expensive JavaScript out of the way of your first paint and time to interactive.

Want to set a performance budget? Add a performance option to your config. Want tree shaking? You get that out of the box. Need to minify your code in production? Webpack has got you. Want to visually understand why your bundles are so large? There’s a tool for that.

It makes life better for developers

Not everyone loves Webpack. Quincy Jones thought Billie Jean was ‘too weak’ for the album. We all make mistakes.

It’s allowed our team to write modern JavaScript and React and therefore allowed us all to become more valuable engineers in the current climate. Sure the build time can be annoying, but there are solutions (such as Slacks post on it). Sure it might seem overwelming to learn, but have you read SurviveJs Webpack. I really strongly believe, that as an industry, we are in a better place because Webpack exists.

Webpack likes you too

Webpack is not our enemy. It empowers us to write amazing, rich, interactive Web apps while respecting our users bandwidth and developers time. I think if you took another look, you’d probably really like Webpack too.

Sam McTaggart

Hi, I'm Sam McTaggart. I like to write things sometimes. You can find me on twitter where I write even less.