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

我有启用了--hot的webpack-dev-server，并且它对Javascript文件很有用。如果我：我可以热服务index.html使用webpack-dev-server吗？

创建/src/someFile.js与代码document.write("Foo");
添加<script>引用/src/someFile.js我index.html
变化/src/someFile.js到document.write("Bar");
我的浏览器会立即更新，以显示“酒吧”，而不是“富”

但是，如果我有<p>Foo</p>上我的index.html文件，并将其更改为<p>Bar</p>，我没有看到更改。如果我刷新页面，我确实看到更改，所以我知道webpack正在服务index.html;当我保存文件时，它不会热插拔它。

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

来源

2016-06-09 machineghost

两个快速的想法尝试。通过条目指向'index.html'。您可能需要设置一个针对html的noop-loader。关键是，之后它是可见的webpack - > HMR应该工作。另一种选择是尝试[html-webpack-plugin]（https://www.npmjs.com/package/html-webpack-plugin）并通过它生成index.html。您将通过其模板设置来处理修改。 –

感谢您的建议，但恐怕我对Webpack有点新鲜，所以我不确定如何去做。我把我的'entry'改成了我的'index.htm'和'app.js'的数组，但是webpack抱怨加载器。而且我真的不需要HTML加载器，因为我的应用程序不需要将HTML加载为JS;我只想要（静态的，未经处理的）HTML文件重新加载。 – machineghost

是的。它必须是入口数组的一部分，而不是主要入口本身。即使如此，您也必须通过noop加载器来传递html，以避免您提到的错误。 html-webpack-plugin可能是更好的选择。第三个选择是让'require.context'指向index.html的某处。最主要的是你以某种方式指向文件，否则它将不被监视。 –

This solution应该像你的魅力。在您的示例中的步骤是：

npm install --save-dev raw-loader

添加到您的webpack.config装载机节...

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

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

基本上，你只是让webpack意识到index.html，以便它观察变化。这只是针对您的特定问题的快速解决方案，但对于对此解决方案更深入的“为什么”感兴趣的任何人，请参阅上面链接的更全面的解释。

来源

2016-06-22 22:51:39 Southerneer

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

回答

相关问题