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

Specify www folder for output.path property.

Fix 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 -- --livereload

Processing flow:

webpack compile > cordova prepare > webpack serve > cordova compile

TODO

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

License

Apache-2.0

Author Information

This plugin was created in 2018 by Kotaro Sugawara.

Changelog

0.1.0 (2019-05-13)

Features

• server: added webpack serve (02de7a4)
• utils: added cordova config parser (92c9063)

<a name="0.0.2"></a>