Phonegap 和 React 应用程序的 Webpack 配置？答案

【问题标题】：Webpack configuration for Phonegap and React app?Phonegap 和 React 应用程序的 Webpack 配置？
【发布时间】：2019-03-01 13:54:36
【问题描述】：

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

知道如何使用 webpack 简化整个过程，以便 Phonegap 手机应用程序可以获取 webpack 提供的内容，或者 webpack 将即时吐出 www 文件夹中的文件，Phonegap 服务器将选择它在它自己的服务器中渲染视图或在Phonegap android应用程序中？

这是我的文件夹结构-

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

同时，当我从 src 保存带有新更改的文件时，如何配置 webpack 以即时更改构建文件夹“www”？以便 Phonegap 获取更改并重新渲染？

【问题讨论】：

标签： android reactjs cordova webpack phonegap

【解决方案1】：

在 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',
},

因此，您捆绑的 .js 文件将插入到 www/ 或 www/js/ 或您需要的任何位置，phonegap serve 将接受更改。

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

【讨论】：