enter image description herethe course I’ve bought is from 2019 and the teacher uses older version of babel-loader, webpack, webpack-cli, and webpack-dev-server, i managed to make it kinda work but it now can’t find where im running my code on and live-server isn’t picking up live changes in my code from my src file… only from my babel file in public. Project is running at can’t pick up where it even is running so my live-server and webpack-dev-server are not alligned together. any help would be appreciated in the mean time I’ll stick to running webpack –watch.

this was the one the teacher did

const path = require('path')

module.exports = {
entry: './src/index.js',
output: {
    path: path.resolve(__dirname, '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'),
    publicPath: '/scripts/'
}

}

the new try
const path = require('path')

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

}