Webpack 2+, how to shim Cordova

Viewed 460

Problem

So I'm building an Angular project in Cordova, and I'm wondering if anyone know how to shim Cordova in webpack.

Normally, you reference cordova.js directly in your index.html, but I'm opting to avoid that, and have it included in the bundle, for tree shaking and all that. Not sure its even plausible, but I thought I'd ask since Google fu has failed me.

Code

I'm referencing a cordova plugin called splashscreen like so:

import * as splashscreen from 'cordova-plugin-splashscreen/www/splashscreen';

However this plugin has a require for cordova/exec:

var exec = require('cordova/exec');

This is where webpack fails:

ERROR in ./~/cordova-plugin-splashscreen/www/splashscreen.js
Module not found: Error: Can't resolve 'cordova/exec' in './node_modules/cordova-plugin-splashscreen/www'

So I've tried tweaking webpack.config.js to get webpack to understand where cordova is located:

let cordova;
let cordovaExec;

if (context.opts.platforms[0] === 'ios') {
    cordova = './platforms/ios/platform_www/cordova';
    cordovaExec = 'cordova-ios/cordova-js-src/exec';
}
else {
    cordova = './platforms/android/platform_www/cordova';
    cordovaExec = 'cordova-android/cordova-js-src/exec';
}

And then Webpack's ProvidePlugin:

new ProvidePlugin({
            'cordova': cordova,
            'cordova/exec': cordovaExec
})

But the error remains...

I'm no expert when it comes to Webpack, so does anyone know the solution, if there is any?

0 Answers
Related