Webpacker 5.0 released
Tags: rails, webpacker
Published: 2020-03-26 12:02:30

---
title: Webpacker 5.0 released
published: true
date: 2020-03-25 17:52:54 UTC
tags: rails,webpacker
canonical_url: https://prathamesh.tech/2020/03/25/webpacker-5-0-released/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jrcjchl2tuz4vbvzycgu.jpg
---

Webpacker 5.0.1 was released [yesterday](https://github.com/rails/webpacker/releases/tag/v5.0.1). 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.

```sh
➜ 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](https://rubyonrails.org/maintenance/).

### 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](https://dev.to/prathamesh/mastering-packs-in-webpacker-116g) 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:


```js
# 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.

```js
# 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.

```js
{
  "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.

```erb
// 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`.

```sh
gem 'webpacker', '~> 5.0'
```

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

```sh
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](https://prathamesh.tech/mailing-list) or follow me on [Twitter](https://twitter.com/_cha1tanya).