Installation and Configuration of Webpacker
Learn to install and configure Webpacker in this lesson.
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):
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 postcss-loader sass sass-loader