### Start command defaults
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Default configuration for the 'start' command.
```javascript
{
mode: "development",
devServer: {
host: "localhost",
port: 8081,
hot: true,
server: "http",
},
}
```
--------------------------------
### setup-code-signing.js
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/code-signing.md
Example of using the embedPublicKey function independently in a setup script.
```javascript
const { plugins } = require("@callstack/repack");
const result = plugins.embedPublicKey({
publicKeyPath: "./code-signing.pem.pub",
projectRoot: __dirname,
});
console.log("iOS:", result.ios);
console.log("Android:", result.android);
```
--------------------------------
### Usage Example
Source: https://github.com/callstack/repack/blob/main/tests/resolver-cases/README.md
Example of using setupTestEnvironment to resolve a platform-specific library.
```typescript
import { setupTestEnvironment } from "../test-helpers.js";
const { resolve } = await setupTestEnvironment(["platforms"], {
platform: "ios",
enablePackageExports: true,
});
const result = await resolve("platform-specific-lib");
expect(result).toBe("/node_modules/platform-specific-lib/index.ios.js");
```
--------------------------------
### Static configuration example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Example of a static configuration object for Rspack.
```js
const Repack = require("repack");
module.exports = {
entry: "./index.js",
output: {
filename: "index.bundle",
},
plugins: [new Repack.RepackPlugin()],
};
```
--------------------------------
### Installation
Source: https://github.com/callstack/repack/blob/main/packages/plugin-reanimated/README.md
Install the plugin using npm.
```sh
npm install -D @callstack/repack-plugin-reanimated
```
--------------------------------
### options.include example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/utils/get-flow-transform-rules.md
Example of how to specify modules to include for Flow transformation.
```javascript
{
include: [
// Include specific package
"react-native",
"react-native-vector-icons",
// Include all packages from a scope
"@react-native",
];
}
```
--------------------------------
### Rspack Configuration Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/loaders/flow-loader.md
Example of how to configure the flow-loader in rspack.config.cjs.
```javascript
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: "@callstack/repack/flow-loader",
options: { all: true },
},
type: "javascript/auto",
},
],
},
};
```
--------------------------------
### Rspack output configuration example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Example of configuring output options for Rspack bundles.
```js
module.exports = {
output: {
filename: "index.bundle",
chunkFilename: "[name].chunk.bundle",
},
};
```
--------------------------------
### Stats Summary Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/cli/bundle.mdx
Example of how to use the `--stats` and `--json` flags to store a summary of build statistics in a file.
```bash
npm run react-native bundle --stats summary --json ./stats.json
```
```bash
yarn react-native bundle --stats summary --json ./stats.json
```
```bash
pnpm react-native bundle --stats summary --json ./stats.json
```
```bash
bun react-native bundle --stats summary --json ./stats.json
```
--------------------------------
### rspack.config.mjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/dev-server.md
Example of adding a new GET route directly to the DevServer instance.
```javascript
export default {
devServer: {
setupMiddlewares: (middlewares, devServer) => {
devServer.get('/some/path', (_, response) => {
response.send('/some/path GET response');
});
return middlewares;
},
},
};
```
--------------------------------
### Rspack Configuration Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/loaders/babel-swc-loader.md
Example of how to configure BabelSwcLoader in rspack.config.mjs.
```javascript
export default {
module: {
rules: [
{
test: /\.[cm]?\[jt\]sx?$/,
type: "javascript/auto",
use: {
loader: "@callstack/repack/babel-swc-loader",
parallel: true,
options: {
lazyImports: true,
},
},
},
],
},
};
```
--------------------------------
### Install Dependencies (Rspack)
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/metro.mdx
Installs Rspack, SWC helpers, and Re.Pack dependencies.
```bash
install -D @rspack/core @swc/helpers @callstack/repack
```
--------------------------------
### Install Dependencies (webpack)
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/metro.mdx
Installs webpack, terser-webpack-plugin, and Re.Pack dependencies.
```bash
install -D webpack terser-webpack-plugin @callstack/repack
```
--------------------------------
### Install Repack using different package managers
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/cli/init.mdx
Command to install Re.Pack using npm, yarn, pnpm, or bun.
```bash
npx @callstack/repack-init
```
```bash
yarn dlx @callstack/repack-init
```
```bash
pnpm dlx @callstack/repack-init
```
```bash
bunx @callstack/repack-init
```
--------------------------------
### Silence Start Command Output
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/repack-v4.mdx
Example of silencing the output of the start command using shell redirection.
```bash
# Unix/macOS
npx react-native start > /dev/null 2>&1
# Windows
npx react-native start > nul 2>&1
```
--------------------------------
### Usage
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/cli/start.mdx
Run this command in the root of an existing React Native project with Re.Pack.
```bash
npm run react-native start
```
```bash
yarn react-native start
```
```bash
pnpm react-native start
```
```bash
bun react-native start
```
--------------------------------
### Install expo-constants
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/expo-modules.mdx
Installs the expo-constants package.
```bash
npm install expo-constants
yarn add expo-constants
```
--------------------------------
### Script.getFileSystemURL Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/runtime/script.md
Shows how to use Script.getFileSystemURL to load pre-bundled scripts from the filesystem.
```javascript
ScriptManager.shared.addResolver(async (scriptId) => {
// Load pre-bundled scripts from filesystem
return {
url: Script.getFileSystemURL(scriptId),
absolute: true,
};
});
```
--------------------------------
### rspack.config.mjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/dev-server.md
Example of customizing middleware setup in the DevServer to add custom middlewares and routes.
```javascript
export default {
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// Add custom middleware before built-ins
middlewares.unshift({
name: 'auth-middleware',
middleware: (req, res, next) => {
// Custom authentication logic
next();
},
});
// Add custom route
devServer.get('/health', async () => {
return { status: 'ok' };
});
return middlewares;
},
},
};
```
--------------------------------
### Install zephyr-repack-plugin
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/deploy.mdx
Install the zephyr-repack-plugin using your preferred package manager.
```bash
npm install zephyr-repack-plugin@latest
```
```bash
yarn add zephyr-repack-plugin@latest
```
```bash
pnpm add zephyr-repack-plugin@latest
```
```bash
bun add zephyr-repack-plugin@latest
```
--------------------------------
### Usage Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/runtime/script.md
Example of how to use Script methods within ScriptManager resolvers for development and production environments.
```javascript
import { Script, ScriptManager } from "@callstack/repack/client";
ScriptManager.shared.addResolver(async (scriptId, caller) => {
// Development: load from dev server
if (__DEV__) {
return {
url: Script.getDevServerURL(scriptId),
cache: false,
};
}
// Production: load from remote CDN
return {
url: Script.getRemoteURL(`https://mycdn.example/assets/${scriptId}`),
};
});
```
--------------------------------
### TypeScript Rspack configuration example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Example of a type-safe Rspack configuration using TypeScript and Re.Pack helpers.
```ts
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 Repack.defineRspackConfig({
context: __dirname,
entry: './index.js',
resolve: {
...Repack.getResolveOptions(),
},
module: {
rules: [
...Repack.getJsTransformRules(),
...Repack.getAssetTransformRules(),
],
},
plugins: [new Repack.RepackPlugin()],
});
```
--------------------------------
### Logger Configuration Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/repack.md
Example of configuring the logger options for the RepackPlugin, including console, file, and custom listener.
```javascript
new Repack.RepackPlugin({
logger: {
console: true,
file: "/absolute/path/to/logs/build.log",
listener: (log) => {
// Custom log processing
},
},
});
```
--------------------------------
### Script.getScriptUniqueId Examples
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/runtime/script.md
Examples demonstrating the usage of Script.getScriptUniqueId with and without a caller.
```javascript
// Without caller
Script.getScriptUniqueId("TeacherModule"); // "TeacherModule"
// With caller
Script.getScriptUniqueId("TeacherModule", "host"); // "host_TeacherModule"
```
--------------------------------
### index.js
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/code-signing.md
Example of using multiple public keys for different bundles.
```javascript
import { ScriptManager, Federated } from "@callstack/repack/client";
const containers = {
MiniApp: "https://cdn.example.com/[name][ext]",
};
ScriptManager.shared.addResolver(async (scriptId, caller) => {
const resolveURL = Federated.createURLResolver({ containers });
const url = resolveURL(scriptId, caller);
if (!url) {
return;
}
const metadata = await fetch(
`https://api.example.com/miniapps/${scriptId}/bundle-metadata`
).then((response) => response.json());
return {
url,
query: { platform: Platform.OS },
verifyScriptSignature: __DEV__ ? "off" : "strict",
publicKey: metadata.publicKey,
};
});
```
--------------------------------
### Rspack Configuration Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/loaders/babel-loader.md
Example of how to configure BabelLoader in rspack.config.mjs, including presets, plugins, and comments.
```javascript
export default {
module: {
rules: [
{
test: /\.[cm]?\[jt]sx?$/,
type: "javascript/auto",
use: {
loader: "@callstack/repack/babel-loader",
options: {
presets: ["module:@react-native/babel-preset"],
plugins: ["react-native-reanimated/plugin"],
comments: true
},
},
},
],
},
};
```
--------------------------------
### Loading a script
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/features/code-splitting.md
Example of how to load a script using ScriptManager.shared.loadScript.
```javascript
await ScriptManager.shared.loadScript("my-script");
console.log("Script loaded");
```
--------------------------------
### JSON Fixture Example
Source: https://github.com/callstack/repack/blob/main/tests/resolver-cases/README.md
Example of a JSON fixture defining package structure with exports.
```json
{
"package.json": {
"name": "my-package",
"exports": {
".": {
"react-native": "./native.js",
"default": "./web.js"
}
}
},
"files": ["native.js", "web.js"]
}
```
--------------------------------
### Example configuration
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/repack.md
An example of how to configure the `extraChunks` option in an `rspack.config.cjs` file.
```javascript
const Repack = require("@callstack/repack");
module.exports = {
plugins: [
new Repack.RepackPlugin({
extraChunks: [
{
// Make `my-chunk` local
include: /my-chunk/,
type: "local",
},
{
// Make any other chunk remote
exclude: /my-chunk/,
type: "remote",
outputPath,
},
],
}),
],
};
```
--------------------------------
### Install Dependencies
Source: https://github.com/callstack/repack/blob/main/packages/plugin-nativewind/README.md
Install the Re.Pack NativeWind plugin and its dependencies using npm.
```sh
npm install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer
```
--------------------------------
### Install CocoaPods dependencies
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/metro.mdx
Installs necessary iOS dependencies for Re.Pack, including the native module.
```bash
npx pod-install
```
--------------------------------
### Verify installation with expo-constants
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/expo-modules.mdx
Logs the expoConfig object to verify the installation.
```javascript
import Constants from 'expo-constants';
console.log(Constants.expoConfig);
```
--------------------------------
### RepackPlugin Optional Configuration
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/repack-v4.mdx
Example showing optional configuration properties for RepackPlugin.
```diff
plugins: [
new RepackPlugin({
- platform,
- output: {},
}),
]
```
--------------------------------
### Script.getDevServerURL Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/runtime/script.md
Demonstrates using Script.getDevServerURL to generate a development server URL.
```javascript
ScriptManager.shared.addResolver(async (scriptId) => {
if (__DEV__) {
return {
url: Script.getDevServerURL(scriptId),
cache: false,
};
}
});
```
--------------------------------
### index.js
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/code-signing.md
Example of enabling bundle verification by modifying the ScriptManager resolver.
```javascript
import { ScriptManager, Federated } from "@callstack/repack/client";
const containers = {
MiniApp: "http://localhost:9000/[name][ext]",
};
ScriptManager.shared.addResolver(async (scriptId, caller) => {
const resolveURL = Federated.createURLResolver({ containers });
const url = resolveURL(scriptId, caller);
if (url) {
return {
url,
query: { platform: Platform.OS },
verifyScriptSignature: __DEV__ ? "off" : "strict",
};
}
});
```
--------------------------------
### Install NativeWind Plugin and Dependencies
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/features/nativewind.mdx
Installs the Re.Pack NativeWind plugin and its required dependencies using npm or yarn.
```bash
npm install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer
# or
yarn add -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer
```
--------------------------------
### Assets Loader Configuration Simplification
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/repack-v4.mdx
Example of simplifying the assets-loader configuration.
```diff
{
test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS),
use: {
loader: '@callstack/repack/assets-loader',
- options: {
- platform,
- devServerEnabled: Boolean(devServer),
- scalableAssetExtensions: Repack.SCALABLE_ASSETS,
- },
},
}
```
--------------------------------
### Info.plist
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/code-signing.md
Example of how to add the public key to the iOS Info.plist file.
```xml
RepackPublicKey
```
--------------------------------
### Custom remote assetPath function example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/loaders/assets-loader.md
Example of how to configure a custom assetPath function for remote assets.
```javascript
{
remote: {
enabled: true,
publicPath: 'https://cdn.example.com',
assetPath: ({ resourceFilename }) => `assets/${resourceFilename}`
}
}
```
--------------------------------
### Host Configuration
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/module-federation-v1.mdx
Example ModuleFederationPluginV1 configuration for a host application.
```javascript
new Repack.plugins.ModuleFederationPluginV1({
name: "host",
shared: {
react: { singleton: true, eager: true },
"react-native": { singleton: true, eager: true },
},
});
```
--------------------------------
### rspack.config.cjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/module-federation-v1.mdx
Example configuration for Rspack using ModuleFederationPluginV1.
```javascript
const Repack = require("@callstack/repack");
module.exports = {
output: {
// set uniqueName explicitly to make HMR works
uniqueName: 'host',
},
plugins: [
new Repack.plugins.ModuleFederationPluginV1({
// options
}),
],
};
```
--------------------------------
### Host Configuration
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/module-federation-v2.mdx
Example configuration for a host application using ModuleFederationV2Plugin.
```javascript
new Repack.plugins.ModuleFederationPluginV2({
name: "host",
remotes: {
module1: "module1@http://example.com/module1.container.bundle",
},
shared: {
react: { singleton: true, eager: true },
"react-native": { singleton: true, eager: true },
},
});
```
--------------------------------
### rspack.config.cjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/module-federation-v2.mdx
Example configuration for ModuleFederationV2Plugin in rspack.config.cjs.
```javascript
const Repack = require("@callstack/repack");
module.exports = {
output: {
// set uniqueName explicitly to make HMR works
uniqueName: 'host',
},
plugins: [
new Repack.plugins.ModuleFederationPluginV2({
// options
}),
],
};
```
--------------------------------
### ScriptManager Resolver Example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/features/code-splitting.md
Example of how to add a resolver to ScriptManager to handle script resolution, differentiating between development and production environments.
```typescript
import { ScriptManager, Script } from "@callstack/repack/client";
ScriptManager.shared.addResolver(async (scriptId, caller) => {
// In dev mode, resolve script location to dev server.
if (__DEV__) {
return {
url: Script.getDevServerURL(scriptId),
cache: false,
};
}
return {
url: Script.getRemoteURL(
"http://somewhere-on-the-internet.com/${scriptId}"
),
};
});
```
--------------------------------
### rspack.config.cjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/loaders/assets-loader.md
Example configuration for rspack.config.cjs to use the AssetsLoader.
```javascript
const Repack = require("@callstack/repack");
module.exports = {
module: {
rules: [
{
test: Repack.getAssetExtensionsRegExp(),
use: "@callstack/repack/assets-loader",
},
],
},
};
```
--------------------------------
### strings.xml
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/code-signing.md
Example of how to add the public key to the Android strings.xml file.
```xml
```
--------------------------------
### RepackPlugin Configuration Removal
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/migration-guides/repack-v4.mdx
Example showing removed options from the RepackPlugin configuration.
```diff
plugins: [
new RepackPlugin({
- context,
- mode,
- sourceMaps,
- entryName,
- devServer,
output: {
- bundleFilename,
- sourceMapFilename,
- assetsPath,
}
}),
]
```
--------------------------------
### Adding a script resolver
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/features/code-splitting.md
Example of adding a resolver to ScriptManager to handle script loading.
```javascript
import { ScriptManager, Script } from "@callstack/repack/client";
ScriptManager.shared.addResolver(async (scriptId) => {
if (scriptId === "my-script") {
return {
url: Script.getRemoteURL("https://my-domain.dev/my-script.js", {
excludeExtension: true,
}),
};
}
});
```
--------------------------------
### Basic Usage
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/cli/bundle.mdx
Run this command in the root of an existing project to build the bundle.
```bash
npm run react-native bundle
```
```bash
yarn react-native bundle
```
```bash
pnpm react-native bundle
```
```bash
bun react-native bundle
```
--------------------------------
### rspack.config.mjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/utils/get-dirname.md
Example of using getDirname in an Rspack configuration file to get the context directory.
```javascript
import * as Repack from "@callstack/repack";
export default (env) => {
const { context = Repack.getDirname(import.meta.url) } = env;
return {
// ... config
};
};
```
--------------------------------
### Output Path Configuration
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Demonstrates how to use the `[platform]` placeholder in the `output.path` option to specify platform-specific build directories.
```javascript
// Your configuration
output: {
path: "build/generated/[platform]";
}
// When building for iOS, will be resolved to
output: {
path: "build/generated/ios";
}
```
--------------------------------
### Configuration precedence example: CLI flag vs. config file
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Demonstrates how a CLI flag takes precedence over a configuration file setting.
```javascript
module.exports = {
mode: "development",
};
```
--------------------------------
### options.exclude example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/utils/get-flow-transform-rules.md
Example of how to specify modules to exclude from Flow transformation.
```javascript
{
exclude: [
// Exclude specific package
"react-native-vector-icons",
// Exclude all packages from a scope
"@react-native-community",
];
}
```
--------------------------------
### Dynamic configuration example
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Export a function that returns the configuration object for dynamic configuration based on environment variables like mode or platform.
```javascript
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()],
};
};
```
--------------------------------
### CLI command example for precedence
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Shows a CLI command that overrides the mode set in the configuration file.
```bash
npx react-native bundle --mode production
```
--------------------------------
### Install Expo package
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/expo-modules.mdx
Installs the Expo package in your project.
```bash
npm install expo
yarn add expo
```
--------------------------------
### rspack.config.mjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/dev-server.md
Example demonstrating how to add middleware to the DevServer using unshift() or push() to control execution order.
```javascript
export default {
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// add before every other middleware
middlewares.unshift({
name: 'first-in-array',
path: '/foo/path',
middleware: (req, res) => {
res.send('Foo!');
},
});
// add after every other middleware
middlewares.push({
name: 'hello-world-test-one',
path: '/foo/bar',
middleware: (req, res) => {
res.send('Foo Bar!');
},
});
return middlewares;
},
},
};
```
--------------------------------
### Installation
Source: https://github.com/callstack/repack/blob/main/packages/plugin-expo-modules/README.md
Install the @callstack/repack-plugin-expo-modules package as a development dependency.
```sh
npm install -D @callstack/repack-plugin-expo-modules
```
--------------------------------
### Wrap build configuration with the plugin
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/deploy.mdx
Wrap your build configuration with the `withZephyr` function provided by the plugin.
```javascript
const { withZephyr } = require('zephyr-repack-plugin');
module.exports = withZephyr({
// your build configuration
});
```
--------------------------------
### Bundle command defaults
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/configuration.mdx
Default configuration for the 'bundle' command.
```javascript
{
mode: "production",
devServer: false,
optimization: {
minimize: true,
},
}
```
--------------------------------
### Install Rsdoctor plugin for webpack
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/bundle-analysis.mdx
Installs the Rsdoctor plugin for webpack using different package managers.
```bash
npm install @rsdoctor/webpack-plugin -D
```
```bash
yarn add @rsdoctor/webpack-plugin -D
```
```bash
pnpm add @rsdoctor/webpack-plugin -D
```
```bash
bun add @rsdoctor/webpack-plugin -D
```
--------------------------------
### Install Re.Pack Expo Modules plugin
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/expo-modules.mdx
Installs the official Re.Pack Expo Modules plugin.
```bash
npm install -D @callstack/repack-plugin-expo-modules
yarn add -D @callstack/repack-plugin-expo-modules
```
--------------------------------
### Creating key pair
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/plugins/code-signing.md
Commands to generate a private and public key pair for code signing.
```bash
ssh-keygen -t rsa -b 4096 -m PEM -f code-signing.pem
openssl rsa -in code-signing.pem -pubout -outform PEM -out code-signing.pem.pub
```
--------------------------------
### Install Rsdoctor plugin for Rspack
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/guides/bundle-analysis.mdx
Installs the Rsdoctor plugin for Rspack using different package managers.
```bash
npm install @rsdoctor/rspack-plugin -D
```
```bash
yarn add @rsdoctor/rspack-plugin -D
```
```bash
pnpm add @rsdoctor/rspack-plugin -D
```
```bash
bun add @rsdoctor/rspack-plugin -D
```
--------------------------------
### Execution flow of webpack-start command
Source: https://github.com/callstack/repack/blob/main/ARCHITECTURE.md
This diagram shows the execution flow when running the development server via the webpack-start command, detailing the sequence of operations from the Reporter down to the DevServer.
```text
└── Reporter
└── DevServerProxy
└──
└── Reporter (format: json)
└── LoggerPlugin
├──
├── compilation.hooks.log
└── compiler.hooks.infrastructureLog
└── DevServerPlugin
└── DevServer
```
--------------------------------
### Versioning with Remote Config
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/features/code-splitting.md
Example of how to implement versioning for remote scripts by dynamically updating the URL based on a version number fetched from a remote configuration.
```javascript
import { ScriptManager, Script } from "@callstack/repack/client";
ScriptManager.shared.setStorage(AsyncStorage);
ScriptManager.shared.addResolver(async (scriptId) => {
const { version } = await getRemoteConfig();
return {
url: Script.getRemoteURL(`http://my-domain.dev/v${version}/${scriptId}`),
};
});
```
--------------------------------
### rspack.config.cjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/utils/get-codegen-transform-rules.md
Example usage of getCodegenTransformRules in rspack.config.cjs
```javascript
const Repack = require("@callstack/repack");
module.exports = {
module: {
rules: [...Repack.getCodegenTransformRules()],
},
};
```
--------------------------------
### rspack.config.cjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/utils/get-js-transform-rules.md
Example usage of getJsTransformRules in Rspack configuration.
```javascript
const Repack = require("@callstack/repack");
module.exports = {
module: {
rules: [
...Repack.getJsTransformRules({
swc: {
jsxRuntime: "automatic",
externalHelpers: true,
},
flow: {
enabled: true,
include: ["react-native"],
},
codegen: {
enabled: true,
},
}),
],
},
};
```
--------------------------------
### Advanced Code Splitting Configuration
Source: https://github.com/callstack/repack/blob/main/website/src/latest/docs/features/code-splitting.md
This example demonstrates how to mix local and remote chunk types using 'test', 'include', and 'exclude' properties for advanced code splitting strategies.
```javascript
/* ... */
export default (env) => {
/* ... */
return {
/* ... */
plugins: [
new Repack.RepackPlugin({
/* ... */
extraChunks: [
{
// Make all student related chunks local.
include: ["student", /^student-.+$/],
type: "local",
},
{
// Anything not student related should be remote and stored under
// `/build/output//remotes/core`.
exclude: /^student-.+$/,
type: "remote",
outputPath: path.join("build/output", platform, "remotes/core"),
},
{
// All teacher related chunks should be remote and stored under
// `/build/output//remotes/teacher`.
test: /^teacher.*$/,
type: "remote",
outputPath: path.join("build/output", platform, "remotes/teacher"),
},
],
}),
],
};
};
```
--------------------------------
### rspack.config.cjs
Source: https://github.com/callstack/repack/blob/main/website/src/latest/api/loaders/react-refresh-loader.md
Example configuration for integrating the ReactRefreshLoader into Rspack.
```javascript
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
include: [/node_modules\/react-native/],
use: {
loader: "@callstack/repack/react-refresh-loader",
},
},
],
},
};
```