webpack-dev-server not recompiling the output file

Question

This is my webpack file, nothing special

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        publicPath: '/public/scripts/',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        watchContentBase : true, 
        publicPath: '/scripts/'
    }
}

However, when I run 'npm run webpack-dev-server', I get the normal node.js output but the website does not update when new changes are made. I deleted the bundle.js file and when I ran it again, I got an error saying 'bundle.js cannot be found'. I figured out that bundle.js is not being recompiled at all when running this command.

I am on windows if that makes any difference. Any help would be appreciated.

EDIT: Below is my folder structure.

Answer 1

You need to use watchContentBase option for devServer:

watchContentBase:true

Would also recommend setting hot:true for modules replecement and open:true - so when you will run the dev server it will automatically open you your site at default browser. More on devServer options you could find here - https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-

EDIT

So after quite long conversation in chat, here are the results:

Still to "live-reload" the page you should use

watchContentBase

But there were other issues in this case - publicPath in devServer and outputPath were not the same and then index.html should reference bundle.js under /public/scripts

New webpack.config.js:

    const path = require('path')
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, '/public/scripts'),
            publicPath: '/public/scripts',
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }]
        },
        devServer: {
            contentBase: path.resolve(__dirname, 'public'),
            watchContentBase : true, 
            publicPath: '/public/scripts'
        }
    }

New src for bundle in Index.html: /public/scripts/bundle.js