我可以熱服務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嗎？

回答

相關問題