Стоит ли переписать gulp на webpack?
webpack - это помойка. Медленная, грязная и монструозная. Попробуй лучше https://vitejs.dev/ или https://parceljs.org/

Ну или можно остаться на gulp, только тормознутый babel заменить на esbuild или swc, а sass компилировать dart-sass
Вот что у меня получилось

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const url = "http://bsbase.local/";

module.exports = {
    mode: 'development',
    // mode: 'production',
    entry: './assets/src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'assets/js'),
        filename: 'webpack.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    miniCss.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            sourceMap: true
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ],
    },
    plugins: [
        new miniCss({
            filename: '../css/my.css',
        }),
        new BrowserSyncPlugin(
            // BrowserSync options
            {
                // browse to http://localhost:3000/ during development
                host: 'localhost',
                port: 3000,
                // proxy the Webpack Dev Server endpoint
                // (which should be serving on http://localhost:3100/)
                // through BrowserSync
                proxy: url,
                open: false,
                notify: true,
                reloadDelay: 500,
                injectChanges: true,
                files: [
                    {
                        match: [
                            '**/*.php',
                            '**/*.js',
                            '**/*.css',
                        ],
                        fn: function (event, file) {
                            if (event === "change") {
                                const bs = require('browser-sync').get('bs-webpack-plugin');
                                bs.reload();
                            }
                        }
                    }
                ]
            },
            // plugin options
            {
                // prevent BrowserSync from reloading the page
                // and let Webpack Dev Server take care of this
                reload: false
            }
        )
    ]
};