React Native + Webpack (with babel6 and react-native v0.17)

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');
  const rnEntryPoint = require.resolve('react-native');

  return ReactPackager.getDependencies({
    assetRoots: [__dirname],
    blacklistRE: blacklist(false),
    projectRoots: [__dirname],
    transformModulePath: require.resolve('react-native/packager/transformer'),
  }, {
    entryFile: rnEntryPoint,
    dev: true,
    platform: 'ios',
  })
    .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',
      include: /src/,
      query: {
        presets: ['es2015', 'react', 'stage-0']
      }
    }]
  },
  output: {
    filename: '[name].js',
    libraryTarget: 'commonjs'
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: true
    })
  ],
  resolve: {
    extensions: [
      '',
      '.js',
      '.jsx'
    ]
  }
};

Can you publish this externals promise as a plugin/package or something? That way we don't have to constantly check this gist for updates?

Error: Cannot resolve module 'image'

I think you need something like this too: https://github.com/mjohnston/react-native-webpack-server/blob/1eb962f93c50fe497f9c0d96dfd2f1df54b48240/lib/Server.js#L23-L31

Should this adhere more towards how React Native Webpack Server function looks? Why does it look different, just for updates?

The static external function I linked to earlier in RNWS doesn't work with this

In other words - you need to patch your function here per this comment https://gist.github.com/pilwon/7a57624ddde9e6a3bd06#gistcomment-1431453 to support image!

Nevermind, that didn't work either...

Ah, it appears as of RN 0.14+ things changed https://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native/29381280#29381280 (you can't do image! anymore).

First of all, many thanks for sharing your experience on configuring react-native with webpack, this gist is really useful, thanks!

I'm looking for some advice since I'm currently starting a new project, and I'm still analyzing between going with:

• Webpack
• or ReactPackager (default setup)

The thing is that apart from how to setup both ones, I didn't find any post about the motivation of using Webpack over the default setup... Initially I thought it was related with Babel, but you can just place a .babelrc in the root of the project and configure it that way. Then I thought it was related with changing the path of the entry files, but that can be achieved modifying the respective Objective-C and Java files. So the question is:

What are the main benefits of using Webpack over the default setup?

I'd say if you don't care stick with the default. You can change when ever you need a feature React Packager does not support.
(switching to webpack on react web is super easy. only react-native has some issues. The excludes from this config solves those.)
@alexesDev: thank you, this config works perfectly after adapting it to my project.

Is there config support for React Native Android?