How to run react (using webpack) as a chrome extension - json

Question

I am building a chrome extension, but I want to use react to build it. I am not sure how I need to configure my manifest.json in order to get it to work.
This is my manifest.json file...
{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Get pages source from a popup",
"browser_action": {
"default_popup": "./src/index.html"
},
"permissions": ["tabs", "<all_urls>"]
}
Now the way that I run my app locally, is with the following script in package.json...
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
}
My app displays on localhost:8080. However, I want the app to open up when I click on my extension. How can I do this? Do I need to reference the path to the localhost?
At the moment, when I run my extension, the index.html file gets loaded but nothing is rendered. Can someone explain how to do this?
EDIT
I also tried the following but it did not work...
"browser_action": {
"default_popup": "http://localhost:8080/src/index.html"
},

Answer 1

Change default_popup in manifest.json to "src/index.html".
Always build your code before packing extension and use webpack instead of webpack-dev-server
Also babel-core and webpack-dev-server were missing from package.json
Here is the screenshot of working extension:
Screenshot of development:
Make a new folder when you publish your extension which excludes node_modules folders ( only after you npm run build )
Here is the link with the updated code: https://drive.google.com/open?id=0ByrxEyIevnFmNXlDZERaRTBMSlE
Please don't forget to run npm install and npm run build before loading unpacked extension.
Comment if any further help needed.