How to attach different React Components to different Dom Roots using the new WP wordpress/scripts webpack/babel

Question

ok, after hours of research and trying different things I found my answer.

You can extend the WordPress webpack config file. Here is documentation from WordPress

https://developer.wordpress.org/block-editor/packages/packages-scripts/#advanced-usage

So here is my new webpack config file located in my theme root directory.I have moved the SinglePost React code into its own file, singlePost.js. Now when I run npm run build I get two different files. I also had to add this new build js file in my functions.php enqueue function in order to load my new javascript file.

const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");


module.exports = {
  ...defaultConfig,
    entry: {
    ...defaultConfig.entry,
        index: path.resolve( process.cwd(), 'src', 'index.js' ),
        singlePost: path.resolve( process.cwd(), 'src', 'singlePost.js' )
    }
};