Webpacker 6: Upgrade Guide
Published Dec 23rd, 2020
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,
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!
Update the gem in your
# Gemfile - gem 'webpacker', '~> 5.0' + gem 'webpacker', '~> 6.0.0.beta.2'
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
Update Document Head
Lastly, let’s update
app/views/layouts/application.html.erb. The docs for Webpacker v6 recommend using the
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.
http://localhost:3000 in your browser. If all’s well, you should see the contents of
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)
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!
Thanks for reading! You can discuss this post using one of the links below. Additionally, it would mean a lot if you shared this post with others!
Minimalist Habit Tracker Template for Obsidian
May 12th, 2022 - 2 min read
My Twitter Avatar
May 4th, 2022 - 1 min read