Javascript Reactjs+；网页2.x+；react router 4.x捆绑后没有错误，请使用html src bundle.js、css，但不渲染任何组件

正如标题所说，我使用的是Webpack2.x，react router v4，捆绑成功，没有错误，但是打开了index.html，与网站显示不完全一样。仅当单独捆绑时不起作用。我挠头已经一个星期了。没有产生任何错误不知道问题出在哪里。。希望有人能帮忙。。提前谢谢

当使用webpack dev server时，它工作正常，每个组件都呈现

情况：捆绑成功，没有错误。bundle.js、一些图像和在/public文件夹中生成的字体文件夹文件。带有src bundle.js的index.html。双击它。网站的css部分已被识别，javascript部分未被识别。。 使用chrome工具，它显示如下：

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

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"
        }
      ]
  }
}

我的宝贝

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

app.jsx中的我的反应路由器设置

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'))

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var{Route，Router，Switch，BrowserRouter}=require（'react-Router-dom'）；
var Main=需要（'Main'）；
var内容=要求（“内容”）；
var About=要求（'About'）；
var触点=要求（“触点”）；
//应用程序css
require（'style-loader！css-loader！sass-loader！applicationstyle'）
require（'style-loader！css-loader！sass-loader！exampleStyles'）
//应用程序字体
require（'style-loader！css-loader！sass-loader！applicationfont'）
常量应用=（）=>(
)
ReactDOM.render((

请帮助..搜索整个互联网和这个stackoverflow，似乎找不到任何答案..再次感谢
检查此报告，它表明我无法将项目与您提供的github捆绑在一起。>错误：Module'/data/web/tests/feireactweb/node\u modules/react hot loader/index.js'不是加载程序（必须具有正常或倾斜功能）是否确实要阻止依赖项的版本。例如，可能是不兼容版本的Web包与加载程序之间存在冲突。
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'))