Skip to main content
Version: 3x

Webpack config

One of Re.Pack key design goals was to give as much power and control to the developer — to you. This means that Re.Pack doesn't hide anything under its own proprietary configuration, but uses regular Webpack configuration.

Configuration path​

By default, when running react-native webpack-start or react-native webpack-bundle, Re.Pack will look for Webpack configuration in the following places:

  1. <root>/webpack.config.{mjs,cjs,js}
  2. <root>/.webpack/webpack.config.{mjs,cjs,js}
  3. <root>/.webpack/webpackfile

Where <root> is your project's root directory.

info

The paths above are the same ones that normal Webpack CLI looks for Webpack configuration.

tip

Notice that you can use .mjs, .cjs and .js extension for Webpack config file. When looking for configuration file, Re.Pack will first try .mjs, then .cjs and finally .js extensions. We recommend to use .mjs or .cjs to be explicit.

If you want to store Webpack config in different place, you can provide custom path:

  • react-native webpack-start --webpackConfig <path>
  • react-native webpack-bundle --webpackConfig <path>
  • webpack-cli -c <path>
info

If the <path> starts with ./ or ../, it will be treated as relative path - it will be resolved based on root directory detected by React Native CLI, which usually points to your project's root directory.

Webpack config template​

Every project is different, has different structure, uses different dependencies, has different requirements, so we cannot know what Webpack configuration your project might needs. Instead we give use a sensible and well-documented Webpack config template to use as a base and adjust some bits based on your project.

Please, refer to this document for templates.

We highly encourage to create recipes for adding or adjusting the support for other common use cases not included in the default template. We welcome any PR!

Re.Pack's config APIs​

To make Webpack-produced bundle compatible and runnable by React Native, Re.Pack gives you a set of Webpack plugins.

By default, all boring plugin configuration is abstracted behind a single RepackPlugin, which should suffice to most projects. However, in cause you need more control over the Re.Pack plugins, you can remove RepackPlugin and use plugins from plugins namespace:

warning

Not including required plugins will break your build or cause your app to crash at runtime!

Additionally, Re.Pack gives you few helper functions:

caution

It entirely possible not to use the functions above, but it's highly recommended to use them.