Webpacker Basics

Webpacker is a wrapper around webpack, designed to make webpack easier to manage within a Rails application.^[65] The main thing Webpacker does is generate a webpack configuration using a set of inputs that is hopefully simpler to deal with than a full webpack configuration. It uses a YAML file, config/webpacker.yml, to specify a lot of webpack values, and specific environment overrides are in the config/webpack directory.

That basic configuration gives you the following features:

• Any file in app/packs/entrypoints with a known extension (usually a JavaScript or CSS extension) is the entry point of a new pack. The name of the pack is the base name of the file. If there are multiple files with the same base name but different extensions, they are combined into the same pack.

• Any file in app/packs can include any other file in app/packs relative to app/packs. Any file in node_modules can also be included.

• Resources in a pack can be added to a page by using the helper method javascript_pack_tag.

• CSS in a pack can be added to a page by using the helper method stylesheet_pack_tag.

• Static images can be used in a link or img tag with the asset_pack_path helper method.

• In development, Rails automatically calls webpack to compile code on a page load if the webpack files have changed. You can trigger this compilation manually by running a script named bin/webpack.

• A development server, bin/webpack-dev-server, can be run. This compiles webpack on page save, and live reloads the page if possible. When using webpack-dev-server, webpack assets aren’t saved to disk; they are served by the dev server.

• When deploying, the webpack compiler can be invoked to put your static files in the public directory where they can be read.

That’s a lot of things! Let’s, well, unpack them.