我正在使用 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 应用程序中?
这是我的文件夹结构-
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-server
和 write-file-webpack-plugin
所以前者实际上会写入 main.bundle.js
文件,但我遇到了一些问题,其中热替换发生得太慢,phonegap 正在拾取临时插入然后删除的热文件,而 phonegap 服务崩溃,因为最终找不到这些临时文件。现在尝试 webpack -w
。
关于android - Phonegap 和 React 应用程序的 Webpack 配置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52506680/