如何觀察 devserver webpack5 中的部分變化？

Question

我正在使用帶有 hot:true 的 webpack-dev-server 並在 HTML-webpack-plugin 的 templateParameters 中使用部分，當我更改其中一個頁面時，HMR 工作正常，但當我更改其中一個部分時它不會。 如何讓開發服務器在每個 HTML 文件中不斷監視一些文件？ 就像如果我更改 header.html 那么它將刷新顯示的每個頁面。 或者更好的一種解決方案是，如果我可以以某種方式為我的 HTML 文件添加依賴項以供觀看。 我試圖從這里https://github.com/vuejs/vue-loader/issues/1929添加 WatchPartials class ，但它不起作用。

我的 Partials，將被添加到 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:{
    port:4200,
    compress:true,
    hot:true,
    watchFiles:['src/**/*.html'],
},

我在 html 中調用 partial ，如下所示：

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

是否可以讓開發服務器在不使用像 Handlebars 這樣的部分插件的情況下觀看部分內容？

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會構建文件，而不必重新啟動開發服務器並等待它編譯。 我懷疑源 map 中斷，然后需要刷新頁面來更新內容。

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'),
    }),
  ],
}