Issues adding additional entry point to webpack config (create react app)

I’m working on a chrome extension using an ejected create react app project. I need two seperate javascript files. One for the popup page and the other for the background script. The popup page is the react project while the background script runs in the background.

When i build my project with command npm build

It gives me the following build folder:

enter image description here

The entry and output files are highlighted yellow and red respectively.

But i have the following issues:

  1. The background.js entry point is never compiled. Webpack gives me exactly what was written in the entry file as output
  2. Writing es6 code in the background.js file gives me compile issues (“failed to minify”)

I tried to solve this by modifying the paths.js file in the config folder to this:enter image description here

And then adding an extra entry point in the webpack.config.prod.js file.

enter image description here