Webpack Hot Middleware не создает index.ejs

Question

Я пытаюсь использовать в своем приложении webpack-dev-middleware и webpack-hot-middleware. Мне удалось настроить webpack для корректной перезагрузки js-файлов. Однако, чтобы увидеть изменения, сделанные в файлах CSS, мне нужно обновить страницу. Более того, index.ejs вообще не создается в памяти. Мне нужно запустить webpack --config webpack.config.js , чтобы создать его. Есть ли способ создать его на лету, используя промежуточное ПО для веб-пакетов?

Мой код:

Webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    name: 'client',
    mode: 'none',
    entry: {
        main: ['webpack-hot-middleware/client?reload=true','./src/public/js/index.js']
    } ,
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'public/js/bundle.js'
    },
    target: 'web',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {

                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass')
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'public/images'
                        }
                    }
                ]
            },
            {
                // Apply rule for fonts files
                test: /\.(woff|woff2|ttf|otf|eot)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: '../fonts'
                        }
                    }
                ]
            },
            {
                test: /\.(ejs)$/,
                loader: 'ejs-compiled-loader'
            }
        ]
    },

    plugins: [

        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            minify: {
                removeComments: true,
                collapseWhitespace: true
              },
            filename: './views/index.ejs',
            template: '!!ejs-compiled-loader!./src/views/index.ejs'
        }),
        new MiniCssExtractPlugin({
            filename: 'public/css/bundle.css'
        })
    ]


}

App.js:

const express = require('express');
const path = require('path');
const app = express();
const port = 8081;

// WEBPACK
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.js');
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
  hot: true,
  filename: 'public/js/bundle.js',
  publicPath: webpackConfig.output.publicPath,
}));
app.use(webpackHotMiddleware(compiler));
app.use(express.static(path.join(__dirname + '/public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.set('views', path.join(__dirname + '/views'));
app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').__express);

app.get('/', function(req,res){
  res.render('index');
});

app.listen(port, () => console.log(`App listening on port ${port}!`));

index.js

// GLOBAL APP CONTROLLER
import '../sass/main.scss';
import "core-js/stable";
import "regenerator-runtime/runtime";

// Needed for Hot Module Replacement
if (module.hot) {
  module.hot.accept();
}