{"id":15493249,"url":"https://github.com/kotarella1110/cordova-plugin-webpack","last_synced_at":"2025-04-13T12:11:50.793Z","repository":{"id":32382593,"uuid":"131259683","full_name":"kotarella1110/cordova-plugin-webpack","owner":"kotarella1110","description":"Integrate webpack into your Cordova workflow.","archived":false,"fork":false,"pushed_at":"2023-01-05T16:14:43.000Z","size":30472,"stargazers_count":62,"open_issues_count":37,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T12:11:43.900Z","etag":null,"topics":["cordova","cordova-android","cordova-browser","cordova-ios","cordova-plugin","webpack","webpack4"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/cordova-plugin-webpack","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kotarella1110.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-27T07:10:42.000Z","updated_at":"2024-10-22T08:48:46.000Z","dependencies_parsed_at":"2023-01-14T21:15:21.408Z","dependency_job_id":null,"html_url":"https://github.com/kotarella1110/cordova-plugin-webpack","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarella1110%2Fcordova-plugin-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarella1110%2Fcordova-plugin-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarella1110%2Fcordova-plugin-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarella1110%2Fcordova-plugin-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kotarella1110","download_url":"https://codeload.github.com/kotarella1110/cordova-plugin-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710450,"owners_count":21149191,"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":["cordova","cordova-android","cordova-browser","cordova-ios","cordova-plugin","webpack","webpack4"],"created_at":"2024-10-02T08:05:09.884Z","updated_at":"2025-04-13T12:11:50.769Z","avatar_url":"https://github.com/kotarella1110.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003ecordova-plugin-webpack\u003c/h1\u003e\n\n  \u003cimg src=\"https://github.com/kotarella1110/cordova-plugin-webpack/blob/master/media/logo/logo.png?raw=true\" width=\"128\" /\u003e\n\n  \u003ch3\u003eThis plugin integrates \u003ca href=\"https://webpack.js.org\"\u003ewebpack\u003c/a\u003e into your Cordova workflow.\u003c/h3\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"LICENSE\"\u003e\n      \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/actions?query=workflow%3ACI\"\u003e\n      \u003cimg alt=\"Actions Status\" src=\"https://github.com/kotarella1110/cordova-plugin-webpack/workflows/CI/badge.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/cordova-plugin-webpack\"\u003e\n      \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/cordova-plugin-webpack?style=flat-square\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/cordova-plugin-webpack\"\u003e\n      \u003cimg alt=\"Downloads Month\" src=\"https://img.shields.io/npm/dm/cordova-plugin-webpack?style=flat-square\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/cordova-plugin-webpack\"\u003e\n      \u003cimg alt=\"Downloads Total\" src=\"https://img.shields.io/npm/dt/cordova-plugin-webpack?style=flat-square\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://david-dm.org/kotarella1110/cordova-plugin-webpack\" title=\"dependencies status\"\u003e\n      \u003cimg src=\"https://david-dm.org/kotarella1110/cordova-plugin-webpack/status.svg?style=flat-square\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://david-dm.org/kotarella1110/cordova-plugin-webpack?type=dev\" title=\"devDependencies status\"\u003e\n      \u003cimg src=\"https://david-dm.org/kotarella1110/cordova-plugin-webpack/dev-status.svg?style=flat-square\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://codeclimate.com/github/kotarella1110/cordova-plugin-webpack/maintainability\"\u003e\n      \u003cimg src=\"https://api.codeclimate.com/v1/badges/f51fd5b6e3c7f43649c2/maintainability\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n      \u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"CONTRIBUTING.md\"\u003e\n      \u003cimg alt=\"PRs Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-green.svg?style=flat-square\" /\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## Motivation\n\nModule bundlers such as webpack are essential for SPA (Single Page Application) development. Unfortunately, the Cordova workflow does not integrate webpack as a standard feature.\n\nSimply install this plugin to easily integrate webpack into your Cordova workflow.\n\n## Demo\n\n![Demo](https://github.com/kotarella1110/cordova-plugin-webpack/blob/master/media/cordova-plugin-webpack-demo.gif?raw=true)\n\n## Features\n\n- Ability to have build scripts by webpack when you build or run Cordova app\n- Ability to have LiveReload ([Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement 'Hot Module Replacement | webpack')) run by Webpack Dev Server when you’re testing on a device or emulator for Android and iOS\n\n## Supported Platforms\n\n- Browser\n- Android\n- iOS\n\n## Installation\n\n```shell\n$ npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3\n$ cordova plugin add cordova-plugin-webpack\n```\n\n## CLI Reference\n\n### Syntax\n\n```shell\n$ cordova { prepare | platform add | build | run } [\u003cplatform\u003e [...]]\n    [-- [--webpack.\u003coption\u003e \u003cvalue\u003e | --livereload]]\n```\n\n| Option               | Description                                                                                                                                                                                                                                                                                                                                                                               | Default | Aliases |\n| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |\n| `--webpack.\u003coption\u003e` | Passed to [webpack-cli options](https://webpack.js.org/api/cli/) or [webpack-dev-server options](https://webpack.js.org/configuration/dev-server/). eg: `--webpack.config example.config.js` \u003cbr\u003e **Note: Some options such as [Stats Options](https://webpack.js.org/api/cli/#stats-options) and [Watch Options](https://webpack.js.org/api/cli/#watch-options) are not yet supported.** |         | `-w`    |\n| `--livereload`       | Enables LiveReload (HMR)                                                                                                                                                                                                                                                                                                                                                                  | `false` | `-l`    |\n\n### Examples\n\n#### Build\n\n**Before preparing** your Cordova app, build scripts by webpack.\n\n```shell\n$ cordova prepare\n$ cordova build -- --webpack.config path/to/dir/webpack.config.js\n$ cordova build android -- --webpack.mode=production\n$ cordova build ios -- --webpack.env.prod\n```\n\n#### Live Reload (HMR)\n\n**After preparing** your Cordova app, run LiveReload by Webpack Dev Server.\n\n```shell\n$ cordova prepare -- --livereload\n$ cordova run ios -- -w.config path/to/dir/webpack.config.babel.js -l\n$ cordova run android -- --livereload --webpack.port=8888 --webpack.watch-content-base=false\n```\n\n## Usage\n\n1. [Add this plugin](#Installation)\n\n2. Create a webpack configuration file (`webpack.config.js`) in your project root folder\n\n   ```js\n   const path = require('path');\n\n   module.exports = {\n     mode: 'development',\n     entry: './src/index.js',\n     output: {\n       path: path.resolve(__dirname, 'www'),\n       filename: 'index.bundle.js',\n     },\n     devtool: 'inline-source-map',\n   };\n   ```\n\n3. Execute the commands\n\n   ```shell\n   $ cordova build\n   $ cordova run -- --livereload\n   ```\n\n\u003cdetails\u003e\n\u003csummary\u003eFor more information...\u003c/summary\u003e\n\n1. Create a Cordova app\n\n   ```shell\n   $ cordova create cordova-plugin-webpack-example cordova.plugin.webpack.example CordovaPluginWebpackExample\n   ```\n\n2. Add platforms\n\n   ```shell\n   $ cd cordova-plugin-webpack-example\n   $ cordova platform add android ios\n   ```\n\n3. [Add this plugin](#Installation)\n\n4. Create a JavaScript file ([entry point](https://webpack.js.org/concepts/entry-points/ 'entry points'))\n\n   ```shell\n   $ mkdir src\n   $ mv www/js/index.js src/index.js\n   ```\n\n5. Create a webpack configuration file (`webpack.config.js`) in your project root folder\n\n   ```js\n   const path = require('path');\n\n   module.exports = {\n     mode: 'development',\n     entry: './src/index.js',\n     output: {\n       path: path.resolve(__dirname, 'www'),\n       filename: 'index.bundle.js',\n     },\n     devtool: 'inline-source-map',\n   };\n   ```\n\n6. Fix a HTML file (`www/index.html`)\n\n   ```diff\n   -         \u003cscript type=\"text/javascript\" src=\"js/index.js\"\u003e\u003c/script\u003e\n   +         \u003cscript type=\"text/javascript\" src=\"index.bundle.js\"\u003e\u003c/script\u003e\n   ```\n\n7. Execute the commands\n\n   ```shell\n   $ cordova build\n   $ cordova run -- --livereload\n   ```\n\n\u003c/details\u003e\n\n---\n\n**NOTE**\n\nStarting with Android 9 (API level 28), cleartext support is disabled by default. Therefore, LiveReload does not work on Android 9.0 and higher devices and emulators. Also see [this issue](https://github.com/kotarella1110/cordova-plugin-webpack/issues/9#issuecomment-495048614).\n\nTo resolve this, you must modify your `config.xml` file to enable cleartext support.\n\n1. Add `xmlns:android=\"http://schemas.android.com/apk/res/android\"` in `widget` root element\n\n   ```xml\n   \u003cwidget id=\"cordova.plugin.webpack.example\" version=\"1.0.0\" xmlns=\"http://www.w3.org/ns/widgets\" xmlns:android=\"http://schemas.android.com/apk/res/android\" xmlns:cdv=\"http://cordova.apache.org/ns/1.0\"\u003e\n   ```\n\n2. Enable `android:usesCleartextTraffic` attribute in `application` element\n\n   ```xml\n   \u003cplatform name=\"android\"\u003e\n       \u003cedit-config file=\"AndroidManifest.xml\" mode=\"merge\" target=\"/manifest/application\"\u003e\n           \u003capplication android:usesCleartextTraffic=\"true\" /\u003e\n       \u003c/edit-config\u003e\n   \u003c/platform\u003e\n   ```\n\n---\n\n## Custom webpack configuration\n\nBasically, it works according to your webpack configuration file.\nIf you want to custom webpack configuration, modify your `webpack.config.js` file.\n\n```js\n...\nmodule.exports = {\n  ...\n  mode: 'production',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'www'),\n    filename: 'bundle.js',\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n  ],\n  ...\n  devServer: {\n    contentBase: path.join(__dirname, 'public'),\n    host: 'localhost',\n    port: '8000',\n    hot: false,\n  },\n  ...\n};\n```\n\n| Option                         | Default   |\n| ------------------------------ | --------- |\n| `devServer.contentBase`        | `www`     |\n| `devServer.historyApiFallBack` | `true`    |\n| `devServer.host`               | `0.0.0.0` |\n| `devServer.port`               | `8080`    |\n| `devServer.watchContentBase`   | `true`    |\n| `devServer.hot`                | `true`    |\n\nFor example, if you want page reloading (LiveReload) instead of hot module reloading (HMR), specify the `devServer.hot` option as `false`.\n\n```js\n...\nmodule.exports = {\n  ...\n  devServer: {\n    hot: false,\n  },\n  ...\n};\n```\n\n## Contribute\n\nContributions are always welcome! Please read the [contributing](./CONTRIBUTING.md) first.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://qiita.com/kotarella1110\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/12913947?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKotaro Sugawara\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=kotarella1110\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=kotarella1110\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-kotarella1110\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#infra-kotarella1110\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=kotarella1110\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://jimmymultani.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1281284?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJimmy Multani\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=JimmyMultani\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=JimmyMultani\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/shotaabe\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/56618566?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eshotaabe\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=shotaabe\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#design-shotaabe\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://gavinhenderson.me\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1359202?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGavin Henderson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/issues?q=author%3Agavinhenderson\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/kotarella1110/cordova-plugin-webpack/commits?author=gavinhenderson\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[Apache-2.0](./LICENSE) © [Kotaro Sugawara](https://twitter.com/kotarella1110)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkotarella1110%2Fcordova-plugin-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkotarella1110%2Fcordova-plugin-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkotarella1110%2Fcordova-plugin-webpack/lists"}