Webpack-Dev-Server регистрирует изменения, но не встраивает их

Question

Я пытаюсь понять webpack и создать простой шаблон для использования в новых проектах. Я застрял при получении горячей замены для правильной работы.

Когда я изменяю файл, всплывающее сообщение Browserync появляется, но изменения не применяются.

У меня есть:

• установить contentBase в публичный каталог и publicPath в /assets/scripts/
• установлено inline и hot установлено на true
• попытался установить inline и hot в скрипте пряжи
• запуск скрипта пряжи от имени sudo

Вот этот репозиторий: https://github.com/danfoust/basic-webpack

Моя структура каталогов:

Мой конфиг веб-пакета:

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'assets/scripts/bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    devServer: {
        contentBase: path.resolve(__dirname, './'),
        publicPath: '/assets/scripts/',
        compress: true,
        open: true,
        hot: true,
        inline: true,
        watchOptions: {
            ignored: /node_modules/
        }
    },
    module: {
        rules: [
            { // Babel Transpiler
              test: /\.m?js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            },
            { // Sass
                test: /\.scss$/,
                include: path.resolve(__dirname, 'src/assets/styles'),
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
            { // HTML
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
              }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "assets/styles/[name].css",
            chunkFilename: "assets/styles/[id].css"
        }),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'http://localhost:8080/public',
        }),
        new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
        })
    ]
};