Webpack 4 иero-router-dom не собирается правильно

Question

Я столкнулся с проблемой, чтоero-router не работает с webpack4.webpack 4 не может собрать компоненты в я думаю, что моя конфигурация webpack - это что-то не так, однако я не мог понять, как исправить мои настройки.

это скриншот сайта на webpack-dev-server и тот, что послестроить.

module.exports = {
  devServer: {
    contentBase: './dist',
    open: true,
    port: Port,
    compress: true,
    publicPath: '/',
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: './index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

создать веб-сайт так же, как веб-пакет webpack-dev-server