react app with webpack server production build not working - reactjs

Question

My react app work fine in webpack-dev-server but production builds redirects to the page not found route. I have tried hashRouter too but it redirects to the homepage on every Route.
Please let me know what I am missing. I kind of new into this. Also, my build bundle is near about 2mbs. I tried some code splitting but that didn't worked.
Here is my webpack.config.js-
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const extractSass = new ExtractTextPlugin({
filename: "style.css",
});
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.s?css$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader'
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: ''
}
}
]
}
]
},
plugins:[
new CleanWebpackPlugin(['dist']),
extractSass,
new HtmlWebpackPlugin({
title: 'Caching',
template: 'index.html'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
sequences: true,
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true,
drop_console: true
},
mangle: {
except: ['$super', '$', 'exports', 'require']
},
output: {
comments: false
}
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
]
};
package.json file.
{
"name": "react-afinoz",
"version": "1.0.0",
"description": "Afinoz Get best and cheap Loans in Delhi, Noida",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run prod",
"build": "webpack-dev-server --content-base src/ --inline --hot --open --history-api-fallback",
"prod": "webpack -p --progress"
},
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^7.1.6",
"aws-sdk": "^2.128.0",
"axios": "^0.16.2",
"node-sass": "^4.5.3",
"preload-webpack-plugin": "^2.0.0",
"react": "^15.6.1",
"react-cookies": "^0.1.0",
"react-document-meta": "^2.1.2",
"react-dom": "^15.6.1",
"react-materialize": "^1.0.16",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-s3-uploader": "^4.5.0",
"script-ext-html-webpack-plugin": "^1.8.7",
"style-ext-html-webpack-plugin": "^3.4.3",
"url-loader": "^0.5.9"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^1.0.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.8",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack-merge": "^4.1.0"
}
}
index.js file:-
import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter,browserHistory} from 'react-router-dom'
import App from "./routes.js"
import style from "./sass/style.scss"
const main = document.getElementById('main')
ReactDOM.render((
<BrowserRouter history={browserHistory}>
<App />
</BrowserRouter>
), main);
Router.js file:-
import React from "react"
import { Switch, Route } from 'react-router-dom'
import Home from "./home"
import Login from "./login"
import SignUp from "./signUp"
import NotFound from "./404.js"
export default class App extends React.Component{
render(){
return(
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/login' component={Login}/>
<Route path='/signUp' component={SignUp}/>
<Route path="*" component={NotFound}/>
</Switch>
);
}
}

Answer 1

Here,try to use absolute path rather than relative
entry: {
main: path.join(__dirname, './src/app.tsx'),
}