-
-
Save alexesDev/071f8935c82ca87a5b46 to your computer and use it in GitHub Desktop.
| 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' | |
| ] | |
| } | |
| }; |
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?
Nevermind, that didn't work either...