Webpacker with Rails 6.1 to import stylesheets, Javascript, and images!👨🏾‍💻Lets Code!

0:00 Intro
0:29 Asset Pipeline Lookback
1:56 Installing Webpacker & Related Errors
4:50 Add Twitter Bootstrap Stylesheets via Yarn
7:06 Add Javascript Dependencies for Bootstrap via Yarn
9:03 Add Image Assets to Webpacker Build
10:07 Production Deployment of Webpacker

Soundtrack credits:

Kevin MacLeod - Malicious

Aim to Head Official - RIPPED Cyberpunk / Darksynth / Midtempo

[elenadubina]

My goodness! i was looking for this video 48 hours with no sleep and red eyes, thank you so so much!

[csalmeida]

This is a super helpful guide, not only to understand Webpacker in a practical way but also to understand how it compares to the Import Maps or custom bundling approaches. Thank you!

[zedzed]

Rails is famous for "Convention over configuration". But when it comes to asset pipeline and webpacker, it's a horrible mess of opaque configuration. It should not take hours to figure out how to reference an image from within a css file.

[travellingstranger]

Love the background music :)....good choice!

[haroldpepete]

great content my friend, you have a new subscriber, you deserve it, you put a lot effort and dedication on this videos

[shamim]

I followed your instruction but jquery and bootstrap wasn't compiled by webpack.

[mikopiko]

This finally helped me, I changed from dev environment to prod and all of the sudden the css stopped loading, I could not understand why.

All it took was these two commands:

RAILS_ENV=production
RAILS_SERVE_STATIC_FILES=true

[masteryourownway]

Hey how can i install webpack exactly i still get this error: undefined method `stylesheet_pack_tag' for
Did you mean? stylesheet_path
stylesheet_link_tag

Webpacker can't find application in Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}

[softalxacademy]

Nice video, please do I have to run RAILS_ENV=production rails assets:precompile all the time I make changes to the file or its just a one time stuff

[arshadsyed]

Thanks for creating this very useful video.

Is it possible to include videos in the webpack manifest?

[stuafleish]

Hi, I can't get this to work after import "../styles/application.scss". My page is stuck looking like yours at 4:50, with the page loaded but the weird html appearing #.ms in the corner. Would you be able to help?

[cassidymugadza]

my javascript just wont work everything is as it should be the dismissable alert is not working any insights.

[ahmadkhan]

Can you create a video on converting an existing application from asset pipeline to webpacker? Thank you!