Webpacker and JavaScript bundling in Ruby on Rails

Introduction

Webpacker helps Rails apps manage and bundle JavaScript files so they load fast and work well together.

You want to organize JavaScript code into smaller files and combine them automatically.

You need to use modern JavaScript features like modules or ES6 syntax in a Rails app.

You want to include JavaScript libraries or frameworks like React or Vue in your Rails project.

You want to optimize JavaScript for faster loading by compressing and bundling files.

You want to manage CSS or images alongside JavaScript in your Rails app.

Syntax

Ruby on Rails

import { something } from './some_file'

// Use something in your JavaScript code

// In Rails, you include the bundled JavaScript with:
<%= javascript_pack_tag 'application' %>

JavaScript files are placed in app/javascript/packs/ folder.

The javascript_pack_tag helper includes the bundled JavaScript in Rails views.

Examples

This is the main pack file that imports another JavaScript file and logs a message.

Ruby on Rails

// app/javascript/packs/application.js
import './hello'

console.log('Hello from Webpacker!')

A simple JavaScript file imported by the main pack.

Ruby on Rails

// app/javascript/packs/hello.js
console.log('Hello from separate file!')

This Rails helper includes the bundled JavaScript pack in your HTML layout.

Ruby on Rails

<%= javascript_pack_tag 'application' %>

Sample Program

This example shows how to split JavaScript into two files and include them in a Rails app using Webpacker.

Ruby on Rails

// app/javascript/packs/application.js
import './greet'

// app/javascript/packs/greet.js
console.log('Greetings from Webpacker!')

// In your Rails view (e.g., app/views/layouts/application.html.erb):
<%= javascript_pack_tag 'application' %>

Important Notes

Webpacker automatically watches and rebuilds bundles during development.

Use bin/webpack-dev-server for faster live reloads in development.

Webpacker is replaced by jsbundling-rails in newer Rails versions, but many apps still use it.

Summary

Webpacker bundles JavaScript files for Rails apps to load efficiently.

Use javascript_pack_tag to include bundled JavaScript in views.

Organize JavaScript in app/javascript/packs/ and import modules as needed.