Webpack dev server problem

package.json

{
  "name": "client",
  "version": "4.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "npm run cleanbuild",
    "build": "webpack --mode production",
    "postbuild": " cpr dist ../../PublishFiles/Web -o",
    "cleanbuild": "rimraf dist"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "axios": "^0.18.0",
    "firebase": "^5.5.4",
    "moment": "^2.22.2",
    "path": "^0.12.7",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-datepicker": "^1.8.0",
    "react-dom": "^16.5.2",
    "react-hot-loader": "^4.3.12",
    "react-redux": "^5.0.2",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "swiper": "^4.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.4.2",
    "babel-loader": "^8.0.4",
    "copy-webpack-plugin": "^4.5.3",
    "cpr": "^3.0.1",
    "css-loader": "^1.0.1",
    "cssnano": "^4.1.7",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "extract-loader": "^3.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "html-webpack-prefix-plugin": "^1.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.8.3",
    "postcss-loader": "^3.0.0",
    "redux-immutable-state-invariant": "^2.1.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1",
    "workbox-webpack-plugin": "^3.6.2",
    "write-file-webpack-plugin": "^4.4.1"
  }
}

webpack.config.js

const merge = require('webpack-merge');
const path = require('path');
const parts = require('./webpack.parts');

const PATHS = {
  app: path.join(__dirname, 'src'),
  build: path.join(__dirname, 'dist'),
  dev: path.join(__dirname, './../../PublishFiles/Web'),
};

const DEV_SERVER_SETUP = {
  disableHostCheck: true,
  host: 'localhost',
  https: true,
  port: 3000,
};

const commonConfig = merge([
  {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.json']
    },
  },
  parts.loadJavaScript({
    exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
  }),
  parts.setupGlobals(),
  parts.copyPublicFilesToDist(),
]);

const productionConfig = merge([
  {
    output: {
      chunkFilename: '[name].[chunkhash:4].js',
      filename: '[name].[chunkhash:4].js',
    },
    performance: {
      hints: 'warning', // "error" or false are valid too
      maxEntrypointSize: 1500000, // in bytes, default 250k
      maxAssetSize: 1050000, // in bytes
    },
    stats: 'minimal',
  },
  parts.loadCSS(true),
  parts.loadImages({
    options: {
      limit: 15000,
      name: '[name].[hash:4].[ext]',
    },
  }),
  parts.setupServiceWorker(),
  // parts.analyzeBundle(),
]);

const developmentConfig = merge([
  {
    devtool: 'inline-source-map',
  },
  {
    output: {
      path: PATHS.dev,
    },
  },
  parts.devServer({
    host: DEV_SERVER_SETUP.host,
    https: DEV_SERVER_SETUP.https,
    port: DEV_SERVER_SETUP.port,
  }),
  parts.loadCSS(false),
  parts.loadImages(),
]);

module.exports = (env, argv) => {
  const pages = [
    parts.page({
      devSetup: argv.mode === 'development',
      entry: {
        app: PATHS.app,
      },
    }),
  ];
  const config = argv.mode === 'production' ? productionConfig : developmentConfig;
  return merge([commonConfig, config, { mode: argv.mode }].concat(pages));
};

webpack.parts.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPrefixPlugin = require('html-webpack-prefix-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const { GenerateSW } = require('workbox-webpack-plugin');

exports.page = ({
  devSetup = false,
  entry,
} = {}) => ({
  entry,
  plugins: devSetup
    ? [
      new HtmlWebpackPlugin({
        prefix: 'https://localhost:3000/',
        template: './public/index.html',
        title: 'iSubscribe - DEV',
      }),
      new HtmlWebpackPrefixPlugin(),
      new WriteFilePlugin({
        test: /\.html$/,
      }),
    ]
    : [
      new HtmlWebpackPlugin({
        template: './public/index.html',
        title: 'iSubscribe',
      }),
    ],
});

exports.analyzeBundle = () => ({
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
});

exports.copyPublicFilesToDist = () => ({
  plugins: [
    new CopyWebpackPlugin(
      [{ from: './public', to: './' }],
      { ignore: ['*.html'] },
    ),
  ],
});

exports.devServer = ({ host, port, https } = {}) => ({
  devServer: {
    host,
    https,
    port,
    stats: 'errors-only',
  },
});

exports.loadCSS = (isInProductionMode = false) => ({
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          isInProductionMode ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  isInProductionMode,
                },
              },
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    isInProductionMode && new MiniCssExtractPlugin({
      filename: '[name].styles.[chunkhash:4].css',
    }),
  ],
});

exports.loadImages = ({ include, exclude, options } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(png|jpg)$/,
        include,
        exclude,
        use: {
          loader: 'url-loader',
          options,
        },
      },
    ],
  },
});

exports.loadJavaScript = ({ include, exclude } = {}) => ({
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include,
        exclude,
        use: {
          loader: 'babel-loader',
          query: {
            // To silence size warning in compilation
            compact: false,
          },
        },
      },
    ],
  },
});

exports.setupGlobals = () => ({
  plugins: [
    new webpack.DefinePlugin({
      __API_URL__: JSON.stringify(''),
    }),
  ],
});

exports.setupServiceWorker = () => ({
  plugins: [
    new GenerateSW({
      include: [/\.html$/, /\.js$/, /\.css/, /\.json/, /\.jpg/, /\.png/, /\.ico/, /\.eot/, /\.woff2/, /\.woff/, /\.ttf/],
      swDest: 'sw.js',
    }),
  ],
});