Search⌘ K
AI Features
Home
Courses
Rails for Front-end Development: Essential Tools

Installation and Configuration of Webpacker

Explore how to install and configure Webpacker in a Rails 6.1 application. Understand integrating TypeScript and CSS modules using Yarn, manage JavaScript packages with package.json, and set up essential tooling like Tailwind and Babel for a robust client-side environment.

We'll cover the following...

Installation

A Rails 6.1 app installs Webpacker as part of the default app creation, but we will need to make some configuration changes up front to install Hotwire and ensure that CSS and TypeScript are properly integrated.

Webpacker is a Rails gem, so the default install puts it into our Gemfile:

gem "webpacker"

This course uses Webpacker 6.0 (sometimes called Beta 6), which is in beta and soon to be released.

Webpacker creates several local configuration files, including the package.json manifest of JavaScript libraries to use, and then retrieves those JavaScript libraries using the Yarn package manager.

The default installation of Webpacker does not integrate with TypeScript or with CSS libraries. We’ll add those integrations now, per the Webpacker documentation, and we’ll install React later on.

For Webpacker to manage CSS, we need to add a few packages:

yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin

Webpacker also recommends adding a few lines to the base.js configuration (this listing also has a TypeScript addition):

Javascript (babel-node)
const { webpackConfig, merge } = require("@rails/webpacker")
const ForkTSCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin")
const customConfig = {
  plugins: [new ForkTSCheckerWebpackPlugin()],
  resolve: {
    extensions: [".css"],
  },
}
module.exports = merge(webpackConfig, customConfig)

We’ll also use the PostCSS and Sass extensions:

yarn add
...