cordova-plugin-webpack

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:

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
devServer.watchContentBase	true
devServer.hot	true

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',
  },
  ...
};

CLI examples

$ cordova prepare # webpack compile
$ cordova prepare -- --livereload # webpack live reload
$ cordova build # webpack compile
$ cordova build -- --webpackConfig path/to/dir/webpack.config.babel.js # webpack compile
$ cordova build -- --w path/to/dir/webpack.config.js --livereload # webpack live reload
$ cordova run -- --w path/to/dir/webpack.config.j -l # webpack live reload 

TODO

• Bundle with webpack before preparing.
• Live Reload (Hot Module Replacement) with webpack-dev-server after preparing.
  • Emulator
  • Device

License

Apache-2.0

Author Information

This plugin was created in 2018 by Kotaro Sugawara.