Webpack configuration for Phonegap and React app?

Question

I am building this android/iOS app using Phonegap, which will be build on React (not React Native). I configured the webpack based on my needs and when I run npm run build, the android app viewer in the Phone renders the app correctly. But the problem is, if I change any file in the www folder given by webpack, the Phonegap server picks up the changes but in the android viewer does not re-render the view.

Any idea how can I streamline the whole process with webpack so that the webpack served content can be picked up by Phonegap phone app or webpack will spit out the files in the www folder on the fly and Phonegap server will pick it up and render the view in it's own server or in the Phonegap android app?

Here is my folder structure-

Phonegap is serving files from www to my android phone. But when I change any file there manually, Phonegap picks up the changes but the page is not re-rendered on the phone.

At the same time, how can I configure webpack to make changes to the build folder 'www' on the fly when I save a file from src with new change? So that Phonegap picks up the changes and rerenderes?

Answer 1

In the webpack config file, set the output destination to your www folder. Here's a sample of how I got it working:

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

So your bundled .js file will get inserted inside www/ or www/js/ or wherever you need and phonegap serve will pick up the changes.

I also used webpack-dev-server and write-file-webpack-plugin so the former will actually write to the main.bundle.js file but I had some issues where the hot replacing was happening too slowly, phonegap was picking up hot files which were temporarily inserted and then removed, and phonegap serve was crashing because eventually those temp files were not found. Trying webpack -w now.