Webpacker and JavaScript bundling in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you run bin/webpack in a Rails app using Webpacker?

You run bin/webpack in your Rails project that uses Webpacker. What is the main result of this command?

A It compiles and bundles JavaScript files into a single pack file in <code>public/packs</code>.

B It starts a Rails server to serve JavaScript files dynamically.

C It deletes all JavaScript files from the <code>app/javascript</code> folder.

D It installs new JavaScript packages from <code>package.json</code>.

💡 Hint

Think about what bundling means for JavaScript files in Rails.

Running bin/webpack compiles and bundles JavaScript files into optimized packs that Rails can serve efficiently from public/packs.

📝 Syntax

intermediate

Which Webpacker config file defines the entry points for JavaScript bundling?

In a Rails app using Webpacker, which file specifies the JavaScript entry points that Webpack uses to start bundling?

A config/webpack/environment.js

B app/javascript/packs/application.js

C package.json

D config/webpacker.yml

💡 Hint

Look for the JavaScript file that acts as the entry point for bundling.

The app/javascript/packs/application.js file defines the JavaScript entry points that Webpack uses to start bundling.

🔧 Debug

advanced

Why does this Webpacker build fail with a syntax error?

Given this JavaScript pack file content, why does Webpacker fail to build it?

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return 
Hello World
}

ReactDOM.render(, document.getElementById('root'))

A The import statements must use double quotes instead of single quotes.

B ReactDOM.render is deprecated and causes a build error.

C The <code>document.getElementById</code> call is invalid in Webpacker.

D The JSX syntax requires a Babel loader configured, which is missing.

💡 Hint

Think about what Webpack needs to understand JSX syntax.

Webpack needs Babel configured with a loader to transform JSX into valid JavaScript. Without it, the build fails with a syntax error.

❓ state_output

advanced

What is the output of this Webpacker manifest JSON after bundling?

After running Webpacker, the manifest.json file contains mappings of source files to compiled assets. Given this snippet:

{
  "application.js": "/packs/js/application-123abc.js",
  "styles.css": "/packs/css/styles-456def.css"
}

What does this mean for the Rails app?

A The manifest file causes Webpacker to delete the original source files.

B Rails will ignore these files and serve the originals from <code>app/javascript</code>.

C Rails will serve the compiled JavaScript and CSS files with hashed names for caching.

D The manifest file is only used for development and ignored in production.

💡 Hint

Think about why hashed filenames are used in web apps.

The manifest maps source files to compiled assets with unique hashes to enable caching and cache busting in browsers.

🧠 Conceptual

expert

Which statement best describes the role of Webpacker in modern Rails apps?

Choose the most accurate description of what Webpacker does in a Rails application.

A Webpacker manages JavaScript and CSS bundling, allowing Rails to use modern JavaScript tools and frameworks seamlessly.

B Webpacker only handles CSS preprocessing and does not affect JavaScript files.

C Webpacker replaces the Rails asset pipeline entirely and removes the need for Sprockets.

D Webpacker is a Rails server extension that dynamically compiles assets on every request.

💡 Hint

Consider what Webpacker adds to Rails compared to the traditional asset pipeline.

Webpacker integrates modern JavaScript bundling tools into Rails, managing JS and CSS assets but does not fully replace Sprockets.

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