当 webpack-dev-middleware 构建文件时，BrowserSync 不会重新加载浏览器

如何解决当 webpack-dev-middleware 构建文件时，BrowserSync 不会重新加载浏览器

我正在尝试同时使用 Webpack 和 browserSync，但我遇到了一个问题，即 Hot Reload 可以工作，但是每当我重建 JavaScript 文件时浏览器都不会重新加载。

我基本上是在尝试将 src/js/app.js 编译成 app/public/js/app.js。

app.js 具有以下内容：

import Vue from 'vue';
import Timer from './components/Timer';

new Vue({
    el: '#root',components: {
        'v-timer': Timer
    }
});

console.log('Ready to go!');

如果我更新我的 Timer 组件，HMR 工作正常。但是，如果我对 src/js/app.js 进行更改，则会得到以下控制台输出：

asset app.js 480 KiB [emitted] (name: app)
asset app.14c6da15059fd44d0a82.hot-update.js 1.7 KiB [emitted] [immutable] [hmr] (name: app)     
asset app.14c6da15059fd44d0a82.hot-update.json 27 bytes [emitted] [immutable] [hmr]

但 browserSync 不会重新加载浏览器。

这是我的 browserSync 配置：

browsersync({
    "ui": false,/* Watch the files that we will be directly editing. */
    "files": [
        'app/index.html','app/public/css/*.css'
    ],"watchEvents": [
        "change","add"
    ],"server": {
        baseDir: 'app'
    },"port": 3000,"middleware": [
        webpackDevMiddleware(compiler,{
            publicPath: config.output.publicPath,}),webpackHotMiddleware(compiler)
    ],"open": false,"reloadOnRestart": true,"notify": false,"reloadDebounce": 500,})

我该如何解决这个问题？