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.

Practice

1. What is the main purpose of Webpacker in a Rails application?

easy

A. To style HTML elements with CSS

B. To bundle JavaScript files so they load efficiently in the browser

C. To manage database migrations automatically

D. To handle user authentication

Solution

1. Step 1: Understand Webpacker's role

   Webpacker is designed to bundle JavaScript files for Rails apps.

2. Step 2: Identify its main function

   Bundling means combining files to load faster and more efficiently in browsers.

3. Final Answer:

   To bundle JavaScript files so they load efficiently in the browser -> Option B

4. Quick Check:

   Webpacker bundles JS = C [OK]

Hint: Webpacker bundles JS files for faster loading [OK]

Common Mistakes:

• Confusing Webpacker with database tools
• Thinking Webpacker styles HTML
• Assuming Webpacker manages user login

2. Which of the following is the correct way to include a Webpacker JavaScript pack in a Rails view?

easy

A. <%= javascript_pack_tag 'application' %>

B. <%= stylesheet_pack_tag 'application' %>

C. <%= javascript_include_tag 'application.js' %>

D. <%= image_pack_tag 'application' %>

Solution

1. Step 1: Identify the helper for JS packs

   Webpacker uses javascript_pack_tag to include JS bundles.

2. Step 2: Confirm correct syntax

   The syntax is <%= javascript_pack_tag 'pack_name' %>, so <%= javascript_pack_tag 'application' %> matches.

3. Final Answer:

   <%= javascript_pack_tag 'application' %> -> Option A

4. Quick Check:

   Use javascript_pack_tag for JS packs = A [OK]

Hint: Use javascript_pack_tag to load JS bundles in views [OK]

Common Mistakes:

• Using stylesheet_pack_tag for JavaScript
• Using javascript_include_tag instead of javascript_pack_tag
• Confusing image_pack_tag with JS inclusion

3. Given the following JavaScript pack file app/javascript/packs/hello.js with content:

import { greet } from '../utils/greet'
console.log(greet('Rails'))

and app/javascript/utils/greet.js contains:

export function greet(name) {
  return `Hello, ${name}!`
}

What will be printed in the browser console when the pack is loaded?

medium

A. SyntaxError: Unexpected token

B. greet is not defined

C. Hello, undefined!

D. Hello, Rails!

Solution

1. Step 1: Understand the import and export

   The greet function is exported from utils/greet.js and imported correctly in hello.js.

2. Step 2: Analyze the console.log output

   Calling greet('Rails') returns the string Hello, Rails!, which is logged.

3. Final Answer:

   Hello, Rails! -> Option D

4. Quick Check:

   Correct import/export logs greeting = D [OK]

Hint: Check import/export paths and function calls for output [OK]

Common Mistakes:

• Forgetting to export the function
• Using wrong import path
• Expecting undefined instead of correct string

4. You added a new JavaScript file app/javascript/packs/custom.js but when you include it with <%= javascript_pack_tag 'custom' %>, the browser console shows a 404 error. What is the most likely cause?

medium

A. You forgot to restart the Rails server after adding the pack

B. The file is not saved in the correct directory

C. The javascript_pack_tag helper is deprecated and should not be used

D. The file has syntax errors preventing compilation

Solution

1. Step 1: Check file location

   The file is correctly placed in app/javascript/packs/, so location is likely correct.

2. Step 2: Consider server restart

   Webpacker requires the Rails server or webpack-dev-server to restart to detect new packs.

3. Final Answer:

   You forgot to restart the Rails server after adding the pack -> Option A

4. Quick Check:

   Restart server to load new packs = A [OK]

Hint: Restart server after adding new JS packs [OK]

Common Mistakes:

• Assuming helper is deprecated
• Ignoring server restart requirement
• Blaming syntax errors without checking logs

5. You want to organize your JavaScript code by creating a module app/javascript/modules/calc.js exporting a function add(a, b). How should you import and use this function in your pack file app/javascript/packs/main.js to log the sum of 5 and 7?

hard

A. import add from '../modules/calc.js'
console.log(add(5, 7))

B. require('../modules/calc')
console.log(add(5, 7))

C. import { add } from '../modules/calc'
console.log(add(5, 7))

D. import * as calc from '../modules/calc'
console.log(calc.add(5, 7))

Solution

1. Step 1: Understand ES module import syntax

   If add is a named export, import it with curly braces: import { add } from 'path'.

2. Step 2: Use the function correctly

   Call add(5, 7) and log the result with console.log.

3. Final Answer:

   import { add } from '../modules/calc' console.log(add(5, 7)) -> Option C

4. Quick Check:

   Named export import uses braces = B [OK]

Hint: Use curly braces to import named exports [OK]

Common Mistakes:

• Using default import syntax for named exports
• Using require instead of import in Webpacker
• Forgetting to call function from imported module