Can I Hot-Serve index.html With webpack-dev-server?

Question

I have the webpack-dev-server with --hot enabled, and it works great ... for Javascript files. If I:

• create /src/someFile.js with the code document.write("Foo");
• add a <script> referencing /src/someFile.js to my index.html
• change /src/someFile.js to document.write("Bar");
• my browser immediately updates to show "Bar" instead of "Foo"

However, if I have <p>Foo</p> on my index.html file, and change it to <p>Bar</p>, I don't see the change. If I refresh the page I do see the change though, so I know webpack is serving index.html; it's just not hot-swapping it when I save the file.

Does anyone know how I can fix webpack-dev-server to automatically update my HTML in response to file changes?

Answer 1

This solution should work like a charm for you. In your example the steps are:

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.

Basically you're just making webpack aware of index.html so that it watches for changes. This is just a quick fix for your particular problem but for anyone interested in the more in-depth 'why' of this solution refer to the more thorough explanation linked above.