React Native + Webpack https://github.com/facebook/react-native/issues/395#issuecomment-87294565

README.md

Usage

1. npm install babel-loader imports-loader webpack --save
2. Create webpack.config.js
3. Move index.ios.js to src/index.ios.jsx
4. webpack --watch

Example

src/index.ios.jsx

import { AppRegistry } from 'react-native';

import App from './App';

AppRegistry.registerComponent('StockPad', () => App);

src/App.jsx

import React, { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'right',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default class extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
};

webpack.config.js

var path = require('path');

var webpack = require('webpack');

var reactNativeExternalsPromise = (function () {
  var reactNativeRoot = path.dirname(require.resolve('react-native/package'));
  var blacklist = require('react-native/packager/blacklist');
  var ReactPackager = require('react-native/packager/react-packager');
  var reactNativePackage = require('react-native/package');

  return ReactPackager.getDependencies({
    assetRoots: [reactNativeRoot],
    blacklistRE: blacklist(false),
    projectRoots: [reactNativeRoot],
    transformModulePath: require.resolve('react-native/packager/transformer')
  }, reactNativePackage.main)
    .then(function (dependencies) {
      return dependencies.filter(function (dependency) {
        return !dependency.isPolyfill;
      });
    })
    .then(function (dependencies) {
      return dependencies.map(function (dependency) {
        return dependency.id;
      });
    });
}());

module.exports = {
  debug: true,
  entry: {
    'index.ios': path.join(__dirname, 'src/index.ios')
  },
  externals: [
    function (context, request, cb) {
      reactNativeExternalsPromise.then(function (reactNativeExternals) {
        if (['react-native'].concat(reactNativeExternals).indexOf(request) != -1) {
          cb(null, request);
        } else{
          cb();
        }
      });
    }
  ],
  module: {
    loaders: [
      {test: /\.js$/, loader: 'babel?blacklist[]=react', exclude: /node_modules\//},
      {test: /\.jsx$/, loader: 'imports?React=react-native!babel'},
    ]
  },
  output: {
    filename: '[name].js',
    libraryTarget: 'commonjs'
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: true
    })
  ],
  resolve: {
    extensions: [
      '',
      '.js',
      '.jsx'
    ]
  }
};

Thanks a lot for this!

I'd add that to include static images (require('image!Asset')), using something like this in the webpack config should do the trick:

if (['react-native'].concat(reactNativeExternals).indexOf(request) !== -1 || request.indexOf('image!') === 0) {
  cb(null, request);
} else {
  cb();
}

Also, not sure imports?React=react-native is needed -- if each module properly declares import React from 'react-native', then that by itself is translated as var React = __webpack_require__(1);. No need to also have var React = require('react-native'); (generated by the imports loader).

New config for Babel 6 and react-native 0.17
https://gist.github.com/alexesDev/071f8935c82ca87a5b46

I am trying to use browserified / webpack bundled file bundled.js in react native,

It works in development/debug mode due to chrome's V8 engine.
But fails to work when .apk or .ipa file is created from react-native due to JSCore engine compiler.

version- React-native 0.59

How can we run a core node module in React Native ?