Brower reloads on file changed

hot-server.js

/* eslint-disable no-console */

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const LogPlugin = require('./webpack-plugins/bundling-lifecycle-log-plugin');

const config = require('./webpack.config.js');

const WEB_PORT = 7002;
const API_PORT = 7001;
const HOST = 'http://localhost';

console.log(`Open ${HOST}:${WEB_PORT} to Enjoy Your Nice Development Trip`);

config.entry.app.unshift(`webpack-dev-server/client?${HOST}:${WEB_PORT}/`);
config.plugins.push(new ProgressBarPlugin({
  format: '[BUILDING] :percent :msg',
  renderThrottle: 500,
  clear: false,
}));
config.plugins.push(new LogPlugin());
config.devtool = 'eval';

const compiler = webpack(config);

const API_SERVER = `${HOST}:${API_PORT}`;
const server = new WebpackDevServer(compiler, {
  noInfo: true,

  proxy: {
    '/api/*': API_SERVER,
    // '/static/*': API_SERVER,
  },
});

server.listen(WEB_PORT, (err) => {
  if (err) console.log(err);
});