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) run by Webpack Dev Server when you’re testing on a device or emulator for Android and iOS
Supported Platforms
- Browser
- Android
- iOS
Installation
$ npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3$ cordova plugin add cordova-plugin-webpack
CLI Reference
Syntax
$ cordova
Option | Description | Default | Aliases |
---|---|---|---|
--webpack.<option> |
Passed to webpack-cli options or webpack-dev-server options. eg: --webpack.config example.config.js Note: Some options such as Stats Options and Watch Options are not yet supported. |
-w |
|
--livereload |
Enables LiveReload (HMR) | false |
-l |
Examples
Build
Before preparing your Cordova app, build scripts by webpack.
$ 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.
$ 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
-
Create a webpack configuration file (
webpack.config.js
) in your project root folderconst path = ;moduleexports =mode: 'development'entry: './src/index.js'output:path: pathfilename: 'index.bundle.js'devtool: 'inline-source-map'; -
Execute the commands
$ cordova build$ cordova run -- --livereload
For more information...
-
Create a Cordova app
$ cordova create cordova-plugin-webpack-example cordova.plugin.webpack.example CordovaPluginWebpackExample -
Add platforms
$ cd cordova-plugin-webpack-example$ cordova platform add android ios -
Create a JavaScript file (entry point)
$ mkdir src$ mv www/js/index.js src/index.js -
Create a webpack configuration file (
webpack.config.js
) in your project root folderconst path = ;moduleexports =mode: 'development'entry: './src/index.js'output:path: pathfilename: 'index.bundle.js'devtool: 'inline-source-map'; -
Fix a HTML file (
www/index.html
)- <script type="text/javascript" src="js/index.js"></script>+ <script type="text/javascript" src="index.bundle.js"></script> -
Execute the commands
$ 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.
To resolve this, you must modify your config.xml
file to enable cleartext support.
-
Add
xmlns:android="http://schemas.android.com/apk/res/android"
inwidget
root element -
Enable
android:usesCleartextTraffic
attribute inapplication
element
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.
...moduleexports = ... mode: 'production' entry: './src/index.js' output: path: path filename: 'bundle.js' plugins: ... devServer: contentBase: path 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
.
...moduleexports = ... devServer: hot: false ...;
Contribute
Contributions are always welcome! Please read the contributing first.
Contributors
Thanks goes to these wonderful people (emoji key):
Kotaro Sugawara 💻 📖 🤔 🚇 ⚠️ |
Jimmy Multani 📖 💻 |
shotaabe 📖 🎨 |
Gavin Henderson 🐛 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!