Using Webpack with Ruby on Rails

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

==================== Webpack, although a little hard to configure, remains the leading edge build tool for modern web development. This post/video guides you through adding Webpack to an older Ruby on Rails 5.2 project as well as the latest Ruby on Rails 6 beta release.

The demos here are meant to be a high-level overview of how Webpack can be used inside Ruby on Rails no matter the version.

We'll leverage the webpacker gem (now part of Rails 6 by default) to incorporate more modern JavaScript into an already seasoned framework. The point of adding webpack is to add new technologies that are so new that they need to be compiled down into more legacy code. Doing this is no easy feat but the gem will take all the hard configurations out of the picture and ultimately just work.

With Webpacker you gain these features and more:

• webpack 4.x.x
• ES6 with babel
• Automatic code splitting using multiple entry points
• Stylesheets - Sass and CSS
• Images and fonts
• PostCSS - Auto-Prefixer
• Asset compression, source-maps, and minification
• CDN support
• React, Angular, Elm and Vue support out-of-the-box
• Rails view helpers

A lot of these things Rails already takes care of with the asset pipeline. You can optionally choose to use the asset pipeline for images, fonts, CSS, and more leaning on webpacker for JavaScript. This will be the new Rails 6 default.

==================== 📰 Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💎🛤 NEW COURSE: HELLO RAILS - Get notified https://hellorails.io

💻 Previously published at: https://web-crunch.com/using-webpack-with-ruby-on-rails

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=yhO3PCxP5hs