如何监视devserver webpack5中的部分更改？

Question

我正在使用webpack-dev服务器和热:真和使用在templateParameters中的部分为HTML插件，HMR工作很好，当我改变一个页面，但它不是当我改变一个部分。如何使开发服务器不断地监视每个HTML文件中的某些文件？就像我更改header.html一样，它会刷新显示的每一个页面。或者更好的解决方案是，如果我可以添加依赖关系，让我的HTML文件观看。我尝试从这里添加WatchPartials类https://github.com/vuejs/vue-loader/issues/1929，但是它不起作用。

我的部分，将添加到templateParameters中：

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

我的HtmlWebpackPlugin配置：

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

和devserver配置：

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

我在html中调用分部，如下所示：

<%= 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 %>

这是否有可能使开发服务器可以在不使用部分插件(如工具栏)的情况下监视部分？

Answer 1

这一点将在以下文件中讨论：

• https://github.com/colbyfayock/html-webpack-partials-plugin/issues/15
• https://github.com/colbyfayock/html-webpack-partials-plugin/issues/33
• https://github.com/pigcan/extra-watch-webpack-plugin

我能够实现一半，每次保存后都需要浏览器刷新，但至少webpack-dev-server构建了文件，而不是重新启动dev服务器并等待它编译。我怀疑源地图中断，然后需要刷新页面来更新内容。

npm i -D extra-watch-webpack-plugin

const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const Path                    = require("path");

module.exports = {
  plugins: [
    new ExtraWatchWebpackPlugin({ // This watches for changes to template partials, but requires browser refresh
      dirs: Path.resolve(__dirname, 'src'),
    }),
  ],
}