Webpacker 5.0 released

Webpacker 5.0.1 was released yesterday. The previous release of Webpacker happened in December 2019 which was version 4.2.2. As 5.0 is a major version bump, I decided to give you a tour of the changes from the 4.x series and the 5.x series.

Minimum node version

Minimum node version is now updated to 10.13.0 from 8.16.0. This means that to use Webpacker, you have to use Node 10.13.0 or above. Node 8 is already in maintenance mode so this change switches the minimum node version to the next active node version which is 10.x.

On Heroku, Node version 10.x, 11.x and 12.x are supported so you don't have to change anything if your app is deployed to Heroku. If you are using Node 8 locally or on your deployment server, you will see an error when trying to use Webpacker 5.

➜ yank-notifier git:(master) ✗ bundle exec rake assets:precompile
yarn install v1.22.4
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.63s.
I, [2020-03-25T20:52:13.580560 #12181] INFO -- : Writing /Users/prathamesh/Projects/sources/yank-notifier/public/assets/manifest-cadda289ef9c70eaa0879a36e6263cb33f7523a16b3ef862e0b8609cdc2bdab1.js
....
Webpacker requires Node.js ">=10.13.0" and you are using v8.17.0
Please upgrade Node.js https://nodejs.org/en/download/
Exiting!

Minimum Rails version

Webpacker 5 will also require Rails 5.2 & above and Ruby 2.4 & above. This change is inline with the Rails maintenance policy.

Multiple files per entry

Rails recommends that Webpacker should only be used for JavaScript code. The CSS and other assets should be managed by the Asset pipeline. But Webpacker also supports managing CSS. Before Webpacker 5.0, to manage the CSS using Webpacker, following steps need to be performed.

• Add CSS in app/javascript/scss/application.css
• Import the CSS in the application pack - import '../scss/application.css'
• Use stylesheet_pack_tag 'application' in the layout to load the CSS in Rails views.

But this leads to confusion as the CSS is not treated as entry point or pack but instead imported in a JavaScript pack.

Checkout my article on Mastering packs to know more about what are packs and entrypoints.

webpack supports multiple type of files per entry to generate separate bundles for JavaScript and CSS. Let's say we have a home layout and accounts layout in our Rails app and we have different page specific JavaScript and CSS for these two layouts.

Using webpack, we can specify the multiple files per entry as follows:

# webpack.config.js
...
entry: {
  home: ['./home.js', './home.scss'],
  account: ['./account.js', './account.scss'],
}
...

This webpack configuration generates home.js, home.css, account.js and account.css as output. Then we can include the individual output files in the individual pages for home and accounts. This feature was not supported in Webpacker before.

In Webpacker 5, the support for specifying multiple files per entry is added. We don't have to add any configuration to achieve it. We just have to create the multiple files per entry in the packs directory as applicable.

So in this case, we will create following files in the packs directory.

# app/javascript/packs

accounts.js
application.js
home.js
accounts.css
home.css

We also have to set the extract_css option as true in config/webpacker.yml.

The extract_css option tells webpack to generate a separate output file for CSS packs. This option is set to false in development environment so it needs to explicitly changed to true to generate the CSS bundles in development.

Once this is done, then the asset pre-compilation will generate the separate JavaScript and CSS bundles for home and accounts assets as follows.

{
  "accounts.css": "/packs/css/accounts-c5080fd3.css",
  "accounts.js": "/packs/js/accounts-a40e36aac42a1276f57d.js",
  "accounts.js.map": "/packs/js/accounts-a40e36aac42a1276f57d.js.map",
  "application.js": "/packs/js/application-81fbdc52ed23d5b18118.js",
  "application.js.map": "/packs/js/application-81fbdc52ed23d5b18118.js.map",
  "entrypoints": {
    "accounts": {
      "css": [
        "/packs/css/accounts-c5080fd3.css"
      ],
      "js": [
        "/packs/js/accounts-a40e36aac42a1276f57d.js"
      ],
      "js.map": [
        "/packs/js/accounts-a40e36aac42a1276f57d.js.map"
      ]
    },
    "application": {
      "js": [
        "/packs/js/application-81fbdc52ed23d5b18118.js"
      ],
      "js.map": [
        "/packs/js/application-81fbdc52ed23d5b18118.js.map"
      ]
    },
    "home": {
      "css": [
        "/packs/css/home-f7b12d47.css"
      ],
      "js": [
        "/packs/js/home-97c9afb755be496f3c2f.js"
      ],
      "js.map": [
        "/packs/js/home-97c9afb755be496f3c2f.js.map"
      ]
    }
  },
  "home.css": "/packs/css/home-f7b12d47.css",
  "home.js": "/packs/js/home-97c9afb755be496f3c2f.js",
  "home.js.map": "/packs/js/home-97c9afb755be496f3c2f.js.map"
}%

We can then use these bundles in the layout files as follows.

// app/views/layouts/home.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>YankNotifier</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'home', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'home' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Using Webpacker 5 in our Rails apps

Update the webpacker gem in the Gemfile.

gem 'webpacker', '~> 5.0'

We will also need to update the Webpacker node package as follows.

yarn upgrade @rails/webpacker --latest

Now we are ready to roll with Webpacker 5!

Want to stay current with Webpacker and Rails? Subscribe to my newsletter or follow me on Twitter.