Struggling to get webpack to do what you want?

Terrified of making changes to your config?

Does the thought of migrating from Sprockets to Webpacker make you want to cry?

Frontend development with Rails these days is hard.

Why is this so difficult?

Modular JavaScript is a dramatic shift in how we write and compile code. Sure, life with the Rails asset pipeline was much simpler. With webpack, we cannot rely on global code execution by default as before.

Webpack configuration lacks the developer friendliness we know and love in Rails. It's no secret, webpack is a capricious beast. Webpacker aims to reduce the overhead in getting up-and-running with webpack, but there's still some basics you're forced to learn.

The JS community moves at a fast pace making it difficult to keep up. Babel, PostCSS, browserlist, React, Vue, Angular, Stimulus, webpack, node modules, NPM, yarn, argggghhhhh!!!

There's a lack of information for Rails developers—there's (currently) no official Rails guide for Webpacker! No fear, I'm here to help fill the gap.

The migration from Sprockets to Webpacker is one of the most challenging upgrades in the history of Rails, even for experienced Rails developers.
It doesn't have to be this way.

Coming Soon! The Webpacker Course

My name is Ross Kaffenberger. I've been building web apps with JavaScript and Rails since 2007. Recently, I've spent a lot of time helping teams transition their Rails apps to the latest tools like React, Vue, and webpack.

I'm putting together resources to help Rails developers master modern frontend development with Rails, starting with The Webpacker Course.

Be the first to know about the upcoming launch

Spend less time struggling with modern JavaScript in your Rails app. Subscribe for tips, techniques, and know-how.

    Install and upgrade Webpacker

    Learn how to hook up your Rails app with both the Webpacker gem and the NPM package.

    Organize your code

    Managing your source code works a little differently in Webpacker than with the Rails asset pipeline. Make sure you don't make common mistakes like "overpacking."

    Write with tomorrow's JavaScript syntax today

    Babel? Browserlist? Webpacker supports transpiling from the latest EcmaScript syntax to legacy formats your supported browsers will understand. Learn how it all works.

    Import and export JavaScript modules

    DHH has stated the "ship has sailed" on Sprockets support for JavaScript modules. With webpack, modules are the default. Understand how it works and what it means for your source code.

    Use Webpacker for CSS and images

    Yes, you can! The developer experience is still a work-in-progress, but it doesn't have to be overwhelming. Learn a few basic tips will help clear up the confusion.

    Debug the compiled output

    With webpack and the full-power of the vast JS community, we have access to advanced tools to help visualize what's going on inside your JavaScript bundles.

    Deploy Webpacker-compiled assets

    Make your hard-earned source code available to your users in production.

    Migrate to Sprockets gracefully

    Moving your source code to Webpacker doesn't have to be a superhuman effort. Save time and resources with my migration guide.

    Optimize your webpack bundles

    There's no need to compile and ship massive JavaScript bundles to your users. My Webpacker Packing Checklist will provide the guide rails you need to optimize for production.

    Can't wait? This site has a ton of free content to help you get started.

    Why upgrade?

    25 reasons to switch to Webpack(er)

    There are plenty of great reasons to switch to Webpacker, including improvements in supported syntax, development tooling, performance optimizations, and more. For Rails developers considering the upgrade from the Rails asset pipeline, start here.

    Deep dives

    These Rails apps are overpacking their JavaScript bundles

    A case study of Rails applications making a common Webpacker mistake of rendering modules multiple times on a single page. We'll describe why the problem happens and present a Webpacker Packing Checklist for proper code-splitting.

    A visual guide to Webpacker

    Navigate the world of Webpacker and webpack on Rails with confidence using this collection of mental maps I put together.

    The missing guide

    How to customize webpack in Rails apps

    Configuring webpack is precisely the main job of Webpacker's NPM package, @rails/webpacker. This post provides an overview of how to customize its default settings for your Rails application.

    Understanding webpacker.yml

    Configuring Webpacker can be a daunting task. In this guide, we will take a look at the options provided via the webpacker.yml file and supported environment variable overrides.

    A guide to NPM version constraints for Rubyists

    A reference guide to NPM version constraints for dependencies declared in the package.json file of a Rails project from the perspective of a Ruby developer familiar with similar conventions used to specify Ruby dependencies in a Gemfile.

    Importing images with Webpacker

    Using images bundled by webpack can get confusing. 'How to reference images from JavaScript? from CSS? from Rails ERB templates? This post will demonstrate.

    Webpacker WTFs

    Why does Rails 6 include both Webpacker and Sprockets?

    A new Rails 6 application will install both Webpacker and Sprockets by default. Don't they solve the same problem? This article dives into why Sprockets lives on even though webpack has surpassed most of its features and why you might want to choose one over the other.

    jQuery plugins in webpack without jQuery

    Upgrading jQuery plugins to work with webpack is a common source of confusion. If you're lucky, you may find they can work in either context such that you might not need jQuery at all.

    3 ways webpack surprises web developers

    When I first started working with webpack, I was in for a few surprises. I assumed how things should behave, based on my previous experience with the Rails asset pipeline, only to learn through experience how I was wrong.

    Overpacking: A common Webpacker mistake

    A big issue that comes up with Webpacker is "where to put the JavaScript files". This post demonstrates proper use of entry point files, called packs, with Webpacker and Rails and will help developers avoid a common gotcha.

    Debugging tips

    The webpack plugin I can't live without

    In this post, we'll take a look at installing and using the webpack-bundle-analyzer, perhaps the most invaluable webpack plugin, to analyze and debug the output of the webpack build in a Rails project configured to use Webpacker.

    How to debug webpack on Rails

    Understanding your Rails webpack configuration and build output can be a little confusing, especially if you're new to either Rails or webpack. This post contains a few tips for debugging your Webpacker setup, some specific to Rails Webpacker, some generally applicable to webpack.

    Be the first to know about the upcoming launch

    Spend less time struggling with modern JavaScript in your Rails app. Subscribe for tips, techniques, and know-how.