用于Phonegap和React应用的Webpack配置？

Question

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

任何想法我都该如何简化webpack的整个过程，以便Phonegap电话应用可以提取webpack提供的内容，否则webpack会立即吐出www文件夹中的文件，而Phonegap服务器会选择并在自己的服务器中或在Phonegap安卓应用中呈现视图？

这是我的文件夹结构-

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

同时，当我用新更改保存src中的文件时，如何配置webpack即时更改构建文件夹“ www”？这样Phonegap可以获取更改并重新呈现？

Answer 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。