How to make the Cordova App Live Reload, specially created by webpack and running on a device or emulator

I am new to using cordova.One to live reload cordova app I know this is to use the plugin 'cordova-plugin-browsersync'. But my application was created by webpack, now I want to live reboot in the browser, I must first start "webpack-dev-server" and start the "cordova -live-reload browser browser". Can I implement the Live Reload function more easily and debug live reboot in the emulator?

+4
source share
2 answers

I faced the same problem and still could not find a ready-made solution, so below is what I did and the next steps of my plan to solve it.

I downloaded cordova-plugin-browsersync

cordova plugin add cordova-plugin-browsersync didn't work, so I manually copied it to the plugins folder, updated the package.json cord and installed the node plugin modules from the cordova-plugin-browsersync folder.

After that, the application seems to update quite quickly if something changes in the www folder.

Now you need to decide how to output the intermediate package files from the webpack-dev server that are not executed by default. I found write-file-webpack-plugin , but it does not list all the files in the build folder, so it may not work for this purpose.

So my plan is to

  • create a file webpack.config.cordova.jswhere code compression is turned off.
  • , src node.js script
  • script webpack, www/
0

npm live-server . platforms/browser/www. , , , . cordova prepare , , nodemon.

:

  • /src.
  • (, - --watch --watch) /www
  • nodemon watch /www cordova prepare. prepare www .
    (.: nodemon --watch www --exec \"cordova prepare\")
  • live-server, /platforms/browser/www
  • Viola!

- live- Cordova . , , npm-run-all.

package.json :

"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"
}

npm start, . , , .

0

Source: https://habr.com/ru/post/1672899/


All Articles