Desarrollé juegos usando unity3d y unrealengine, y esta vez desarrollé la web por primera vez. Voy a usar react, javascript, material-ui y styled-component con el código de Visual Studio y sourcetree para git.

El sitio que necesito desarrollar tiene una estructura básica similar, pero necesito crear varios sitios con funciones detalladas ligeramente diferentes.

Por ejemplo, cuando se ejecuta para el dominio aaa.com, el componente comp es del archivo 'src/aaa/compPerTarget/comp', y cuando se ejecuta para el dominio bbb.com, se usa 'src/bbb/compPerTarget/comp'. Y lo más importante es que la fuente donde se usa comp no se cambie por "importar 'compPerTarget/comp'"

Páginas que usan composición de componentes

 import Comp from 'compPerTarget/Comp' ...

Cuando construya o ejecute la fuente para el destino aaa.com, use 'src/aaa/compPerTarget/comp'

 function Comp() { const logicForAAA = () => {...}; return ( <div>using div..<div> ); }

Cuando cree o ejecute la fuente para el destino bbb.com, use 'src/bbb/compPerTarget/comp'

 function Comp() { const logicForBBB = () => {...}; return ( <li>using li..<li> ); }

Estoy tratando de resolverlo usando jsonconfig.json y webpack.config.js, pero me pregunto si esta es la forma correcta de hacerlo, y si hay otra forma de resolverlo más fácilmente, avíseme.