Browsersync and the files don't work/load

This is my functions.php:

// Require the composer autoload for getting conflict-free access to enqueue
require_once __DIR__ . '/vendor/autoload.php';

// Instantiate the Enque Class to load the compiled assets
global $enq;
$enq = new \WPackio\Enqueue( 'saron', 'dist', '1.0.0', 'theme', __FILE__ );

//Scrips for the frontend
function engueueScripts(){
    global $enq;
    $res = $enq->enqueue( 'theme', 'main', ['jquery'] );
}
//Scripts for the style
function engueueStyle(){
    global $enq;
    $res = $enq->enqueue( 'theme', 'style',[] );
}
//Scripts and Styles for the Backend 
function engueueAdminScripts(){
    global $enq;
    $res = $enq->enqueue( 'theme', 'admin',[] );
}

add_action( 'wp_enqueue_scripts','engueueScripts' );
add_action( 'wp_enqueue_scripts','engueueStyle' );
add_action( 'admin_enqueue_scripts','engueueAdminScripts' );

This is my wpackio.project.js:

const pkg = require('./package.json');

module.exports = {
    // Project Identity
    appName: 'saron', // Unique name of your project
    type: 'theme', // Plugin or theme
    slug: 'saron', // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
    // Used to generate banners on top of compiled stuff
    bannerConfig: {
        name: 'saron',
        author: '',
        license: 'UNLICENSED',
        link: 'UNLICENSED',
        version: pkg.version,
        copyrightText:
            'This software is released under the UNLICENSED License\nhttps://opensource.org/licenses/UNLICENSED',
        credit: true,
    },
    // Files we need to compile, and where to put
    files: [
        // If this has length === 1, then single compiler
        {
            name: 'theme',
            entry: {
                // mention each non-interdependent files as entry points
             // The keys of the object will be used to generate filenames
             // The values can be string or Array of strings (string|string[])
             // But unlike webpack itself, it can not be anything else
             // <https://webpack.js.org/concepts/#entry>
             // You do not need to worry about file-size, because we would do
             // code splitting automatically. When using ES6 modules, forget
             // global namespace pollutions 😉
                main: './js/main.js', // Could be a string
                style: './sass/style.scss', // Or an array of string (string[])
                admin: './sass/admin/admin.scss'
            },
            // Extra webpack config to be passed directly
            webpackConfig: undefined,
        },
        // If has more length, then multi-compiler
    ],
    // Output path relative to the context directory
    // We need relative path here, else, we can not map to publicPath
    outputPath: 'dist',
    // Project specific config
    // Needs react(jsx)?
    hasReact: false,
    // Disable react refresh
    disableReactRefresh: false,
    // Needs sass?
    hasSass: true,
    // Needs less?
    hasLess: false,
    // Needs flowtype?
    hasFlow: false,
    // Externals
    // <https://webpack.js.org/configuration/externals/>
    externals: {
        jquery: 'jQuery',
    },
    // Webpack Aliases
    // <https://webpack.js.org/configuration/resolve/#resolve-alias>
    alias: undefined,
    // Show overlay on development
    errorOverlay: true,
    // Auto optimization by webpack
    // Split all common chunks with default config
    // <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
    // Won't hurt because we use PHP to automate loading
    optimizeSplitChunks: true,
    // Usually PHP and other files to watch and reload when changed
    watch: './**/*.php',
    // Files that you want to copy to your ultimate theme/plugin package
    // Supports glob matching from minimatch
    // @link <https://github.com/isaacs/minimatch#usage>
    packageFiles: [
        'inc/**',
        'vendor/**',
        'dist/**',
        '*.php',
        '*.md',
        'readme.txt',
        'languages/**',
        'layouts/**',
        'LICENSE',
        '*.css',
    ],
    // Path to package directory, relative to the root
    packageDirPath: 'package',
};

When I go to the browser, the js file doesn't load. (I have a console.log in the main file). Also when I make changes, the browser doesn't load.

swashata / wp-webpack-script

Browsersync and the files don't work/load #1175