Dismiss

Subscribe to the newsletter

April 1, 2019

Using Webpack with Ruby on Rails

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.

Common questions

Why do I need webpack with Rails if the asset pipeline is already present?

Realistically, in most cases, you don't but it does make it easier to reach for modern front-end frameworks like Vue.js or React.js with minimal setup time. The asset pipeline still works as it should alongside the new webpack workflow. All assets associated with webpack now live inside an app/javascript directory.

Does webpack depend on the asset pipeline? Do they conflict?

The webpacker gem doesn't depend on the asset pipeline directly though it does hook into a few rake commands bundled with each Rails installation rails assets:precompile for instance will fire off both the asset pipeline compilation and the webpack command to compile down all assets in a given project utilizing both. They only conflict if your code does. It's a good practice to separate concerns. I tend to author all javascript in app/javascript and then reach for the asset pipeline app/assets/ for any css, images, or other assets the project I'm working on might require.

Do I even need the asset pipeline with the webpack addition?

Realistically, no but the asset pipeline has a bunch of handy features for rendering assets in views you or your team may be accustomed to. Luckily you can do the same with assets inside app/javascript. Rendering images, assets, CSS, JavaScript and more is very possible.

Shameless plug time

Hello Rails Course

I have a new course called Hello Rails. Hello Rails is modern course designed to help you start using and understanding Ruby on Rails fast. If you're a novice when it comes to Ruby or Ruby on Rails I invite you to check out the site. The course will be much like these builds but a super more in-depth version with more realistic goals and deliverables. View the course!

Follow @hello_rails and myself @justalever on Twitter.

Leave a reply

Sign in or Sign up to leave a response.

1 response

Icons/flag
Icons/link diagonal

Attention:

Are you looking for a REAL FINANCIAL LOAN COMPANY to give you loan between 50,000 Euro and 50,000,000 Euro (for a business or company loan, personal loan, home loans, car loan, debt consolidation loans, venture capital, healthcare loan, etc.)
Or have you been denied a loan from a bank or financial institution because of one reason or the other?
Apply now and get real financial loan processed and approved within 3 days.
MARK DAVSON FINANCIAL LOAN FIRM, we are an "Internationally Accredited Loan Lender" that give REAL FINANCIAL LOANS to individuals and companies in a low interest rate of 2% with your valid identity card or your country international passport for verification.
Our loan Repayment starts 1 (One) year after you have received your loan, and repayment duration ranges from between 3 to 35 years duration.
Our company also need a person that can be our company representative in your country.

FOR IMMEDIATE RESPONSE AND PROCESSING OF YOUR LOAN REQUEST WITHIN 2 WORKING DAYS,
Contact us directly through this email: [email protected]

Contact us with the following information:

Full Name:____________________________
Amount Needed as Loan:________________
Loan Duration:_________________________
Purpose for Loan:______________________
Date of Birth:___________________________
Gender:_______________________________
Marital status:__________________________
Contact Address:_______________________
City/Zip code:__________________________
Country:_______________________________
Occupation:____________________________
Mobile Phone:__________________________

Send your request for immediate response to: [email protected]

Thank you
C.E.O. Rev. Mark Davson
MARK DAVSON FINANCIAL LOAN FIRM
United Kingdom, England (UK)
Email:[email protected]
Email: [email protected]
Email: [email protected]
WhatsApp:+447404320361

Est. reading time: 3 minutes
Stats: 2,899 views

Categories

Collection

Part of the Ruby on Rails collection