webpack-dev-server可以热加载index.html文件吗？

Question

我使用启用了--hot的webpack-dev-server，它能很好地工作...但仅限于JavaScript文件。如果我：

• 创建/src/someFile.js并添加document.write("Foo");代码
• 在index.html文件中添加引用/src/someFile.js的<script>标签
• 将/src/someFile.js更改为document.write("Bar");
• 那么我的浏览器立即更新并显示"Bar"而不是"Foo"

然而，如果我在index.html上有一个<p>Foo</p>，并将其更改为<p>Bar</p>，我看不到变化。但是，如果我刷新页面，我就会看到更改了，所以我知道webpack正在提供index.html；只是当我保存文件时没有进行热交换。

有人知道我如何修复webpack-dev-server，使其自动更新HTML以响应文件更改吗？

- machineghost

---

尝试两个快速的想法。通过一个入口指向 index.html。你可能需要设置一个 noop-loader 来防止 html 被处理。重点是在这之后，webpack 可以看到它 -> HMR 应该可以工作了。另一个选择是尝试 html-webpack-plugin 并通过它生成 index.html。你可以通过它的模板设置来处理修改。 - Juho Vepsäläinen

谢谢您的建议，但我对Webpack还比较新，所以我不太确定如何做到这一点。我将我的“entry”更改为我的“index.htm”和“app.js”的数组，但是然后Webpack会抱怨加载器。而且实际上我不想要一个HTML加载器，因为我的应用程序不需要将HTML作为JS加载；我只想要（静态、未处理的）HTML文件进行热重载。 - machineghost

是的。它必须是条目数组的一部分，而不是主要条目本身。即使这样，您也必须通过noop加载器传递html以避免您提到的错误。 html-webpack-plugin可能是更好的选择。第三个选项是将require.context指向index.html的某个位置。主要问题是以某种方式指向文件，否则它将不会被监视。 - Juho Vepsäläinen

Answer 1

这个解决方案 对你应该很有效。在你的例子中，步骤如下：

1. npm install --save-dev raw-loader

2. Add this to your webpack.config loaders section...

   {
     test: /\.html$/,
     loader: "raw-loader"
   }
   

3. Add a require('index.html'); line to the top of /src/someFile.js.

基本上，你只是让webpack知道index.html文件，这样它就可以监视变化。这只是解决您特定问题的快速修复方法，但对于任何对此解决方案的更深入了解感兴趣的人，请参考上面链接的更全面的解释。

- Southerneer