php - Hot reload with webpack in project codeigniter 4

one text

i am init a project in codeigniter 4 with vue js, but have problems in config hot reload in webpack with php (CodeIgniter 4). below followed config of webpack.

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack')
const path = require('path')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'public/js'),
    publicPath: 'http://localhost:8080'
},
module: {
    rules: [
        { test: /\.js$/, use: 'babel-loader' },
        { test: /\.vue$/, use: 'vue-loader' },
        { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
    ]
},
plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    // new BrowserSyncPlugin({
    //     // browse to http://localhost:3000/ during development,
    //     // ./public directory is being served
    //     host: 'localhost',
    //     port: 3000,
    //     server: { baseDir: ['public'] }
    //   })
],
devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    historyApiFallback: true,
    host:  'localhost', 
    hot: true,
    port: '3000',
    headers: { 'Access-Control-Allow-Origin': '*' },
},
resolve: {
    extensions: ['.js', '.vue'],
    alias: {
         "@": require("path").resolve(__dirname, "./src")
     }
 },
 target: 'web'
};

As I am a beginner with webpack I do not know how to configure it correctly, I would like something similar to the laravel-mix, where I do not need to keep giving f5 on the page, I am open to suggestions.

Thanks