Shakapacker
is a tool that helps bundle JavaScript files using webpack 5+.
It is a successor to Webpacker and is based on version 6 of Webpacker. For the sake of simplicity we would using the terms Webpacker and Shakapacker interchangeably.
Setting up Shakapacker
First, we need to run the yarn install command to generate the Yarn lockfile.
Remove the app/javascript directory as it has some unwanted files. When we
install shakapacker it will create the app/javascript folder with the required
files.
Remove the app/javascript folder with the following command:
Let's install shakpacker. Let's open Gemfile and at the end of the file
we need to add the following code.
We are aware that the latest version of shakapacker is v7. However we ran into some issues
with that version. Hence we are locking shakapacker to v6.
Now, we can set up the base for shakapacker by running the following command.
We will be using version 4.13.1 of webpack-dev-server. Run the following command to ensure this.
The default configurations sets the source path app/javascript as the source_entry_path
in config/webpacker.yml. We need to set a subdirectory of the source_path, namely packs, to
be the source_entry_path.
We also need to make other minor modifications in the webpack configuration.
To incorporate all these, let's replace the contents of config/webpacker.yml with shakapacker configuration from the
Wheel repository
by executing the following command from the root of the app:
Now, let's move the file app/javascript/application.js to app/javascript/packs/application.js
as per the configuration set in webpacker.yml.
Next, let's add .browserlistrc file to the application.
The browserslist configuration controls the outputted JavaScript so that the emitted code
will be compatible with the browsers specified. cover 95% selects the smallest set of popular
browser versions with collective usage over 95% of the audience worldwide.
To ensure a single configuration and avoid redundancy, let's remove the following three lines that specify the browserlist configuration inside the package.json file, considering that we already have a separate .browserlistrc file.
Let's now install the below packages to our project as a part of the webpack configuration:
Let's also add a babel.config.js file with base configurations at the root of the project.
Execute the following command to download and use babel configuration from the
Wheel repository.
The babel.config.js file is used to configure Babel's behavior, including which presets
and plugins to use, which files to include or exclude from the compilation process, and
other settings.
To ensure a single configuration and avoid redundancy, let's remove the following five lines that specify the babel configuration inside the package.json file, considering that we already have a separate babel.config.js file.
Customizing Shakapacker configuration
Shakapacker gives us a default configuration file config/webpack/webpack.config.js.
However, we need to customize this by modifying the webpack configuration, to suit our
application.
When setting up Shakapacker, having files like environment.js, development.js,
production.js, etc, allows us to configure different settings for different
environments in the application.
The environment.js file is used to configure settings that are common across all
environments, such as which JavaScript packs to load and which plugins to use. By
separating configuration into different files based on environment, developers can
easily manage and maintain their Shakapacker configuration without having to duplicate
code or remember which settings apply in which environment.
Let's import these customized configurations from wheel by running the below command:
Let's also create a file resolve.js inside config/webpack to handle alias using the
below command.
We will discuss more about alias in the coming chapters so you don't have to be concerned now.
Update to stylesheet pack tag
In an earlier chapter, we had removed the following lines from the app/views/layout/application.html.erb file:
Instead, let us use stylesheet_pack_tag to attach CSS packs and javascript_pack_tag to handle JavaScript files, as follows:
We will discuss in depth about why we need to do this replacement towards the
end of the book.
If you're very curious and don't mind the complexity at this early
stage itself, then you can give
this section
a read to understand about Shakapacker's CSS compilation.
Once verified, add this new application to git: