Gaurav Varma

Rails 6 introduces a major shift in how JavaScript is handled by making Webpacker the default JavaScript compiler. This change brings modern frontend tooling to Rails by using webpack to bundle and serve JavaScript code.

Before Rails 6

Prior to Rails 6, JavaScript was managed using Sprockets. JS files lived in app/assets/javascripts, and scaffold generators created CoffeeScript stubs.

Starting with Rails 5.1, Webpacker could be added manually:

1rails new myapp --webpack

Or to integrate with an existing app:

1# Gemfile
2gem 'webpacker', '~> 4.x'

1bundle
2bundle exec rails webpacker:install

After Rails 6

Now, when you run rails new, the Webpacker gem is included by default and webpacker:install is automatically executed.

All JS code lives in app/javascript. This folder contains:

packs/: Entry points for webpack (e.g. application.js)
channels/: Action Cable setup using ES6 (not CoffeeScript)

No scaffold JS stubs are created anymore, except for Action Cable channels.

Default pack file (application.js) includes:

1require('@rails/ujs').start();
2require('turbolinks').start();
3require('@rails/activestorage').start();
4require('channels');

What is Webpacker?

Webpacker is a gem that integrates webpack with Rails. It makes it easy to bundle modern JS using ES6, React, Vue, or other frontend libraries. It ships with sensible defaults and provides helpers for referencing compiled assets.

Webpacker Structure in Rails 6

1app/javascript
2├── channels/
3│   ├── consumer.js
4│   └── index.js
5├── packs/
6│   └── application.js

Only files inside the packs/ directory are treated as webpack entry points and compiled. These packs can reference other JS modules, styles, or assets.

Using Packs in Layouts

To include a pack in your layout:

1<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

If your pack imports CSS:

1<%= stylesheet_pack_tag 'application' %>

Best practice is to organize business logic into modules within app/javascript and only reference them via the pack files.

Configuring Webpacker

Webpacker’s main config file is located at:

1config/webpacker.yml

It lets you configure source paths, pack output paths, and dev server settings.

Webpack-specific configs live inside:

1config/webpack/
2├── development.js
3├── production.js
4├── environment.js

Compilation

In development, webpack compiles JS on the fly with each request.

In production, assets are compiled using:

1rails assets:precompile

This internally calls:

1rails webpacker:compile

Webpacker also supports hot module replacement (HMR) and live reloading with its provided binstubs.

Summary

By making Webpacker the default, Rails 6 embraces modern JavaScript practices while staying full-stack friendly. With ES6 modules, easy pack organization, and webpack’s flexibility, Rails developers now have first-class support for building modern frontends alongside their backend.

Rails 6 makes Webpacker the default JavaScript pipeline