cordova-plugin-webpack
This plugin integrates webpack into your Cordova workflow.
Installation
cordova plugin add cordova-plugin-webpack
Usage
Create the App
$ cordova create cordova-plugin-webpack-example cordova.plugin.webpack.example CordovaPluginWebpackExample
$ cd cordova-plugin-webpack-example
Add Platforms
$ cordova platform add android ios
Add Plugin
$ cordova plugin add cordova-plugin-webpack
Create JavaScript file you want to bundle
$ mkdir src
$ cp www/js/index.js src/index.js
Create webpack configuration file
Just create a webpack.config.js
file in the project root folder!
webpack.config.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',
};
Fix the HTML file
www/index.html
:
- <script type="text/javascript" src="js/index.js"></script>
+ <script type="text/javascript" src="index.bundle.js"></script>
Build the App
Before preparing your application, it is bundled with webpack.
$ cordova build
Processing flow:
webpack compile
> cordova prepare
> cordova compile
Live Reload (Hot Module Replacement) the App
$ cordova prepare -- --livereload
$ cordova build -- --livereload
$ cordova run -- -l
Processing flow:
webpack compile
> cordova prepare
> webpack serve
> cordova compile
Customize webpack configuration
Build
If you want to customize webpack
options, modify webpack.config.js
file as follows:
...
module.exports = {
...
mode: 'production'
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'www'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
...
}
Live Reload (Hot Module Replacement)
By defaults:
option | default |
---|
devServer.contentBase | www |
devServer.historyApiFallBack | true |
devServer.host | 0.0.0.0 |
devServer.port | 8080 |
If you want to customize devServer
options, modify webpack.config.js
file as follows:
...
module.exports = {
...
devServer: {
contentBase: path.join(__dirname, 'public'),
host: 'localhost',
port: '8000',
},
};
TODO
License
Apache-2.0
Author Information
This plugin was created in 2018 by Kotaro Sugawara.