Skip to content
No description, website, or topics provided.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
clients
example
.gitignore
AssetsResolverPlugin.js
README.md
findProvidesModule.js
fixRequireIssuePlugin.js
index.js
package.json

README.md

Use webpack for react-native

Webpack have fully support for CommonJS, and provides much more features.

You can skip this README if you just want things work. Read sample and use the webpack.config.js and read package.json for dependencies.

We just need to do these:

Base configure

npm install webpack json-loader clean-webpack-plugin react-native-webpack --save
npm install webpack-dev-server --save-dev
global.__PLATFORM__ = process.env.RN_PLATFORM || 'ios';

module.exports = {
  context: __dirname,
  entry: {
    index: [
      'react-native-webpack/clients/polyfills.js',
      `./index.${__PLATFORM__}.js`,
    ],
  },
  output: {
    path: assetsPath,
    filename: `[name].${__PLATFORM__}.bundle`,
    chunkFilename: '[name].chunk.js',
    publicPath: '/',
  },
  devServer: {
    port: 8081,
    quiet: false,
    noInfo: true,
    lazy: true,
    filename: `[name].${__PLATFORM__}.bundle`,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
    },
    publicPath: '/',
    stats: { colors: true },
  },
};

Configure babel

Install dependencies:

npm install babel-loader babel-preset-react-native babel-plugin-syntax-trailing-function-commas babel-plugin-transform-flow-strip-types --save

You can configure babel-loader via query like:

const babelLoader = `babel?${JSON.stringify({
  presets: ['react-native'],                    // Use default babel-presets-react-native
  plugins: [
    'syntax-trailing-function-commas',          // Fix a extra comma in react-native
    'transform-flow-strip-types',               // Strip flow types in react-native source code. 
    require.resolve('react-native-webpack/fixRequireIssueLoader'),  // Fix a direct usage of require in react-native which caused issue.
  ],
})}`

module.exports = {
  //...other configures
  module: {
    loaders: [
      {
        // Enable babel for your code and libraries.
        test: /\.jsx?$/, loaders: [
          babelLoader,
        ]
      },
      { test: /\.json$/, loader: 'json-loader' },
    ],
  },
};

Support for @providesModule for specified modules

module.exports = {
  //...other configures
  resolve: {
    modulesDirectories: [
      'src',
      'node_modules',
    ],
    alias: findProvidesModule([
      // Find @providesModule in react-native
      path.resolve(process.cwd(), 'node_modules/react-native'),
      // You can find in event more modules like fbjs here. 
    ]),
    extensions: ['', `.${__PLATFORM__}.js`, '.js'],
  },
}

Support for assets require (require('./xxx.png')

module.exports = {
  //...other configures
  plugins: [
    new AssetsResolverPlugin(),
  ],
};

TODO:

  1. Bundle command for android/ios
  2. Support windows.
  3. Code Splitting(require.ensure) support
You can’t perform that action at this time.