https://github.com/kotarella1110/cordova-plugin-webpack
Integrate webpack into your Cordova workflow.
https://github.com/kotarella1110/cordova-plugin-webpack
cordova cordova-android cordova-browser cordova-ios cordova-plugin webpack webpack4
Last synced: about 1 year ago
JSON representation
Integrate webpack into your Cordova workflow.
- Host: GitHub
- URL: https://github.com/kotarella1110/cordova-plugin-webpack
- Owner: kotarella1110
- License: apache-2.0
- Created: 2018-04-27T07:10:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:14:43.000Z (over 3 years ago)
- Last Synced: 2025-04-13T12:11:43.900Z (about 1 year ago)
- Topics: cordova, cordova-android, cordova-browser, cordova-ios, cordova-plugin, webpack, webpack4
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/cordova-plugin-webpack
- Size: 29.1 MB
- Stars: 62
- Watchers: 1
- Forks: 20
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
cordova-plugin-webpack
This plugin integrates webpack into your Cordova workflow.
[](#contributors-)
## Motivation
Module bundlers such as webpack are essential for SPA (Single Page Application) development. Unfortunately, the Cordova workflow does not integrate webpack as a standard feature.
Simply install this plugin to easily integrate webpack into your Cordova workflow.
## Demo
## Features
- Ability to have build scripts by webpack when you build or run Cordova app
- 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
## Supported Platforms
- Browser
- Android
- iOS
## Installation
```shell
$ npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3
$ cordova plugin add cordova-plugin-webpack
```
## CLI Reference
### Syntax
```shell
$ cordova { prepare | platform add | build | run } [ [...]]
[-- [--webpack. | --livereload]]
```
| Option | Description | Default | Aliases |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| `--webpack.` | 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`
**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` |
| `--livereload` | Enables LiveReload (HMR) | `false` | `-l` |
### Examples
#### Build
**Before preparing** your Cordova app, build scripts by webpack.
```shell
$ cordova prepare
$ cordova build -- --webpack.config path/to/dir/webpack.config.js
$ cordova build android -- --webpack.mode=production
$ cordova build ios -- --webpack.env.prod
```
#### Live Reload (HMR)
**After preparing** your Cordova app, run LiveReload by Webpack Dev Server.
```shell
$ cordova prepare -- --livereload
$ cordova run ios -- -w.config path/to/dir/webpack.config.babel.js -l
$ cordova run android -- --livereload --webpack.port=8888 --webpack.watch-content-base=false
```
## Usage
1. [Add this plugin](#Installation)
2. Create a webpack configuration file (`webpack.config.js`) in your project root folder
```js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'index.bundle.js',
},
devtool: 'inline-source-map',
};
```
3. Execute the commands
```shell
$ cordova build
$ cordova run -- --livereload
```
For more information...
1. Create a Cordova app
```shell
$ cordova create cordova-plugin-webpack-example cordova.plugin.webpack.example CordovaPluginWebpackExample
```
2. Add platforms
```shell
$ cd cordova-plugin-webpack-example
$ cordova platform add android ios
```
3. [Add this plugin](#Installation)
4. Create a JavaScript file ([entry point](https://webpack.js.org/concepts/entry-points/ 'entry points'))
```shell
$ mkdir src
$ mv www/js/index.js src/index.js
```
5. Create a webpack configuration file (`webpack.config.js`) in your project root folder
```js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'index.bundle.js',
},
devtool: 'inline-source-map',
};
```
6. Fix a HTML file (`www/index.html`)
```diff
-
+
```
7. Execute the commands
```shell
$ cordova build
$ cordova run -- --livereload
```
---
**NOTE**
Starting 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).
To resolve this, you must modify your `config.xml` file to enable cleartext support.
1. Add `xmlns:android="http://schemas.android.com/apk/res/android"` in `widget` root element
```xml
```
2. Enable `android:usesCleartextTraffic` attribute in `application` element
```xml
```
---
## Custom webpack configuration
Basically, it works according to your webpack configuration file.
If you want to custom webpack configuration, modify your `webpack.config.js` file.
```js
...
module.exports = {
...
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin(),
],
...
devServer: {
contentBase: path.join(__dirname, 'public'),
host: 'localhost',
port: '8000',
hot: false,
},
...
};
```
| Option | Default |
| ------------------------------ | --------- |
| `devServer.contentBase` | `www` |
| `devServer.historyApiFallBack` | `true` |
| `devServer.host` | `0.0.0.0` |
| `devServer.port` | `8080` |
| `devServer.watchContentBase` | `true` |
| `devServer.hot` | `true` |
For example, if you want page reloading (LiveReload) instead of hot module reloading (HMR), specify the `devServer.hot` option as `false`.
```js
...
module.exports = {
...
devServer: {
hot: false,
},
...
};
```
## Contribute
Contributions are always welcome! Please read the [contributing](./CONTRIBUTING.md) first.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Kotaro Sugawara
💻 📖 🤔 🚇 ⚠️
Jimmy Multani
📖 💻
shotaabe
📖 🎨
Gavin Henderson
🐛 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
[Apache-2.0](./LICENSE) © [Kotaro Sugawara](https://twitter.com/kotarella1110)