Starting with Rails 6, Webpacker has become the default editor for JavaScript, which means that all the JS code you write will be handled by Webpacker instead of the old assets pipeline, also known as Sprockets. . In this article we will learn about Webpacker together.
1. What is Webpacker
webpacker is a Webpack encapsulation gem – a famous JavaScript tool for managing and packaging JavaScript code – and providing helpers so that we can use Webpack in our Rails application. Simply put, it provides Rails with the ability to use Webpack .
Every time you start a new application with Rails 6, you will see these outputs printed out in the console.
1 2 3 4 5 6 7 8 9 10 | rails webpacker:install RAILS_ENV=development environment is not defined in config/webpacker.yml, falling back to production environment create config/webpacker.yml Copying webpack core config create config/webpack create config/webpack/development.js create config/webpack/environment.js create config/webpack/production.js create config/webpack/test.js |
At the same time we can also find webpacker gem in the application’s Gemfile .
Note :
For you guys still working with old Rails apps, when updating to Rails 6, you won’t install the
webpackergemwebpacker. We need to include itGemfilein ourGemfileand run the commandrails webpacker:install.
2. JavaScript has a “new residence”.
Before Rails 6 came out, all the JavaScript code was in the path app/assets/javascript . But in the application running Rails 6, the path app/assets/javascript no longer exists. Instead, we have the app/javascript to store our JS code snippets. With the new path, we can know that it is the place for the JS snippets that will be used by the application’s view, more intuitive, right?
Now, let’s go into the content of the new link together.
1 2 3 4 5 6 7 8 9 10 | ▶ tree app/javascript app/javascript ├── channels │ ├── consumer.js │ └── index.js └── packs └── application.js 2 directories, 3 files |
We can see that it contains 2 folders called channels and packs . Folder channels created by ActionCable of Rails. Currently, we do not need to pay attention to it but will focus on the more important component that is packs , let’s see what it contains.
3. What is Pack
Webpack has a concept that is used to determine which entry points can be viewed as which files will be first browsed by Webpack when it starts compiling your JS code. Gem webpacker creates a pack called application and the filename will be application.js located at app/javascript/packs . Contacting the assets pipeline, this file will be similar to app/assets/javascripts/application.js
The application pack created by Rails will contain code related to components such as turbolinks , Active Storage , and Action Cable .
You will see that all Rails frameworks that have JavaScript components like Rails-UJS, Turbolinks, Active Storage are migrated to support Webpacker. Even a new framework like Action Text in Rails 6 works well with Webpacker.
So, we can know that the package application will be the entry point for all the JS code in the application. We can create more custom packs and put them in app/javascript/packs and Webpacker will automatically find them while compiling.
This setting is automatically configured by Webpack in the config/webpacker.yml file
1 2 3 | # config/webpacker.yml 5: source_entry_path: packs |
If we want Webpack to search elsewhere, we can configure resolved_paths in config/webpacker.yml .
4. Compile JavaScript code
Next, we will learn how JS code is compiled by Webpack with the help of the webpacker gem. In a development mode, you don’t need to do anything. When running the rails server , the compiler will run concurrently with requests similar to the old assets pipeline.
4.1. Live reloading with webpack-dev-server
Webpacker creates a bin/webpack-dev-server that can be used for live reloading purpose during development phase. We will have to manually run our own webpack-dev-server for this purpose and the result will be live reloading for hot fixes in the modules.
4.2. Production mode
In a production environment, webpacker will add the webpacker:compile action to the assets:precompile task. So, if the pipeline runs assets:precompile , it will also contain compiled files compiled by webpack. Since the webpack package is a package.json package, yarn will take care of its installation, so it can compile the JS code.
5. Attach JavaScript code to the application
We have seen the way the webpacker compiles the JS code, but how do we attach it to our application?
For that matter, Webpacker provides a helper method named javascript_pack_tag . As the name implies, we use it to attach webpacker packs to the layout files. It’s similar to the javascript_link_tag of the older assets pipeline.
1 2 3 4 | # app/views/layouts/application.html.erb <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> |
javascript_pack_tag will take care of calling to assets that have been compiled correctly in a development as well as production environment similar to the assets pipeline.
Above I have provided a webpacker information about webpacker , and how can it let us use Webpack in a Rails 6 application and understand packs in the world of Webpack . Next to that is how the compilation process takes place and how to use the compiled code in our application. See you in the next article, I hope the article has brought useful information for you. Peace!
Reference links:
https://github.com/rails/webpacker
https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/