Webpack Dev Server: Nothing changed even after changing then recompiling the code

[FA5I]

• Operating System: Mac OS 10.15.7
• Node Version: 12.18.2
• NPM Version: 6.14.5
• webpack Version: ^5.3.0
• webpack-dev-server Version: ^3.11.0
• Browser: Chrome

• [x ] This is a bug
• [ ] This is a modification request

Code

// webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },

    devServer: {
        open: true,
        contentBase: path.resolve(__dirname, 'dist'),
        writeToDisk: true,
        index: 'index.html',
        port: 9090,
        hot: true,
        inline: true,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'My App - Dev',
            template: './src/index.hbs',
            description: 'Development Mode',
        }),
    ],
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg)$/,
                use: ['file-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/env'],
                        plugins: ['@babel/plugin-proposal-class-properties'],
                    },
                },
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                },
                exclude: /node_modules/,
            },
            {
                test: /\.hbs$/,
                use: ['handlebars-loader'],
            },
        ],
    },
}

//Webpack npm scripts
"build": "webpack --config webpack.production.config.js",
"dev": "webpack serve --config webpack.dev.config.js"

Expected Behavior

I am expecting the Webpack dev server to pick up changes to my source code. For example, if I change the title on my homepage, I would expect the code to recompile, then Webpack dev server to render the new, updated page.

Actual Behavior

Webpack dev server updates the page when I make the first update. For example, if I change the title from "Home" to "Homie" this renders.

Now if I subsequently change the title on the page from "Homie" to "Home", Webpack dev server says "nothing changed" in the browser console. This is not what should happen. As a result nothing gets updated, and I am stuck with manually closing down my Webpack dev server, and rerunning it.

Here is my browser console output:

I also uploaded a video showing the behaviour here: https://streamable.com/ebvinh

Any guidance appreciated!

For Bugs; How can we reproduce the behavior?

Type npm run dev using my Webpack dev config, and the error should play itself out.

The below shows the my directory structure:

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Set for HtmlWebpackPlugin cache: false

[cjstage]

Having this exact issue with Laravel Mix v.6 running npm run hot.

[laggingreflex]

Was having the same issue, what worked for me:

cache: false

https://webpack.js.org/configuration/cache/

[chenmingzhen]

Was having the same issue, what worked for me:

cache: false

https://webpack.js.org/configuration/cache/ This works for me, but before I didn't set cache. Hot update also worked. Now I don't understand what cache does. When I set the cache to false, I felt like my compilation slowed down a lot😕