I am using webpack-dev-server with hot:true and use partials in templateParameters for HTML-webpack-plugin, HMR works fine when I change one of pages, but it doesn't when I change one of partials. How can I make dev-server to watch for some files constantly in every HTML file? Like if I change header.html then it will refresh every page displayed. Or the better one solution would be if somehow I can add dependencies for my HTML files to watch. I tried to add WatchPartials class from here https://github.com/vuejs/vue-loader/issues/1929, but it doesn't work.

My Partials, that will be added to templateParameters:

const PARTIALS = {}
fs.readdirSync(path.join(__dirname,'src','partials')).forEach((file) => {
    PARTIALS[file.replace(/.html/,'')] = fs.readFileSync(`./src/partials/${file}`,{encoding:'utf-8'})
}) 

My HtmlWebpackPlugin config:

plugins:[
    ...PAGES.map(page => new HtmlWebpackPlugin({
        template:`${PAGES_DIR}/${page}`,
        templateParameters:{
            PARTIALS
        },
        filename:`./${page}`,
        chunks:[page.replace(/\.html/,'')],
        minify:{
            collapseWhitespace:isProd
        }
    })),

and devserver config:

devServer:{
    port:4200,
    compress:true,
    hot:true,
    watchFiles:['src/**/*.html'],
},

and I call partial in html like this:

<%= PARTIALS.header %>
    <div class="wrapper">
        <main class="main">
            <div class="wrapper"><h1>Webpacks</h1></div>
            <div class="logo"></div>
            <div class="card"><h2>SCSS</h2></div>
        </main>
<%= PARTIALS.footer %>

Is that possible to make dev-server to watch partials without usage of partials plugins like Handlebars?