Since you’re new, be sure you’ve read the "PhET Development Overview" at https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md
To answer your questions…
> What's the recommended approach?
> 2) When I look at exampleSim, I see a .js file created for bar magnet image (barMagnet_png.js). As I can see, it's base 64 encoding of image along with other piece of code. How am I supposed to get this file generated for other images?
To add an new image:
* Put your file in the images/ subdirectory of the simulation repository.
* Add info about your new image to images/license.json (required by PhET build tools)
* At the root of the simulation repository, run ‘grunt modulify’. This generates the associated .ts file for the image. It works for other types of resources too.
* Use your image by importing it into your .js or .ts file, just like you would with a source-code module.
Note that PhET recently changed 'grunt modulify' to generate .ts files, so it sounds like you may be working with an older version of example-sim.
> Apologies if these are repeated questions.
Never a need for apologies in this forum! I hope this helps.