How to make Cordova App Live Reload ，especially built by webpack and run in device or emulator

Question

I'm new to use cordova.One way to live reload cordova app I know is to use plugin 'cordova-plugin-browsersync'.But My App was built by webpack,now I want to live reload in Browser,I must run 'webpack-dev-server' first and run 'cordova run browser -- --live-reload'.Can I achive the function to Live Reload more easy and debug live reload in emulator?

Answer 1

I used npm package live-server to handle the reloading for the browser platform. Have it watch the platforms/browser/www directory. Your build system likely has a watch mode, in which it can detect changes and output the compiled result as well. You also need to call cordova prepare after your build finishes, which can be achieved with nodemon.

To put it all together in a full example:

• Have your source code in /src.
• Run your build tool in watch mode (ex, webpack --watch, or parcel --watch) and output to /www
• Run nodemon watching /www and have it run cordova prepare. The prepare command will copy your files from www to your platform directories.
  (ex: nodemon --watch www --exec \"cordova prepare\")
• Run live-server watching the /platforms/browser/www folder
• Viola!

This results in a semi-fast live-reload environment with cordova in the browser platform. As this is a lot of things to run at once, you can run all of your scripts in parallel using npm-run-all.

A final script in package.json might look like this:

"scripts": {
    "live-build": "webpack --watch --output-path=www ....",
    "live-watch": "nodemon --watch www --exec \"cordova prepare\" --ext html,css,js",
    "live-serve": "live-server --watch=\"platforms/browser/www\"",
    "start": "npm-run-all -c -n -l -p live-build live-watch live-serve"
}

And then you'd just call npm start to run your entire live-reload environment. This will need to be tweaked for your specific project but should give you a general idea of how it could be accomplished.