#Configuration

Re.Pack uses the same configuration system as Rspack and webpack. This means you can leverage the extensive configuration options from either of the bundlers while working with React Native projects. Re.Pack comes with minimal, development & production-ready defaults that work out of the box, but as your project grows, you may need to customize various aspects of the bundling process.

#How to configure

Since Re.Pack is built on top of Rspack and webpack, you can refer to their respective documentation for available configuration options:

• Rspack documentation
• Webpack documentation

For example, if you want to configure output options for your bundles, you would look up these options in the Rspack output documentation or webpack output documentation and use them in the project config:

module.exports = {
  output: {
    filename: "index.bundle",
    chunkFilename: "[name].chunk.bundle",
  },
};

You can find all available options in the respective bundler's documentation. Most configuration options work the same way as they do in Rspack/webpack, with some React Native specific extensions that we'll cover later in this guide.

#Template configurations

Re.Pack ships with template configurations to help you get started. These templates provide sensible defaults and common configurations for both Rspack and webpack.

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import * as Repack from '@callstack/repack';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

/**
 * Rspack configuration enhanced with Re.Pack defaults for React Native.
 *
 * Learn about Rspack configuration: https://rspack.dev/config/
 * Learn about Re.Pack configuration: https://re-pack.dev/docs/guides/configuration
 */

export default {
  context: __dirname,
  entry: './index.js',
  resolve: {
    ...Repack.getResolveOptions(),
  },
  module: {
    rules: [
      ...Repack.getJsTransformRules(),
      ...Repack.getAssetTransformRules(),
    ],
  },
  plugins: [new Repack.RepackPlugin()],
};

#Configuration variants

Configuration can be defined in two ways: as a static object or as a function that returns a configuration object.

#Static configuration

The simplest form is a static object that defines your configuration:

const Repack = require("repack");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "index.bundle",
  },
  plugins: [new Repack.RepackPlugin()],
};

#Dynamic configuration

For more flexibility, you can export a function that returns the configuration object. This is useful when you need to:

• Configure an option based on the platform (e.g. ios or android)
• Enable or disable configuration based on the mode

const Repack = require("repack");

module.exports = function (env) {
  const { mode, platform } = env;

  return {
    mode,
    output: {
      path: path.resolve(__dirname, "build/generated", platform),
    },
    plugins: [new Repack.RepackPlugin()],
  };
};

The env argument is an object with the following properties:

#Configuration precedence

Re.Pack follows a specific order when resolving configuration values. When the same option is defined in multiple places, the value with higher precedence takes priority. Here's the precedence order from highest to lowest:

1. CLI flags (e.g. --mode production)
2. Project configuration (your rspack.config.js or webpack.config.js)
3. Command-specific configuration
4. Re.Pack defaults
5. Rspack/webpack defaults

For example, if you set the mode in your configuration file:

module.exports = {
  mode: "development",
};

But run the CLI with a different mode:

npx react-native bundle --mode production

The CLI flag (production) will take precedence over the configuration file value (development).

#Command-specific defaults

Below you can find the defaults for each command.

#start command

{
  mode: "development",
  devServer: {
    host: "localhost",
    port: 8081,
    hot: true,
    server: "http",
  },
}

#bundle command

{
  mode: "production",
  devServer: false,
  optimization: {
    minimize: true,
  },
}

#Re.Pack defaults

These are the base defaults that Re.Pack provides regardless of the command being run:

{
  devtool: "source-map",
  output: {
    clean: true,
    hashFunction: "xxhash64",
    filename: "index.bundle",
    chunkFilename: "[name].chunk.bundle",
    path: "[context]/build/generated/[platform]",
    publicPath: "noop:///",
  },
  optimization: {
    chunkIds: "named",
  },
}

#Configuration enhancements

Re.Pack extends the configuration system with few features to make things easier. These values will be resolved before passing the configuration to the bundler and starting the compilation.

#Output path

The output.path option supports the [platform] placeholder which gets replaced with the current platform value:

// Your configuration
output: {
  path: "build/generated/[platform]";
}

// When building for iOS, will be resolved to
output: {
  path: "build/generated/ios";
}

#DevServer host

The devServer.host option supports special values:

// Your configuration
devServer: {
  host: "local-ip",
}

// Will be resolved to
devServer: {
  host: "localhost",
}

#Resolve extensions

The resolve.extensions option supports the [platform] placeholder to enable platform-specific file resolution. This allows you to use platform-specific files like MyComponent.ios.js or MyComponent.android.js:

// Your configuration
resolve: {
  extensions: [".[platform].ts", ".[platform].js", ".ts", ".js"];
}

// When building for iOS, will be resolved to
resolve: {
  extensions: [".ios.ts", ".ios.js", ".ts", ".js"];
}