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'
]
}
};
@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