Did you spend a billion hours trying to add jQuery, or Bootstrap, or Tailwind to your Rails project, but now everything on the frontend is broken?

Or worse: you can’t even tell whether the frontend is broken or not. It’s in a unkown state of brokenness.

Maybe you just want some javascript sprinkles, but Webpacker makes things so much harder and frustrating.

Do you wait until an angry customer complains about the checkout button not working anymore to know which page to fix? Probably not!

I know how that feels. I often ask myself: “What’s the difference between Webpacker and Webpack again? This is so confusing!”

(Old developer yells at Webpack)* 👴🗯️

Webpack(er) is more complicated, but it’s not rocket science!

Good ol' Sprockets was so much easier, right? Just drop some JS files in app/assets/javascripts, add a line to application.js, and call it a day.

Webpacker out-of-the-box experience is indeed more complicated than Sprockets, people are terrified of touching anything except the most basic configuration.

But it’s not really Webpacker’s fault. This gem is just a wrapper around Webpack.

Webpack is a static module bundler for JavaScript. It’s responsible for grabbing a bunch of javascript modules and bundling them together so your application can use it.

I know what you’re thinking: why not just use Sprockets instead?

The problem is that you would be stuck in Sprockets-land forever: the issues would only increase over time, as all the new features get ported over to Webpack while older gems become deprecated in favor of npm packages.

You can read my previous post for more details.

Sorry to break it to you, but there’s no going back to Sprockets. There’s really no other popular, modern and production-ready option to work with besides Webpack. Until something better comes along, you’ll need to get used to it and move on.

Working with javascript packages became much more complicated, but honestly, it’s not rocket science.

The problem is that you might not be used to the “Javascript Way of Doing Things” ™️, but it’s okay. If you learn a little bit more about how this stuff works, you will stop suffering so much.

How to Make the Webpack Pain Go Away?

After I accepted that I needed to understand more about Webpack to be able to do my work, and decided to learn a bit about it, my life got so much easier.

If this is something you’d like to try, here’s my recommendation:

  • Learn a little bit of how javascript modules work
  • Learn how Webpack works behind the curtains, and what problem it solves

Trust me on this, most of my javascript-related pain went away after learning a bit more about the inner workings of Webpack.

And I’m not even talking about the Webpacker gem, because it will definetely not solve all the problems for you. Like I said, it’s just a wrapper around Webpack. If you don’t really grasp how Webpack works and Webpacker starts throwing errors at you, you’ll get lost.

But if you understand Webpack a little better, you’ll be able to debug issues yourself and configure things with more confidence and understand what’s going on.

If you’re convinced, check out this list of resources I created for you:

What’s the Best Way to Learn Webpack? 📚

If you follow these recommendations, they will teach you everything you need to learn about Webpack. Better than yelling at it, right? 🙉