Webpacker and JavaScript bundling in Ruby on Rails - Step-by-Step Execution

Concept Flow - Webpacker and JavaScript bundling

Write JS code in app/javascript

↓

Webpacker compiles JS files

↓

Bundles JS into packs

↓

Rails serves bundled JS in views

↓

Browser loads and runs bundled JS

This flow shows how Webpacker takes your JavaScript code, bundles it, and makes it ready for the browser through Rails views.

Execution Sample

Ruby on Rails

import { greet } from './greet';

document.addEventListener('DOMContentLoaded', () => {
  greet('friend');
});

This code imports a greet function and runs it when the page loads, showing how Webpacker bundles and runs JS.

Execution Table

Step	Action	Input/Code	Result/Output
1	Read JS files	import { greet } from './greet';	JS files loaded by Webpacker
2	Compile JS	Webpacker compiles imports	Imports resolved and modules compiled
3	Create bundle	Bundle includes greet function	Single JS file ready for browser
4	Serve bundle	Rails view includes <%= javascript_pack_tag 'application' %>	Browser receives bundled JS
5	Browser runs JS	DOMContentLoaded event triggers greet('friend')	Console logs greeting message
6	Exit	No more JS to run	Execution ends

💡 All JS files bundled and executed, no further code to run

Variable Tracker

Variable	Start	After Step 5	Final
greet	undefined	function greet(name) { console.log(`Hello, ${name}!`); }	function greet(name) { console.log(`Hello, ${name}!`); }
eventListener	none	added for DOMContentLoaded	active and triggered once
console output	empty	"Hello, friend!"	"Hello, friend!"

Key Moments - 3 Insights

Why do we import functions instead of writing all JS in one file?

Webpacker compiles multiple JS files into one bundle, so importing keeps code organized and modular as shown in execution_table step 1 and 2.

When does the JavaScript actually run in the browser?

The JS runs after the DOM content is loaded, triggered by the event listener in step 5 of the execution_table.

How does Rails include the bundled JavaScript in the webpage?

Rails uses the javascript_pack_tag helper to insert the bundled JS file into the HTML, as shown in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does Webpacker combine JS modules into one bundle?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Check the 'Create bundle' action in execution_table step 3

According to variable_tracker, what is the console output after the JS runs?

A undefined

B "Hello, friend!"

C Error: greet not defined

D No output

💡 Hint

Look at the 'console output' row after Step 5 in variable_tracker

If the DOMContentLoaded event listener was missing, when would greet('friend') run?

A Immediately when JS loads

B After the page fully loads

C Never runs

D Only on user click

💡 Hint

Refer to execution_table step 5 about event listener timing

Concept Snapshot

Webpacker bundles JavaScript files into one pack.
Use import/export to organize code.
Rails includes bundles with javascript_pack_tag.
JS runs in browser after DOM loads.
This improves code management and page speed.

Full Transcript

Webpacker is a tool in Rails that takes your JavaScript files and bundles them into one file for the browser. You write your JS code in separate files using import and export. Webpacker compiles these files into a single bundle. Rails then includes this bundle in the webpage using a helper. When the browser loads the page, it runs the bundled JavaScript after the page content is ready. This process helps keep code organized and makes the page load faster.