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.
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
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.
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.
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 how Webpack works behind the curtains, and what problem it solves
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:
If you follow these recommendations, they will teach you everything you need to learn about Webpack. Better than yelling at it, right? 🙉