Skip to content

Instantly share code, notes, and snippets.

@alexesDev
Last active February 13, 2024 07:35
Show Gist options
  • Save alexesDev/071f8935c82ca87a5b46 to your computer and use it in GitHub Desktop.
Save alexesDev/071f8935c82ca87a5b46 to your computer and use it in GitHub Desktop.
React Native + Webpack (with babel6 and react-native v0.17)
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'
]
}
};
@niftylettuce
Copy link

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?

@niftylettuce
Copy link

Error: Cannot resolve module 'image'

@niftylettuce
Copy link

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

@niftylettuce
Copy link

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

@niftylettuce
Copy link

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

@niftylettuce
Copy link

Nevermind, that didn't work either...

@niftylettuce
Copy link

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).

@mgtitimoli
Copy link

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?

@ThaJay
Copy link

ThaJay commented Mar 1, 2016

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.

@dickeylth
Copy link

Is there config support for React Native Android?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment