Reactjs + Webpack 2.x + response-router 4.x after build without errors, use html src bundle.js, css recognized. But components not displayed

Question

As the name says, I use webpack 2.x, response-router v4, successful linking, no errors, but open index.html, which doesn’t display exactly the same as on the site. It just does not work separately when collected. He scratched his head for a week. There were no errors, I don’t know what the problem is .. hoping that someone can help .. Thanks in advance.

When using the webpack-dev server, it works fine, all components are displayed.

Situation: successfully completed without errors. bundle.js, some images and font folder files created in / public folder. index.html with src bundle.js. double clicked it. The css part of the website is recognized, the details of javascript are nothing .. using chrome reacttools, it looks like this:

<BrowserRouter>
 <Router history={...etcs}>
  <App>
   <Switch>
    null
   </Switch>
  </App>
 </Router>
</BrowserRouter>

my folder hierarchy: folder hierarchy

My package.json

{
  "name": "fei-react",
  "version": "2.0.0",
  "description": "Fei 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.*"
  }
}

my webpack.config.js

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/&limit=5000"
        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /(node_modules|bower_components)/,
            use: "url-loader?limit=10000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]"
        },
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            exclude: /(node_modules|bower_components)/,
            use: "url-loader?limit=10000&mimetype=image/svg+xml"
        },
        {
            test: /\.gif/,
            exclude: /(node_modules|bower_components)/,
            use: "url-loader?limit=10000&mimetype=image/gif"
        },
        {
            test: /\.jpg/,
            exclude: /(node_modules|bower_components)/,
            use: "url-loader?limit=10000&mimetype=image/jpg"
        },
        {
            test: /\.png/,
            exclude: /(node_modules|bower_components)/,
            use: "url-loader?limit=10000&mimetype=image/png"
        }
      ]
  }
}

my babelrc

{
  "presets": [
    "env","react"
  ]
}

setting up my adapter in app.jsx application

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 = () => (
  <Switch>
    <Route exact path="/" component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="/content" component={Content} />
  </Switch>
)

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('app'))

I don’t know what other information is needed. However, I uploaded the entire project on github. this is the site https://github.com/triple1c86/FeiReactWebsite

Please help .. search all over the Internet and this stack stream may not find an answer. Thanks again