DEV Community

Cover image for Webpacker 6: Upgrade Guide
Andrew Mason
Andrew Mason

Posted on • Updated on • Originally published at andrewm.codes

Webpacker 6: Upgrade Guide

This page has changed since first posted, refer to the changelog at the bottom.

In this article, we will walkthrough how to upgrade to the latest version of Webpacker, which is, at the time of writing, 6.0.0.beta.2.

Our upgrade process will begin with updating the Webpacker libraries, then we will update our configs and templates, and end up verifying that our new setup is working.

Let’s get started!

Updating our Gemfile

Update the gem in your Gemfile:

# Gemfile

- gem 'webpacker', '~> 5.0'
+ gem 'webpacker', '~> 6.0.0.beta.2'
Enter fullscreen mode Exit fullscreen mode

Next, run bundle install to install the new gem version. If all goes well, you should see Using webpacker 6.0.0.beta.2 (was 5.2.1) in the install output.

Installing in our Application

Run the installation command, bin/rails webpacker:install, to generate the required configuration files, as well as update our package.json

Update Document Head

Lastly, let's update app/views/layouts/application.html.erb. The docs for Webpacker v6 recommend using the javascript_packs_with_chunks_tag tag.

<%# app/views/layouts/application.html.erb %>

- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
- <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

Verify Installation

Run the Rails server (bin/rails s) and the Webpack Dev Server (bin/webpack-dev-server) via your preferred method. Two terminal tabs will work or create a Procfile and run via overmind or foreman. The Rails server will also compile your assets if the dev server is not running, but this is much slower vs running separate processes and not recommended.

Visit http://localhost:3000 in your browser. If all's well, you should see the contents of app/views/pages/home.html.erb.

We can verify our JavaScript is getting loaded by adding the following to app/javascript/packs/application.js:

// app/javascript/packs/application.js

console.log('Hello from Webpacker!')
Enter fullscreen mode Exit fullscreen mode

Open the browser console and reload the page and you should see the message we added:

[Log] Hello from Webpacker! (application-7fbebc85af7886af0a64.js, line 62)
Enter fullscreen mode Exit fullscreen mode

Summary

Congrats! You’re up and running with Webpacker 6!

Unfortunately you will quickly realize that your upgrade is not finished if you begin developing like you usually would with Webpacker.

Webpacker 6 requires you to add the appropriate Webpack loaders yourself, which is a breaking change from previous versions.

We will tackle that in the next article!

Changelog

Discussion (2)

Collapse
spaquet profile image
Stéphane PAQUET

as part of the web packer 6 rc1 javascript_packs_with_chunks_tag is deprecated and javascript_pack_tag must be used.

Collapse
boriscy profile image
Boris Barroso

Thanks for this one