Re.Pack - bringing Webpack to React Native

Re.Pack is the successor to Callstack’s Haul and connects Webpack to React Native. It adapts Webpack’s output for React Native and supports tools such as Hermes, Flipper, and React Refresh. Pavel describes it as a toolkit that works with Webpack, rather than a bundler competing directly with Metro.

Haul maintained its own configuration format on top of Webpack, adding documentation and support work while routing Webpack problems to Haul’s issue tracker. That architecture also made newer features such as React Refresh difficult to implement, especially alongside RAM bundle support. Re.Pack instead gives developers control of their Webpack configuration, builds on Webpack 5, and deliberately leaves out RAM bundles.

Pavel says Re.Pack supports Metro’s React Native features and adds code splitting through asynchronous chunks. This can help apps with symlinks or Git submodules, modular products that load features for specific users, and super apps that download mini apps on demand. Loading less code at startup may improve time to interactive or time to render, though the team had not yet benchmarked those gains.

Pavel describes Module Federation as a future way for teams to build bundles independently and combine them into a React Native app, or serve bundles for a host app to download. He distinguishes this from CodePush: CodePush replaces the app’s bundle for a later restart, while Re.Pack’s code splitting can load functionality into an already running app. One example is downloading teacher features only when a teacher logs in.

At the time of the episode, Re.Pack was available on GitHub and npm, with feature parity with Metro except for RAM bundles. Basic asynchronous chunks were supported, with limitations described in the README. The team planned to improve chunk storage and management, then focus on Module Federation.