android - Phonegap 和 React 应用程序的 Webpack 配置?

标签 android reactjs cordova webpack phonegap

我正在使用 Phonegap 构建这个 android/iOS 应用程序,它将基于 React(而非 React Native)构建。我根据自己的需要配置了 webpack,当我运行 npm run build 时,手机中的 android 应用程序查看器会正确呈现应用程序。但问题是,如果我更改 webpack 提供的 www 文件夹中的任何文件,Phonegap 服务器会获取更改,但在 android 查看器中不会重新呈现 View

知道如何使用 webpack 简化整个过程,以便 Phonegap 手机应用程序可以获取 webpack 提供的内容,或者 webpack 会即时吐出 www 文件夹中的文件,Phonegap 服务器会选择它并在它自己的服务器中呈现 View 或在 Phonegap android 应用程序中?

这是我的文件夹结构-

folder structure

Phonegap 正在从 www 向我的 android 手机提供文件。但是,当我在那里手动更改任何文件时,Phonegap 会获取更改,但页面不会在手机上重新呈现。

与此同时,当我从 src 保存文件并进行新更改时,如何配置 webpack 以动态更改构建文件夹“www”?以便 Phonegap 获取更改并重新呈现?

最佳答案

在 webpack 配置文件中,将输出目标设置为您的 www 文件夹。这是我如何让它工作的示例:

entry: './src/index',
output: {
  path: path.resolve(__dirname, 'www'),
  filename: '[name].bundle.js',
  hotUpdateChunkFilename: 'hot/hot-update.js',
  hotUpdateMainFilename: 'hot/hot-update.json',
},

因此,您 bundle 的 .js 文件将被插入到 www/www/js/ 或您需要的任何地方以及 phonegap serve 将获取更改。

我还使用了 webpack-dev-serverwrite-file-webpack-plugin 所以前者实际上会写入 main.bundle.js 文件,但我遇到了一些问题,其中热替换发生得太慢,phonegap 正在拾取临时插入然后删除的热文件,而 phonegap 服务崩溃,因为最终找不到这些临时文件。现在尝试 webpack -w

关于android - Phonegap 和 React 应用程序的 Webpack 配置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52506680/

相关文章:

android - Retrofit2 + RxJava 错误处理

java - Android:应用程序关闭后 DiskLruCache 未保存

javascript - 如何在React和vite中使用环境变量?

javascript - 检查开放街道 map 中的对象是否是建筑物

ios - 请求被服务委托(delegate) (SBMainWorkspace) 拒绝,原因为 : Unspecified

android - 如何使用 ClientID 和 ClientSecret 在 Phonegap 中使用 Angularjs 登录 Google OAuth2

java - Cloud Endpoint Gradle 依赖项

android - 将 Android Cursor 转换为数组的 ArrayList

javascript - 到达路由器导航()带有 anchor 链接的偏移量?

javascript - Phonegap 减小图像尺寸