Javascript 如何使Cordova应用程序实时重新加载，；特别是由webpack构建并在设备或模拟器中运行

我刚开始使用cordova。我知道一种实时重新加载cordova应用程序的方法是使用插件“cordova plugin browsersync”。但我的应用程序是由webpack构建的，现在我想在浏览器中实时重新加载，我必须先运行“webpack dev server”并运行“cordova run browser--live reload”。我是否可以更轻松地实现live reload功能并在emulator中调试live reload？

我刚刚遇到了同样的问题，但还没有找到现成的解决方案，因此下面是我所做的以及我计划解决该问题的进一步步骤

我已经下载了

cordova plugin add cordova plugin browsersync

不起作用，所以我手动将其复制到plugins文件夹，更新cordova的package.json并从cordova plugin browsersync文件夹安装插件的节点模块

之后，如果www文件夹中有任何内容被修改，应用程序似乎更新得相当快

现在必须解决如何从WebpackDev服务器输出中间包文件的问题，默认情况下不会这样做。我已经找到了，但是它没有将所有文件输出到build文件夹，因此可能无法很好地实现这一目的

所以我的计划是

创建一个

webpack.config.cordova.js文件，其中代码压缩处于关闭状态

设置任何监视src文件夹并调用node.js脚本的应用程序

哪个脚本以编程方式使用该网页包配置进行编译，并输出到cordova的www/

---

我使用npm包

liveserver

来处理浏览器平台的重新加载。让它查看

platforms/browser/www

目录。您的构建系统可能具有监视模式，在该模式下，它可以检测更改并输出编译结果。构建完成后，还需要调用

cordova prepare

，这可以通过nodemon实现

要将其全部放在一个完整的示例中：

• 将源代码放在

  /src

  中
• 在监视模式下运行构建工具（例如，webpack--watch或packet--watch），并输出到

  /www

• 运行nodemon watching

  /www

  并让它运行

  cordova prepare

  。prepare命令将文件从

  www

  复制到平台目录
  （例如：

  nodemon——观看www--exec \“cordova prepare\”

  ）
• 运行

  live server

  查看

  /platforms/browser/www

  文件夹
• 中提琴

这将导致浏览器平台中使用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"
}

---

然后您只需调用

npmstart

即可运行整个实时重新加载环境。这将需要针对您的具体项目进行调整，但应能让您大致了解如何完成该项目。

Hi。运气好吗？太好了。调用

liveserver

：

liveserver--watch=\“platforms/browser/www\”platforms/browser/www

时，我只需附加路径。还要注意，我删除了

live build

，因为我的应用程序是纯HTML+JS。