Configuring webpack production output files - heroku

Question

This is my first time build a webpack.production.config.js file. Here is my directory structure.
My webpack dev config entry and output is as follows:
const path = require('path');
const webpack = require('webpack');
let config = {
entry: path.resolve(__dirname, 'app/index.js'),
output: {
path: path.resolve(__dirname, '/public'),
filename: 'bundle.js',
},
....
My webpack production file is this:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'app/index.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
},
module: {
loaders: [
{ test: /\.json$/, loader: 'json' },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
},
{ test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({ title: 'My App', filename: 'admin.html' }),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('styles.css'),
new webpack.optimize.CommonsChunkPlugin('common.js'),
],
};
Npm start works fine. Npm run build compiles and creates my build folder. In the folder are my assets, a main.js, common.js.js, and admin.html generated from the HtmlWebpackPlugin.
When built, the admin.html is reading the commmon.js.js and main.js sources.
As I try to deploy to heroku, How to get my output paths in production correct so the new generated html is in the root and reads the proper js files? Currently in my package.json, the entry point is "app/index.js".