cordova-plugin-webpack
Cordova Webpack Plugin
Last updated 4 months ago by kotarella1110 .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install cordova-plugin-webpack 
SYNC missed versions from official npm registry.

cordova-plugin-webpack

npm version Downloads dependencies Status devDependencies Status Maintainability License contributions welcome

This plugin integrates webpack into your Cordova workflow.

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

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

$ cordova plugin add cordova-plugin-webpack

CLI Reference

Syntax

$ cordova { prepare | platform add | build | run } [<platform> [...]]
    [-- [--webpackConfig <webpackConfig> | --livereload]]
Option Description Default Aliases
--webpackConfig Path to a webpack configuration file webpack.config.js or webpackfile.js in your project root directory. -w
--livereload Enables LiveReload (HMR) false -l

Examples

Build

Before preparing your Cordova app, build scripts by webpack.

$ cordova prepare
$ cordova build -- --webpackConfig path/to/dir/webpack.config.js

Live Reload (HMR)

After preparing your Cordova app, run LiveReload by Webpack Dev Server.

$ cordova prepare -- --livereload
$ cordova run -- -w path/to/dir/webpack.config.babel.js -l

Usage

  1. Add this plugin

  2. Create a webpack configuration file (webpack.config.js) in your project root folder

    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

    $ cordova build
    $ cordova run -- --livereload
    
<summary>For more information...</summary>
  1. Create a Cordova app

    $ cordova create cordova-plugin-webpack-example cordova.plugin.webpack.example CordovaPluginWebpackExample
    
  2. Add platforms

    $ cd cordova-plugin-webpack-example
    $ cordova platform add android ios
    
  3. Add this plugin

  4. Create a JavaScript file (entry point)

    $ mkdir src
    $ mv www/js/index.js src/index.js
    
  5. Create a webpack configuration file (webpack.config.js) in your project root folder

    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)

    -         <script type="text/javascript" src="js/index.js"></script>
    +         <script type="text/javascript" src="index.bundle.js"></script>
    
  7. 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.

  1. Add xmlns:android="http://schemas.android.com/apk/res/android" in widget root element

    <widget id="cordova.plugin.webpack.example" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    
  2. Enable android:usesCleartextTraffic attribute in application element

    <platform name="android">
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
        </edit-config>
    </platform>
    

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.

...
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.

...
module.exports = {
  ...
  devServer: {
    hot: false,
  },
  ...
};

Contribute

Contributions are always welcome! Please read the contributing first.

License

Apache-2.0 © Kotaro Sugawara

Current Tags

  • 1.0.0-alpha.2                                ...           alpha (4 months ago)
  • 0.4.7                                ...           latest (4 months ago)

21 Versions

  • 1.0.0-alpha.2                                ...           4 months ago
  • 1.0.0-alpha.1                                ...           4 months ago
  • 1.0.0-alpha.0                                ...           4 months ago
  • 0.4.7                                ...           4 months ago
  • 0.4.6                                ...           5 months ago
  • 0.4.5                                ...           5 months ago
  • 0.4.4                                ...           6 months ago
  • 0.4.3                                ...           7 months ago
  • 0.4.2                                ...           7 months ago
  • 0.4.1                                ...           8 months ago
  • 0.4.0                                ...           8 months ago
  • 0.3.3                                ...           8 months ago
  • 0.3.2                                ...           8 months ago
  • 0.3.1                                ...           8 months ago
  • 0.3.0                                ...           8 months ago
  • 0.2.0                                ...           8 months ago
  • 0.1.2                                ...           8 months ago
  • 0.1.1                                ...           8 months ago
  • 0.1.0                                ...           9 months ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 1
This Week 1
This Month 24
Last Day 0
Last Week 21
Last Month 26
Dependencies (28)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |