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

Question

我有 webpack-dev-server 和 --hot已启用，并且效果很好……对于 Javascript 文件。如果我:

创建 /src/someFile.js与代码 document.write("Foo");

添加 <script>引用 /src/someFile.js到我的 index.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

This solution应该对你很有魅力。在您的示例中，步骤是:

npm install --save-dev raw-loader

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

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

添加 require('index.html');线到 /src/someFile.js 的顶部.

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