docs: introduce about webpack and metro bundler (#2434)

# 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`
This commit is contained in:
Bohdan Artiukhov
2024-09-04 09:39:56 +02:00
committed by GitHub
parent fbc66311a9
commit 38b16f968a

View File

@@ -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