adding 'html-webpack-plugin' to webpack.config.js makes events not firing

I am trying to create react boiler plate project. events are not getting triggered if I add HtmlWebpackPlugin too list of plugins in webpack.config.js. below is webpack.config.js,

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: path.resolve(__dirname, './src/index.js'),
 module: {
 rules: [
   {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
   },
   {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ['style-loader', 'css-loader'],
   },
  ],
 },
 resolve: {
  extensions: ['*', '.js', '.jsx'],
 },
output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'bundle.js',
},
plugins: [ new webpack.HotModuleReplacementPlugin()],
devServer: {
   contentBase: path.resolve(__dirname, './dist'),
   hot: true,
   port: 8040,
   open: true
 },
};

below is my app.js,

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = { username: '' };
    this.myChangeHandler = this.myChangeHandler.bind(this);
 }
 myChangeHandler(event) {
    console.log('myChangeHandler');
    this.setState({ username: event.target.value });
 }
 render() {
    return (
        <form>
            <h1>Hello {this.state.username}</h1>
            <p>Enter your name:</p>
            <input
                type='text'
                onChange={this.myChangeHandler}
            />
        </form>
    );
   }
 }

If i add 'html-webpack-plugin' to plugins my dom events are not firing. this can sound weird but it's happening can i know why?

below is snippet,

 new HtmlWebPackPlugin({
     template: path.resolve(__dirname, 'public/index.html'),
     filename: 'index.html'
  })