Hot-reloading doesn't work. Webpack doesn't reload page in browser

webpack compiling project but page in browser doesn't reload

i'm using webpack and expressjs

server.js

const express = require('express'),
    app = express(),
    config = require('../dev/webpack.dev.config'),
    compiler = require('webpack')(config),
    history = require('connect-history-api-fallback'),
    PORT = 3000;

app.use(history());

app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath
}))

app.use(require('webpack-hot-middleware')(compiler, { reload: true }));


app.listen(PORT, (err) => {
    if (err) {
        console.error(err);
    } else {
        console.log(`Server listening on port ${PORT}`)
    }
})

webpack.dev.config.js

const path = require('path'),
 VueLoaderPlugin = require('vue-loader/lib/plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    webpack = require('webpack');

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, '../dist'),
        publicPath: "/"
    },
    devServer: {
        contentBase: './dist',
        hot: true,
        port: 3000
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ],
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        },
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({template: './src/index.template.html'}),
        new webpack.HotModuleReplacementPlugin()
    ],
}

i'm start the server with node run server/server, webpack compiling, i open localhost, change something in main.js, save that, webpack recompiling, but page does not hot reloading