Webpacker and JavaScript bundling in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a JavaScript module using Webpacker in Rails.

Ruby on Rails

import [1] from 'components/button';

Drag options to blanks, or click blank then click option'

AButton

Bbutton

Cbtn

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for imported components

Using generic names like 'Component'

You import the module by its exported name, which is usually capitalized like Button.

2fill in blank

medium

Complete the code to add a JavaScript pack tag in a Rails view.

Ruby on Rails

<%= javascript_pack_tag '[1]' %>

Drag options to blanks, or click blank then click option'

Aapp

Bmain

Cbundle

Dapplication

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect pack names like 'app' or 'bundle'

Omitting quotes around the pack name

The default pack file is named application, so you include it with javascript_pack_tag 'application'.

3fill in blank

hard

Fix the error in the Webpacker config to enable source maps.

Ruby on Rails

[1].devtool = 'source-map';
module.exports = [1];

Drag options to blanks, or click blank then click option'

Aenvironment

Bwebpack

Cconfig

Dmerge

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'merge' or 'webpack' instead of 'environment'

Not exporting the correct config object

The Webpacker config uses environment to customize settings like source maps.

4fill in blank

hard

Fill both blanks to create a Webpack alias for easier imports.

Ruby on Rails

environment.config.[1].alias = {
  '@components': path.[2](__dirname, '../../app/javascript/components')
};

Drag options to blanks, or click blank then click option'

Aresolve

Bjoin

CresolvePath

DpathJoin

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'resolvePath'

Using 'pathJoin' which is not a function

You set aliases under resolve.alias and use path.join to build paths.

5fill in blank

hard

Fill all three blanks to configure Babel loader in Webpacker.

Ruby on Rails

environment.loaders.append('babel', {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: '[1]',
    options: {
      presets: [ '[2]' ],
      plugins: [ '[3]' ]
    }
  }
});

Drag options to blanks, or click blank then click option'

Ababel-loader

B@babel/preset-env

C@babel/plugin-transform-runtime

Dwebpack-loader

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong loader names like 'webpack-loader'

Confusing presets and plugins

The Babel loader is called babel-loader. The preset @babel/preset-env compiles modern JS, and the plugin @babel/plugin-transform-runtime optimizes helper code.