Webpacker

Forem has two JavaScript codebases.

One contains plain JavaScript, which you can read more about in this guide.

The other one is managed by Webpacker, and it's located inside /app/javascript, written using ES6+.

Currently, it's mainly used for Preact components, served via webpack which is integrated into the Rails app using Webpacker.

There is a packs directory /app/javascript/packs where you can create new "pack" files. Pack files are initializers for Webpacker.

Since Forem is not a Single Page Application (SPA), Preact components are mounted as needed by including the pack file in the view files.

For example:

<%= javascript_packs_with_chunks_tag "webShare", defer: true %>

The include statement corresponds to the pack app/javascript/packs/webShare.js

If you have more than one webpacker pack on the page, you need to include it in the same javascript_packs_with_chunks_tag call. The reason being is it avoids loading split chunks multiple times.

<%= javascript_packs_with_chunks_tag "webShare", "someOtherPack", defer: true %>

Webpack aliases

The project uses webpack aliases. The aliases used in the project can be found under alias in https://github.com/forem/forem/blob/main/config/webpack/environment.js

Additional Resources

For more information in regards to javascript_packs_with_chunks_tag, see https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb

Aside from the Webpacker repository, see also Ross Kaffenberger's visual guide to Webpacker.

If you're interested in bundles sizes and what's contained within them for a production build, run bin/bundleAnalyzer from the command line.