Question

我将 webpack 用于小型应用程序。现在我想将所有部分拆分为部分，所以我的 src- 文件夹看起来像这样：

- src
   - navigation
       nav.html
   - gallery
       gallery.html
etc etc.

所以，在我的 index.html 文件中，我包含了这样的部分：

<body>
    <navigation></navigation>

为此，我添加了 HtmlWebpackPartialsPlugin 并像这样包含它：

plugins: [
     new HtmlWebpackPartialsPlugin({
        path: path.join(__dirname, './src/partials/navigation/nav.html'),
        location: 'navigation',
        priority: 'replace',
        template_filename: ['index.html']
     }),
]

到目前为止，这工作正常，但是当我编辑代码并保存它时，热重载根本不起作用，每次更改某些内容时我都必须手动刷新浏览器 - 这很烦人。所以我尝试添加 ExtraWatchWebpackPlugin 并将其添加到我的 webpack 配置文件中：

new ExtraWatchWebpackPlugin({
  files: [ 'src/partials/**/*.html' ],
  dirs: [ path.join(__dirname, 'src') ],
}),

并将 hot:true 添加到我的 devServer

devServer: {
   watchContentBase: true,
   contentBase: path.resolve(__dirname, "dist"),
   open: true,
   port: 9000,
   hot: true
},

但这根本没有影响...我该如何解决这个问题？

如何修复 html 部分的热重载

0 个答案: