A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.

---

Re.Pack is a next generation of Haul — a Webpack-based bundler for React Native applications.

Re.Pack uses Webpack 5 and React Native CLI's plugin system to allow you to bundle your application using Webpack and allow to easily switch from Metro.

Check the base webpack.config.js template, if you're curious how it all looks like.

Features

• Webpack ecosystem, plugins and utilities
• Build production bundle for iOS, Android and out-of-tree platforms
• Build development bundle for iOS, Android and out-of-tree platforms
• Development server with support for:
  • Remote JS debugging
  • Source Map symbolication
  • Hot Module Replacement and React Refresh
  • Reloading application from CLI using r key
• Built-in Hot Module Replacement + React Refresh support
• Flipper support:
  • Crash Reporter,
  • Application logs
  • Layout
  • Network
  • Hermes debugger
  • React DevTools
  • Development server (debugging/verbose) logs
• Hermes support:
  • Running the production/development bundle using Harmes engine
  • Transforming production bundle into bytecode bundle
  • Inspecting running Hermes engine with Flipper
• Code splitting (experimental):
  • Dynamic import() support with and without React.lazy() (recommended).
  • Manual chunks using entry option (only for advanced users).

Planned features

• ChunksToHermesBytecodePlugin plugin to automatically transform async chunks to bytecode format.
• webpack-init command
• Web dashboard / Flipper plugin with:
  • Logs
  • Compilations progress, errors and emitted assets
  • Bundle visualizations
• Module Federation support

Why & when

The main feature of Re.Pack is Webpack and its ecosystem of loaders, plugins and support for various features like symlinks, aliases etc. However, because Re.Pack is based on Webpack, it is targeted towards advanced users who already know how to use Webpack and want to leverage Webpack ecosystem.

If you're just starting with React Native, it's better to stick with the default solution — Metro, since you probably won't benefit much from switching to Webpack.

You can read more about design goals and comparisons here: About Re.Pack

Installation & setup

Compatibility with Webpack

On paper, Re.Pack should work with any version of Webpack 5, but we recommend to consult with the compatibility table below. The table represents versions of webpack for which Re.Pack is confirmed to work correctly.

If you don't see your version, give it a go. If it doesn't work, please open an issue.

webpack	@callstack/repack	@callstack/nativepack*
5.22.0		1.0.x, 1.1.x, 1.2.x
>=5.29.0	2.0.0-beta.x	1.2.x, 1.3.x, 1.4.x

* @callstack/repack is rebranded @callstack/nativepack - they are both the same project.

1. Install necessary dependencies:

npm i -D webpack terser-webpack-plugin babel-loader @callstack/repack
# or
yarn add -D webpack terser-webpack-plugin babel-loader @callstack/repack

2. Create react-native.config.js (if it doesn't exists) and paste the following content:

   module.exports = {
     commands: require('@callstack/repack/commands')
   };

3. Create webpack.config.js based on the template.
4. Configure XCode/Gradle to use webpack-bundle/webpack-start commands:
   • XCode: Add export BUNDLE_COMMAND=webpack-bundle to Bundle React Native code and images phase inside Build Phases in your project XCode config. The final phase should look similar to:

     export NODE_BINARY=node
     export BUNDLE_COMMAND=webpack-bundle
     ../node_modules/react-native/scripts/react-native-xcode.sh

   • Gradle: Add bundleCommand: "webpack-bundle" setting to project.ext.react inside android/app/build.gradle file, so it looks similar to:

     project.ext.react = [
         enableHermes: false,  // clean and rebuild if changing
         bundleCommand: "webpack-bundle",
         bundleInDebug: false
     ]

5. Now you can build your app for production or run development server with npx react-native webpack-start and develop your app.

Usage

Once you've completed Installation & setup you can:

• Build your application for production using XCode/Android Studio/Gradle/Fastlane or whichever tool you use.
• Develop your application by starting development server with npx react-native webpack-start.
• Create JavaScript bundle only by running npx react-native webpack-bundle.
• Create JavaScript bundle or start development server with Webpack CLI by running npx webpack-cli -c webpack.config.js.

Documentation

• API documentation
• Known issues & limitations
• Code splitting

Made with ❤️ at Callstack

@callstack/repack is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥