mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
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:
34
USAGE.md
34
USAGE.md
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user