Being a backend developer, I only stayed on the surface with regard to frontend technologies and frameworks. When I started a new Rails project in January 2020, I started with Rails 6 and was all of a sudden presented with Webpacker as default for bundling frontend code.
It was intimidating to think of learning about Webpack and Webpacker to get the app running well while trying to build an MVP for a startup. I had so many questions:
- how do I import Javascript and CSS into my pages?
- how is Webpacker passing configuration to Webpack?
- how do I customise Webpack with options that Webpacker doesn't support? and more ...
I spent some time over the last few months reading some articles and I feel like I have a good understanding of the Rails and Webpacker magic that integrates Webpack into a Rails application. Below are a list of resources that, I believe, will help someone like me to get up to speed with using Webpacker and even customising Webpack outside the Webpacker.
-
Summarises the file structure of Webpacker in Rails and where to place the files to get it all to work.
-
Demostrates how to include a Javascript library to use in the Rails application
With just these two, one could get the Javascript and CSS setup working in their Rails application.
Below are more resources that helped me debug some issues and customise the congfiguration a little more:
-
Understanding the configuration and different options that are available.
-
The options available to configure via
webpacker.ymlmight not always be enough. This article gives a more in-depth understanding on how Webpack can be configured along withwebpacker.yml. -
As more customisation is done, one needs to know how to debug if those changes are being applied correctly. This article shows how to debug these.