title: Reactjs + Webpack 2.x + react-router 4.x after bundled without error, use html src bundle.js, css recognised., but no components rendered out
body: <p>As the title says, I'm using webpack 2.x, react-router v4, bundling successful, no errors, yet open index.html, not showing exactly like the website. Just when bundling separately not working. Been scratching my head for a week. No Errors were produced no clue whats the problem.. hoping someone can help.. Thanks in advance..</p>
  
  <p>When using webpack-dev-server, it works normal, every components rendered.</p>
  
  <p>Situation: bundled successfully without errors. bundle.js, some images, and a font folder files produced in /public folder. index.html with src bundle.js. double clicked it. the css part of the website recognised, javascript parts nothing..
  using chrome reacttools it shows like this:</p>
  
  <pre><code>&lt;BrowserRouter&gt;
   &lt;Router history={...etcs}&gt;
    &lt;App&gt;
     &lt;Switch&gt;
      null
     &lt;/Switch&gt;
    &lt;/App&gt;
   &lt;/Router&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>my folder hierarchy:
  <a href="https://i.stack.imgur.com/Ypt0q.jpg" rel="nofollow noreferrer">Folder Hierarchy</a></p>
  
  <p>My package.json</p>
  
  <pre><code>{
    "name": "fei-react",
    "version": "2.0.0",
    "description": "Fei's official business website",
    "main": "app.jsx",
    "scripts": {
      "start": "webpack-dev-server --inline --hot --port 9999"
    },
    "author": "Albert Chai",
    "license": "ISC",
    "dependencies": {
      "prop-types": "^15.5.8",
      "react": "^15.*",
      "react-addons-css-transition-group": "^15.*",
      "react-dom": "^15.*",
      "react-router-dom": "^4.0.0-beta.8"
    },
    "devDependencies": {
      "aphrodite": "^1.*",
      "babel-core": "^6.*",
      "babel-loader": "^6.*",
      "babel-preset-env": "^1.*",
      "babel-preset-latest": "^6.*",
      "babel-preset-react": "^6.*",
      "babel-runtime": "^6.*",
      "css-loader": "^*",
      "file-loader": "^*",
      "foundation-sites": "^6.*",
      "fullpage-react": "^2.*",
      "html-webpack-plugin": "^*",
      "jquery": "^3.*",
      "node-sass": "^4.*",
      "react-hot-loader": "^*",
      "react-images": "^0.*",
      "react-linkify": "^0.*",
      "react-photo-gallery": "^5.*",
      "sass-loader": "^*",
      "script-loader": "^*",
      "style-loader": "^*",
      "url-loader": "^*",
      "webpack": "^2.*",
      "webpack-dev-server": "^2.*"
    }
  }
  </code></pre>
  
  <p>my webpack.config.js</p>
  
  <pre><code>var path = require('path');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var webpack = require('webpack');
  
  module.exports = {
    entry:  "./app.jsx",
  
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "public"),
    },
  
    devServer: {
      hot: true,
      historyApiFallback: true,
      contentBase: './public'
    },
  
  
    plugins: [
      new webpack.ProvidePlugin({
          '$': 'jquery',
          'jQuery': 'jquery'
        }),
      new webpack.HotModuleReplacementPlugin()
    ],
  
  
    resolve: {
      modules: [path.resolve(__dirname, "/"), "node_modules"],
  
      alias: {
        About: path.resolve(__dirname, 'components/pages/About.jsx'),
        Contact: path.resolve(__dirname, 'components/pages/Contact.jsx'),
        Projects: path.resolve(__dirname, 'components/pages/Projects.jsx'),
        Content: path.resolve(__dirname, 'components/pages/Content.jsx'),
        Main: path.resolve(__dirname, 'components/Main.jsx'),
        Loader: path.resolve(__dirname, 'components/pages/Loader.jsx'),
        Logo: path.resolve(__dirname, 'components/Logo.jsx'),
        LogoA: path.resolve(__dirname, 'components/LogoA.jsx'),
        ArrowButton: path.resolve(__dirname, 'components/ArrowButton.jsx'),
        EmailUser: path.resolve(__dirname, 'components/EmailUser.jsx'),
        applicationStyles: path.resolve(__dirname, 'components/styles/app.scss'),
        applicationFonts: path.resolve(__dirname, 'components/fonts/fonts.scss'),
        fullreactNorm: path.resolve(__dirname, 'components/normalize.css'),
        fullreactSke: path.resolve(__dirname, 'components/skeleton.css'),
        exampleStyles: path.resolve(__dirname, 'components/exampleStyles.scss')
      },
      extensions: ['.css','.scss', '.js', '.jsx']
    },
  
  module: {
    rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loaders: ['react-hot-loader','babel-loader']
        },
          {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              exclude: /(node_modules|bower_components)/,
              use: "file-loader"
          },
          {
              test: /\.(woff|woff2)$/,
              exclude: /(node_modules|bower_components)/,
              use: "url-loader?prefix=font/&amp;limit=5000"
          },
          {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              exclude: /(node_modules|bower_components)/,
              use: "url-loader?limit=10000&amp;mimetype=application/octet-stream&amp;name=public/fonts/[name].[ext]"
          },
          {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              exclude: /(node_modules|bower_components)/,
              use: "url-loader?limit=10000&amp;mimetype=image/svg+xml"
          },
          {
              test: /\.gif/,
              exclude: /(node_modules|bower_components)/,
              use: "url-loader?limit=10000&amp;mimetype=image/gif"
          },
          {
              test: /\.jpg/,
              exclude: /(node_modules|bower_components)/,
              use: "url-loader?limit=10000&amp;mimetype=image/jpg"
          },
          {
              test: /\.png/,
              exclude: /(node_modules|bower_components)/,
              use: "url-loader?limit=10000&amp;mimetype=image/png"
          }
        ]
    }
  }
  </code></pre>
  
  <p>my babelrc</p>
  
  <pre><code>{
    "presets": [
      "env","react"
    ]
  }
  </code></pre>
  
  <p>my react-router setting within app.jsx</p>
  
  <pre><code>var React = require('react');
  var ReactDOM = require('react-dom');
  var {Route, Router, Switch, BrowserRouter} = require('react-router-dom');
  var Main = require('Main');
  var Content = require('Content');
  var About = require('About');
  var Contact = require('Contact');
  
  // App css
  require('style-loader!css-loader!sass-loader!applicationStyles')
  require('style-loader!css-loader!sass-loader!exampleStyles')   
  
  // App font
  require('style-loader!css-loader!sass-loader!applicationFonts')
  
  const App = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact path="/" component={About} /&gt;
      &lt;Route path="/contact" component={Contact} /&gt;
      &lt;Route path="/content" component={Content} /&gt;
    &lt;/Switch&gt;
  )
  
  ReactDOM.render((
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;
  ), document.getElementById('app'))
  </code></pre>
  
  <p>Not sure what other information needed. However i have uploaded the whole project on github. this is the website 
  <a href="https://github.com/triple1c86/FeiReactWebsite" rel="nofollow noreferrer">https://github.com/triple1c86/FeiReactWebsite</a></p>
  
  <p>Please help.. search all over the internet and this stackoverflow, cant seems to find any answer.. Thanks again</p>