{"id":20160587,"url":"https://github.com/reactnativecn/react-native-webpack","last_synced_at":"2025-04-10T00:10:49.841Z","repository":{"id":57341460,"uuid":"70024268","full_name":"reactnativecn/react-native-webpack","owner":"reactnativecn","description":null,"archived":false,"fork":false,"pushed_at":"2018-08-27T04:13:31.000Z","size":7,"stargazers_count":28,"open_issues_count":3,"forks_count":7,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-10T00:10:43.588Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactnativecn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-05T02:29:27.000Z","updated_at":"2023-11-20T01:53:14.000Z","dependencies_parsed_at":"2022-09-14T04:30:59.648Z","dependency_job_id":null,"html_url":"https://github.com/reactnativecn/react-native-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactnativecn%2Freact-native-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactnativecn","download_url":"https://codeload.github.com/reactnativecn/react-native-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131317,"owners_count":21052819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T00:14:49.777Z","updated_at":"2025-04-10T00:10:49.799Z","avatar_url":"https://github.com/reactnativecn.png","language":"JavaScript","readme":"# Use webpack for react-native\n\nWebpack have fully support for CommonJS, and provides much more features.\n\nYou can skip this README if you just want things work. Read [sample](./example) and use the webpack.config.js and read package.json for dependencies. \n\nWe just need to do these:\n\n## Base configure\n\n```bash\nnpm install webpack json-loader clean-webpack-plugin react-native-webpack --save\nnpm install webpack-dev-server --save-dev\n```\n\n```javascript\nglobal.__PLATFORM__ = process.env.RN_PLATFORM || 'ios';\n\nmodule.exports = {\n  context: __dirname,\n  entry: {\n    index: [\n      'react-native-webpack/clients/polyfills.js',\n      `./index.${__PLATFORM__}.js`,\n    ],\n  },\n  output: {\n    path: assetsPath,\n    filename: `[name].${__PLATFORM__}.bundle`,\n    chunkFilename: '[name].chunk.js',\n    publicPath: '/',\n  },\n  devServer: {\n    port: 8081,\n    quiet: false,\n    noInfo: true,\n    lazy: true,\n    filename: `[name].${__PLATFORM__}.bundle`,\n    watchOptions: {\n      aggregateTimeout: 300,\n      poll: 1000,\n    },\n    publicPath: '/',\n    stats: { colors: true },\n  },\n};\n```\n\n## Configure babel\n\nInstall dependencies: \n\n```bash\nnpm install babel-loader babel-preset-react-native babel-plugin-syntax-trailing-function-commas babel-plugin-transform-flow-strip-types --save\n```\n\nYou can configure babel-loader via query like:  \n\n```javascript\nconst babelLoader = `babel?${JSON.stringify({\n  presets: ['react-native'],                    // Use default babel-presets-react-native\n  plugins: [\n    'syntax-trailing-function-commas',          // Fix a extra comma in react-native\n    'transform-flow-strip-types',               // Strip flow types in react-native source code. \n    require.resolve('react-native-webpack/fixRequireIssueLoader'),  // Fix a direct usage of require in react-native which caused issue.\n  ],\n})}`\n\nmodule.exports = {\n  //...other configures\n  module: {\n    loaders: [\n      {\n        // Enable babel for your code and libraries.\n        test: /\\.jsx?$/, loaders: [\n          babelLoader,\n        ]\n      },\n      { test: /\\.json$/, loader: 'json-loader' },\n    ],\n  },\n};\n```\n\n## Support for @providesModule for specified modules\n\n```javascript\nmodule.exports = {\n  //...other configures\n  resolve: {\n    modulesDirectories: [\n      'src',\n      'node_modules',\n    ],\n    alias: findProvidesModule([\n      // Find @providesModule in react-native\n      path.resolve(process.cwd(), 'node_modules/react-native'),\n      // You can find in event more modules like fbjs here. \n    ]),\n    extensions: ['', `.${__PLATFORM__}.js`, '.js'],\n  },\n}\n```\n\n## Support for assets require (require('./xxx.png')\n\n```javascript\nmodule.exports = {\n  //...other configures\n  plugins: [\n    new AssetsResolverPlugin(),\n  ],\n};\n```\n\n## TODO:\n\n1. Bundle command for android/ios\n2. Support windows. \n3. Code Splitting(require.ensure) support\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactnativecn%2Freact-native-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactnativecn%2Freact-native-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactnativecn%2Freact-native-webpack/lists"}