Skip to content

Commit

Permalink
docs: introduce about webpack and metro bundler (#2434)
Browse files Browse the repository at this point in the history
# Summary
Short explanation on how to configure the webpack bundler and a brief
rationale on why it's preferable to use the Metro bundler.

## Checklist
- [x] I added documentation in `README.md`
  • Loading branch information
bohdanprog authored Sep 4, 2024
1 parent fbc6631 commit 38b16f9
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions USAGE.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,40 @@ export default () => {
);
};
```
# Web configuration

## Metro bundler
No additional steps are required when using Metro bundler.

## Webpack
If you are using the Webpack bundler, the following steps are needed:

- Install `@react-native/assets-registry/registry` as a project dependency.
- Ensure that you have the proper configuration to parse flow files from `@react-native/assets-registry/registry`.
- Configure the Webpack `module -> rules` section and include an important rule for `node_modules/@react-native/assets-registry/registry`.

webpack.config.js
```ts
const babelLoaderConfiguration = {
include: [
path.resolve(
appDirectory,
// Important!
'node_modules/@react-native/assets-registry/registry',
),
],
...
};

module.exports = {
...config,
module: {
rules: [babelLoaderConfiguration],
},
};
```

For more details on the complete Webpack configuration, you can refer to this [documentation](https://necolas.github.io/react-native-web/docs/multi-platform/#compiling-and-bundling) on how to set up a `webpack.config` file for React Native Web.

# Use with svg files

Expand Down

0 comments on commit 38b16f9

Please sign in to comment.