If you’re feeling lost whenever you have to add some javascript library to your Rails application, this post is for you!
I see a lot of people battling against Webpacker whenever they need to add a new javascript library or have to fix a bug on the asset pipeline. I suffered from the same problems, too. I talked about why this happens on a previous post:
“Adding Bootstrap or Javascript Sprinkles to Rails breaks everything. What should you do?".
Forget about reading yet another Bootstrap + Rails tutorial. They’re not going to help you. Better to invest your time on something that will help you: learning the basics.
The only thing that helped me was learning how Webpack works behind the curtains.
That’s why I compiled this list of good resources that will teach you everything you need to learn about Webpack to give you more confidence.
Tips:
- If you’re in a hurry, at least watch the Webpack Survival Guide talk.
- If you have some time, check out the Webpack From Nothing tutorial.
Hope you find these resources useful!
Webpack from Nothing
(if you can pick only one resource to read, this is the one!)
I highly recommend the tutorial Webpack from Nothing from David Bryant Copeland, who is a Ruby on Rails expert.
He shows you how to create a web application from scratch using only minimal tooling and Webpack. Building something is always a great way to learn!
He goes over which problems Webppack solves and how it works. He also talks about some of the expected problems so you don’t get too frustrated.
This tutorial will give you a good sense of how to work with modern Javascript, many of the gotchas to look out for, and a glimpse into the worldview of Webpack developers.
Yes, for someone used to good developer experience, the JS tooling is definetely lacking in that area, but it’s still useful to learn it from first principles so you can debug things when they break.
Rails Guides
You probably know this one, but it’s always good to have it as a reference. The Webpacker Rails Guide is the most up-to-date reference about working with Webpacker on a Rails app.
Webpack Survival Guide
This is a great talk about the process of migrating from the Rails asset pipeline to Webpacker and all the lessons learned along the way.
There’s also a bunch of good resources about Webpack that you can also check out.
Webpack Survival Guide for Rails Developers
Javascript Modules Cartoon
This is a good tutorial to learn how ES modules work and what problems they solve.
ES modules: A cartoon deep-dive
Javascript Modules
Mozilla has in-depth documentation about how javascript modules work.
This will help you understand how modude loading works and what import and
export statements are supposed to do.
Moving from Sprockets to Webpacker
I wrote about this and compiled a list of resources on a previous post, check it out:
Move From Sprockets to Webpacker On Small to Large Rails Apps.
Conclusion
These resources will definetely help you become much more confident in your Webpacking skills, so make sure you check out at least one of them!
Learning and practicing the basics pays off big time in the long run.
Did you like this article? Then you're gonna love these other ones: