我可以使用 webpack-dev-server 热服务 index.html 吗？

Question

我--hot启用了 webpack-dev-server ，它工作得很好......对于 Javascript 文件。如果我：

• /src/someFile.js用代码创建document.write("Foo");
• 添加对我的<script>引用/src/someFile.jsindex.html
• 更改/src/someFile.js为document.write("Bar");
• 我的浏览器立即更新以显示“Bar”而不是“Foo”

但是，如果我有<p>Foo</p>我的index.html文件，并将其更改为<p>Bar</p>，我看不到更改。如果我刷新页面，我确实看到了变化，所以我知道 webpack 正在服务index.html；当我保存文件时，它只是不热交换它。

有谁知道如何修复webpack-dev-server以响应文件更改自动更新我的 HTML？

Answer 1

这个解决方案对你来说应该是一种魅力。在您的示例中，步骤是：

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

2. 将此添加到您的 webpack.config 加载程序部分...

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

3. require('index.html');在 的顶部添加一行/src/someFile.js。

基本上你只是让 webpack 知道 index.html 以便它监视变化。这只是针对您的特定问题的快速解决方案，但对于对此解决方案更深入的“原因”感兴趣的任何人，请参阅上面链接的更详尽的解释。