Ruby on Rails 6: Something about Webpacker

Tram Ho

1. Introduction

Hi everyone, it’s been awhile since I got back to Ruby on Rails, and tried out a project using Rails 6, there are also quite a few differences between rails 5 and rails 6. Today I would like to say a new feature that I have just learned is Webpacker. Starting with Rails 6, Webpacker is a default compiler in javascript. This means that all JavaScript code will be processed by Webpacker instead of Asset Pipeline as in rails 5. Regarding the asset pipeline I would like to be allowed to present in another article. Within the scope of this article, we will learn about the organization and operation of Webpacker in Ruby on Rails 6.

2. What is Webpacker?

Simply put, it is a ruby ​​gem used to manage and package javascript code. When creating an application on rails 6, I will see as below:

You will also see the gem webpacker in Gemfile. In case of using Rails 5 to update to rails 6, Gem webpaker will not be automatically available in Gemfile. In this case, you will put it into Gemfile yourself and run the command: rails webpacker: install

New archive for JavaScript code

For Rails versions prior to Rails 6, all javascript code is stored in app / assets / javascripts. But in rails 6, this path no longer exists. Instead, a new archive is created at: app / javascripts. This directory to store all the JavaScript code. Ok we will see about the structure of this directory: Within this folder is divided into two subdirectories: chanels and packs directory, channels directory used to store javascript code for Action Cable. Temporarily I will spend this part. I went into the most important part is the packs folder. When opening the application.js file in the packs directory, we will see: This application.js file will be equivalent to the application.js file in the app / assets / javascripts folder in previous rails versions. When you start compiling javascript, it will look for javascript files in this packs folder and compile. By default this application file contains code related to Rails components such as turbolinks, Active Storage and Action Cable. You will find that all Ruby on Rails features related to javascript are supported in Webpacker. Even a new feature in rails 6 such as Action Text is supported in Webpacker. In short, you can create javascript files and put them in the “app / javascript / packs” directory so Webpaker can find and compile.

Config Webpacker.yml

By default, webpacker provides simple conventions where javascript application files and compiled webpack packages will go into your rails application, but all of these options are configurable from the file. config / webpacker.yml. The configuration for what Webpack is supposed to compile by default is based on the convention that every file in app / javascript / packs / or whatever path you put source_entry_path in webpacker.yml.

Let’s say you want to change the source directory from app / javascript to the frontend and the output to assets / packs. I can do the following: Similarly, you can also control and reconfigure the webpack-dev-server environment in webpacker.ym:

Including the JavaScript code in the app

So how to use javascript files when you put them into app / javascript / packs. Very simple, Webpacker has provided us with the javascript_pack_tag method, the same method as the javascript_link_tag method in rails 5, this method will ensure the application will call the correct javascript file that you have provided.

Integrate Webpacker with React, Angular and Vue

Webpacker provides the ability to integrate with other js frameworks such as React, Angular, Vue, … You can see a list of available commands / tasks by running bundle exec rails webpacker Before you need to make sure that installed Yarn 0.25.2+.


To use Webpacker with React, when creating a rails application you add an option as follows: rails new myapp --webpack=react

In case you already have a rails application and want to integrate React, then you will run the command: bundle exec rails webpacker:install:react Rails will install all the dependent components through Yarn, React Components for The project plus a small React example is updated at ** app / javascript / packs ** and you can use React now.

Angular with TypeScript

In case I already have a rails application and want to integrate React, then I will run the command: bundle exec rails webpacker:install:angular

At this point, the installer will add TypeScript and Angular libraries through Yarn with changes to the configuration. An example written in TypeScript will also be added to your project / javascript project so you can test and use Angular.


For VueJS, I also do the same rails new myapp --webpack=vue Integrating VueJS with Rails application already has bundle exec rails webpacker:install:vue


In a nutshell, this article gave an overview of Webpacker, how Rails 6 has integrated it and how to use javascript in Ruby on Rails 6. The article is based on my own understanding of Webpacker. If there is still lack of hope everyone comments to complete the article! Thank you everyone for reading.

The article is referenced from:

Share the news now

Source : Viblo