Estoy usando webpack-dev-server con hot:true y uso parciales en templateParameters para HTML-webpack-plugin, HMR funciona bien cuando cambio una de las páginas, pero no cuando cambio una de las parciales. ¿Cómo puedo hacer que el servidor de desarrollo busque algunos archivos constantemente en cada archivo HTML? Al igual que si cambio header.html, se actualizará cada página que se muestra. O la mejor solución sería si de alguna manera pudiera agregar dependencias para que miren mis archivos HTML. Intenté agregar la clase WatchPartials desde aquí https://github.com/vuejs/vue-loader/issues/1929 , pero no funciona.
Mis parciales, que se agregarán a templateParameters:
const PARTIALS = {} fs.readdirSync(path.join(__dirname,'src','partials')).forEach((file) => { PARTIALS[file.replace(/.html/,'')] = fs.readFileSync(`./src/partials/${file}`,{encoding:'utf-8'}) })Mi configuración HtmlWebpackPlugin:
plugins:[ ...PAGES.map(page => new HtmlWebpackPlugin({ template:`${PAGES_DIR}/${page}`, templateParameters:{ PARTIALS }, filename:`./${page}`, chunks:[page.replace(/\.html/,'')], minify:{ collapseWhitespace:isProd } })),y configuración del servidor de desarrollo:
devServer:{ port:4200, compress:true, hot:true, watchFiles:['src/**/*.html'], },y llamo parcial en html así:
<%= 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 %>¿Es posible hacer que el servidor de desarrollo vea parciales sin el uso de complementos parciales como Handlebars?