react-native-webpack-server
A development server that enables building React Native JavaScript bundles with Webpack, leveraging the existing webpack ecosystem.
What is react-native-webpack-server?
react-native-webpack-server is a development server that combines Webpack Dev Server and the React Native packager to build React Native JavaScript bundles using webpack. It enables developers to leverage the extensive webpack ecosystem, including plugins and loaders, while targeting React Native platforms, bridging the gap between React Native development and familiar web tooling.
React Native developers who are already familiar with webpack and want to use its plugin and loader ecosystem in their mobile projects, or those seeking enhanced development features like integrated source maps and hot module replacement.
Developers choose this over the standard React Native packager to utilize webpack's rich ecosystem for tasks like code splitting, custom transformations, and minification, while gaining improved debugging with combined source maps and a faster development workflow with hot module replacement.
Overview
Build React Native apps with Webpack
Use Cases
Best For
- Integrating webpack plugins and loaders into React Native projects for custom build processes.
- Debugging React Native applications with combined source maps from both React Native and application bundles.
- Enabling hot module replacement for React components during development to speed up iteration.
- Building React Native bundles with platform-specific entry points (e.g., index.ios.js, index.android.js) configured via webpack.
- Generating minified offline bundles for production releases using webpack's UglifyJsPlugin.
- Using existing webpack configurations and tooling in a React Native context without switching build systems.
Not Ideal For
- Projects using React Native 0.12 or higher that rely on hot module replacement for development speed, as it's broken per the README.
- Android-focused development teams needing full hot reload and debugger support, which is unavailable and explicitly noted.
- Teams seeking a low-maintenance, actively supported build tool without manual native code changes or complex setup steps.
Pros & Cons
Pros
Allows use of webpack plugins and loaders for custom build processes, enabling tasks like code splitting and minification beyond standard React Native tooling.
Generates and combines source maps from both React Native and application bundles, preserving debugging capabilities that are lost in other solutions, as highlighted in the README.
Supports hot reloading for React components via react-transform-hmr, speeding up development iterations when configured, though with limitations on newer RN versions.
Cons
The project is not actively maintained and is looking for a maintainer, leading to compatibility risks with newer React Native versions and unaddressed issues.
Hot module replacement does not work with React Native >=0.12 without workarounds, and Android lacks any HMR or debugger support, reducing its utility.
Requires modifying native code files like AppDelegate.m, using adb commands for Android, and careful webpack configuration, adding overhead compared to standard tools.
Frequently Asked Questions
Related Projects
reactotronA desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
react-native-code-pushReact Native module for CodePush
generator-rn-toolboxThe React Native Generator to bootstrap your apps
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.