Hello, I'd like my browser emulator for a Cordova Phaser 3 TypeScript app (using Webpack) to reflect changes when I make them in code.

I've installed your plugin, and am doing
cordova build
cordova run -- --livereload

Then I make changes in Typescript, press CMD+R to refresh browser, but the changes aren't reflected. Can you please assist?

Test it out:

$ npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3
$ cordova plugin add cordova-plugin-webpack@alpha

Removed webpack packages from deps

This plugin depends on the plugin's own webpack, but it will be modified to depend on the webpack you installed.
Therefore, removed webpack packages (webpack, webpack-cli, webpack-dev-server) from deps of package.json and add the webpack packages to peerDeps (2b86b41).
You need to install the webpack packages yourself before installing this plugin.

$ npm install -D webpack@4 webpack-cli@3 webpack-dev-server@3

Add a new --webpack option

This plugin has no way to map parameters sent to the CLI to a corresponding parameter in the webpack configuration file such as webpack-cli and webpack-dev-server.
Add a new --webpack option to make this possible.

--webpack option's parameters is passed to webpack-cli options or webpack-dev-server options.

$ cordova build ios -- --webpack.mode=production
$ cordova build ios -- --webpack.env.prod
$ cordova run android -- --livereload --webpack.port=8888 --webpack.watch-content-base=false

The --webpackConfig option will be removed in v1 by adding a new --webpack option.
Use --webpack.config option instead of --webpackConfig option.

- $ cordova build ios -- --webpackConfig example.config.js
+ $ cordova build ios -- --webpack.config example.config.js

Support various webpack configuration types

This plugin only supports exporting a single configuration object.
Covers other needs besides exporting a single configuration object.

Related Issues:

• #21
• #19

I have this conflict during installation:

Failed to install 'cordova-plugin-webpack': Error: cordova-plugin-webpack cannot be added. changes in this plugin conflicts with changes in config.xml. Conflicts must be resolved before plugin can be added.

My relevant items in config.xml looks like this:

        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:allowBackup="false" />
            <application android:fullBackupContent="false" />
        </edit-config>

How do I solve it?

(node:23601) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'includes' of undefined
    at /home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/src/webpackCompile.ts:15:57
    at Array.some (<anonymous>)
    at /home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/src/webpackCompile.ts:15:18
    at step (/home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/dist/webpackCompile.js:33:23)
    at Object.next (/home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/dist/webpackCompile.js:14:53)
    at /home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/dist/webpackCompile.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/dist/webpackCompile.js:4:12)
    at module.exports (/home/karl/brainstem/fabric-of-reality/phonegap-spacetime/plugins/cordova-plugin-webpack/src/webpackCompile.ts:13:37)
    at runScriptViaModuleLoader (/home/karl/brainstem/fabric-of-reality/phonegap-spacetime/node_modules/cordova-lib/src/hooks/HooksRunner.js:181:32)
(node:23601) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 5)
(node:23601) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This is phonegap wrapping cordova.

Got this error when using multiple webpack configs :
configuration has an unknown property '1'

This is caused by webpack config of type array instead of object.

When will you support multi webpack configs ? Thanks !

My webpack.config.xml

var config = {
    devtool: 'inline-source-map',
    mode: 'development',
};

const cordovaAppConfig = Object.assign({}, config, {
    name: "cordovaAppConfig",
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
       path: path.resolve(__dirname, 'www/js'),
       filename: "index.bundle.js"
    },
});

const injectedJsConfig = Object.assign({}, config, {
    name: "injectedJsConfig",
    entry: path.resolve(__dirname, 'src/webview-injection.js'),
    output: {
       path: path.resolve(__dirname, 'www/js'),
       filename: "webview-injection.bundle.js"
    },
});

module.exports = [
    cordovaAppConfig, injectedJsConfig,       
];

Hi,

I am trying to use the hotreload for my android device (Android 9).
I have follow the instruction and setup config.xml as described in the documentation.
When the app launched on my phone it is pointing to 10.0.2.2:8888

i have tried to setup host and port at devServer pointing to my laptop but doesn't seems to work.
devServer: {
host: '192.168.1.104',
port: '8888'
},

Thanks.

I have the source of my application in the subfolder /src.
It's a vue webpack app so the webpack configuration relies on /build/webpack.dev.conf.js

I'm actually issuing this command

cordova run android -- --webpackConfig src/build/webpack.dev.conf.js --livereload

it throws this error at a certain point

ERROR in multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-1 (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-2 ./src
Module not found: Error: Can't resolve './src' in '/home/koso00/Progetti/weticket2'
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-1 (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-2 ./src main[4]
ℹ ｢wdm｣: Failed to compile.

If i run
cordova run ios --device -- --webpackConfig [path] --livereload
ios-deploy complains:
ios-deploy: unrecognized option '--livereload'

I noticed that when my app is cloned by somebody else, whenever they try to run, it fails to create a bundle with a warning

> cordova run browser -- --livereload



Script file does't exist and will be skipped: <app path>/plugins/cordova-plugin-webpack/dist/webpackCompile.js

Script file does't exist and will be skipped: <app path>/plugins/cordova-plugin-webpack/dist/webpackServe.js

startPage = index.html

Static file server running @ http://localhost:8000/index.html

CTRL + C to shut down

304 /index.html

(node:7934) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

304 /css/index.css

304 /cordova.js

404 /index.bundle.js

It looks like the problem is caused by _where attribute in plugins/cordova-plugin-webpack/package.json that holds absolute path to the app folder when this plugin was installed

As for now, the workaround is to

cordova plugins rm cordova-plugin-webpack
cordova plugins add cordova-plugin-webpack

After pulling other people commits

Getting the error cordova Instead rename webpackCompile.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules after trying to run on Android.

Hello!

I was wondering if it's possible to add support for the highly popular cordova sqlite storage plugin? I'm not really sure how it's working behind the scenes, but as far as I can tell, the plugin is not lodaded/injected into the project until you run the project manually on a device or emulated one.

cordova prepare && cordova run android -- The plugin works as expected
rimraf www/* && cordova prepare && cordova run -- -livereload -- The plugin fails to load.

Is this something you're able to do on your side?

I'm new to Cordova and I would like to use webpack with my cordova project using your plugin but I'm having some issues.

Basically I followed your instructions but js files cannot recognize import/require.
I have basically hello world cordova starting app with your plugin. Could you look at it and tell me what I am doing wrong?

I attached my project.
I really appreciate your help.

Archive.zip

Hi,

Is there any plan to upgrade the plugin to support webpack5 ?

C:\workspace\github\appName>cordova prepare -- --livereload
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object
    at validateString (internal/validators.js:125:11)
    at Object.basename (path.js:744:5)
    at module.exports (C:\workspace\github\appName\plugins\cordova-plugin-webpack\node_modules\rechoir\lib\extension.js:7:23)
    at Object.exports.prepare (C:\workspace\github\appName\plugins\cordova-plugin-webpack\node_modules\rechoir\index.js:11:14)
    at Object.exports.webpackConfig (C:\workspace\github\appName\plugins\cordova-plugin-webpack\src\utils\webpackHelper.ts:32:11)
    at Object.<anonymous> (C:\workspace\github\appName\plugins\cordova-plugin-webpack\src\webpackServe.ts:66:70)
    at step (C:\workspace\github\appName\plugins\cordova-plugin-webpack\scripts\webpackServe.js:43:23)
    at Object.next (C:\workspace\github\appName\plugins\cordova-plugin-webpack\scripts\webpackServe.js:24:53)
    at fulfilled (C:\workspace\github\appName\plugins\cordova-plugin-webpack\scripts\webpackServe.js:15:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Got this error on Windows right after installing the plugin. Unsure what to do to fix it.

This is using Vue, so my webpack files are:
"C:\workspace\github\appName\build\webpack.prod.conf.js"
"C:\workspace\github\appName\build\webpack.base.conf.js"
"C:\workspace\github\appName\build\webpack.dev.conf.js"
"C:\workspace\github\appName\config\test.env.js"
"C:\workspace\github\appName\config\dev.env.js"
"C:\workspace\github\appName\config\index.js"
"C:\workspace\github\appName\config\prod.env.js"

The Vue documentation says I am to use this path
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

https://github.com/apache/cordova-common/blob/master/src/ConfigParser/ConfigParser.js

It looks that running the command cordova build android -- --webpackConfig ./../../webpack.config.js the files are being copied before webpack finishes the build.
Example:

• First time we run the command (www empty and android platform not present).
• We add the android platform.
• We run the command, www folder is filled with the right files but platforms/android/app/src/main/assets/www empty.
• We rerun the command, platforms/android/app/src/main/assets/www is filled with the actual files, and files in www got replaced by newer ones (this will loop forever, everytime you re-run that command so you will never get the latest file into your application).

Is it because the prepare is beign executed before webpack finishes?
Or maybe, is it because I have some webpack plugins that are executed after the webpack build?
I tried to debug, but since the source code is "compiled" it's pretty hard to understand what promises are doing.

Using the default webpack.config.js with a different entry ./src/index123.js

const path = require('path');
 
module.exports = {
  mode: 'development',
  entry: './src/index123.js',
  output: {
    path: path.resolve(__dirname, 'www'),
    filename: 'index.bundle.js',
  },
  devtool: 'inline-source-map',
};

then I created a copy of this config to webpack.browser.config.js and used entry ./src/index456.js
running the command
cordova run browser -- --livereload --webpack.browser.config.js
still uses the webpack.config.js as it looks for ./src/index123.js instead of ./src/index456.js

Am I doing anything wrong? I'm using cordova-plugin-webpack": "^1.0.2"

I have an app and configuration based on the example in the tutorial video from the npm page.
The app works ok in development mode on all platforms.
When it's built in production mode it doesn't run properly on an iOS device.
After turning on the source map I can see in the Safari debugger that the entry points are called in what appears to be the wrong order i.e. deviceready is called before initialise.

I'm new to webpack so is there something obvious that I might be missing here?

It seems like since updating to the latest version, the plugin now requires the browser platform.

Is there a way to get around this? Thanks.

Error: ENOENT: no such file or directory, open '/Users/jimmymultani/Projects/evree/webapp/platforms/browser/www/index.html'
    at Object.openSync (fs.js:438:3)
    at Object.writeFileSync (fs.js:1189:35)
    at /Users/jimmymultani/Projects/evree/webapp/plugins/cordova-plugin-webpack/src/webpackServe.ts:104:12
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (/Users/jimmymultani/Projects/evree/webapp/plugins/cordova-plugin-webpack/src/webpackServe.ts:99:15)
    at step (/Users/jimmymultani/Projects/evree/webapp/plugins/cordova-plugin-webpack/scripts/webpackServe.js:43:23)
    at Object.next (/Users/jimmymultani/Projects/evree/webapp/plugins/cordova-plugin-webpack/scripts/webpackServe.js:24:53)
    at fulfilled (/Users/jimmymultani/Projects/evree/webapp/plugins/cordova-plugin-webpack/scripts/webpackServe.js:15:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `NODE_ENV=development cordova run --debug --cordova -- -l`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

webpack-cli/bin/utils/convert-argv is no longer available in [email protected]

webpack-cli's bin directory used to include a whole lot: https://github.com/webpack/webpack-cli/tree/f9f08604a1ce5272b20d4f942e6861f3dc170dc0/bin

but there is no bin directory anymore: https://github.com/webpack/webpack-cli/tree/e9fd593bc1dda3b8f67944cf4b4de18d4fb55a2d

I recently tried to update a project of mine to use [email protected], but got an error and had to revert to [email protected]

Hi, thanks a lot for creating this plugin! I'm pretty new to Cordova and Javascript, so my problem might not even be related to your plugin but I'm going to try it here anyways.
When I'm running my Cordova app in the browser everything seems to work:

$ cordova run browser
Hash: 8e165a6fef6bb35bb020
Version: webpack 4.35.0
Time: 1818ms
Built at: 2019-06-30 2:56:23 PM
          Asset      Size  Chunks             Chunk Names
index.bundle.js  3.42 MiB    main  [emitted]  main
Entrypoint main = index.bundle.js
[./node_modules/leaflet-easybutton/src/easy-button.js] 9.89 KiB {main} [built]
[./node_modules/leaflet-freedraw/dist/leaflet-freedraw.web.js] 922 KiB {main} [built]
[./node_modules/leaflet/dist/leaflet-src.js] 397 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./www/index.js] 3.59 KiB {main} [built]
startPage = index.html
Static file server running @ http://localhost:8000/index.html

However, I get the following error in the console: "Uncaught ReferenceError: app is not defined at index.html:47". My index.html looks as follows:

<script type="text/javascript" src="cordova.js"></script>
<script src="index.bundle.js"></script>
<script>
            app.init();
</script>

The method app.init() is defined in my index.js using var app = { init: function() {…} }. In the webpack.config.js file "entry" points to said index.js file. Do you have any idea why it doesn't work? Am I doing it wrong or misunderstanding something? Help much appreciated!

I was wondering if it would be possible to allow webpack.config.babel.js as the file name? Main reason being that I'm using ES6 syntax in the config file. I get this error when trying to run cordova build:

Cannot find module '/Users/jimmymultani/path/to/project/webpack.config.js'

Thanks.

Hi i was wondering is it possible to support to Browser platform to have live HMR in the browser

The emulators are very slow on my machine and having this working in the browser would be perfect!

Is there any way to get this running with angular where the webpack config is not exposed and instead interacted with through the angular-cli

https://github.com/apache/cordova-lib/blob/master/src/hooks/Context.js

The whole doc commands run cordova with default browser device.

Could be great to add examples about phone devices like ios.

Moreover this doc isn't very clear, we don't really understand what the -w path/to/dir/webpack.config.babel.js -l options are for.

Thanks a lot !

Hey! great job,

have a question, what about config.xml?

cordova.js:888 GET http://localhost:8080/config.xml 404 (Not Found) readConfig @ cordova.js:888 initAndShow @ SplashScreenProxy.js:154 (anonymous) @ SplashScreenProxy.js:165 cordova.js:863 [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found fail @ cordova.js:863 SplashScreenProxy.js:163 [Browser][cordova.js][xhrStatusChangeHandler] Could not XHR config.xml: Not Found

question is, this is a bug in your library and I need to do manual proxy this file?
it's working if I add '/config.xml': 'http://127.0.0.1:8000',

I am receiving the following error when I run cordova build

"ERROR in Entry module not found: Error: Can't resolve './src/index.js'"

Hey again,

I noticed that hot: false is being overwritten by the plugin, would it be possible to respect that parameter in case you just wanted to have the whole page reload instead of that particular module?

If you'd like, I can create a PR for this.

Thank you again.

Hello!
Absolutely loving this plugin.

I noticed a small issue when re-initializing an existing project

• cordova prepare
• or when re-installing a platform cordova platform remove android && cordova platform add android

after installing this plugin, it will continue to install all plugins, but end with Cannot read property 'argv' of undefined

I'm unsure if this has any effect on the plugin overall as I've yet to experience any, but thought I'd give you a shout out about it.

xregexp should be added to the package.json

In readme

cordova run -- --livereload

can work.

But like this:

cordova run android --emulator --livereload
// or 
cordova run android --livereload

will fail to livereload. as follow pic: