更改src后无法使webpack + gulp将Javascript注入浏览器

Question

运行gulp后，监视实时服务器正在运行。如果我在js中进行更改，则什么也不会发生。更改js后，我需要查看浏览器中的更改。我不能使用像webpack-dev-server这样的不同方法，因为我想使用gulp watch来处理scss，img和其他任务。在JS中进行更改后，看起来好像正在计算（[Browsersync]正在重新加载浏览器...）并阻止接下来的更改。

const gulp = require("gulp")
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const browserSync = require('browser-sync').create()

const webpackConfigDev = {
  entry: {
    main: [
      './src/js/main.js',
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client'
    ]
  },
  output: {
    path: __dirname + 'dist/js',
    filename: 'main.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
  ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

gulp.task('webpack', function () {
  return new Promise(resolve => webpack(config, (err, stats) => {

    if (err) console.log('Webpack', err)

    console.log(stats.toString({ /* stats options */ }))

    resolve()
}))
})

//  watch functions
function serve() {
  return browserSync.init({
    server: './dist',
    port: 4500,
    open: true,
    middleware: [
        webpackDevMiddleware(webpack(webpackConfigDev), { /* options */ }),
        webpackHotMiddleware(webpack(webpackConfigDev))
    ],
  });
}

gulp.task('watch', function() {
  serve()

  gulp.watch("./src/js/**/*.js", gulp.series(browserSync.reload))
});

gulp.task('watch', gulp.series('watch'))

谢谢。