5

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?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Two quick ideas to try. Point to `index.html` through an entry. You might need to set up a noop-loader against html. The point is that after that it's visible to webpack -> HMR should work. Another option would be to try [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) and generate index.html through it. You would handle modifications through its templating setup. – Juho Vepsäläinen Jun 10 '16 at 05:58
  • Thanks for the suggestions, but I'm afraid I'm somewhat new to Webpack, so I'm not exactly sure how to do all that. I changed my `entry` to be an array of my `index.htm` and `app.js`, but then webpack complains about the loader. And really I don't want an HTML loader, since my app has no need to load HTML as JS; I just want the (static, unprocessed) HTML file to hot-reload. – machineghost Jun 10 '16 at 18:41
  • Yeah. It would have to be a part of the entry array, not the primary entry itself. And even then you would have to pass html through a noop loader to avoid that error you mentioned. html-webpack-plugin could be a better option. Third option would be to have `require.context` pointing to index.html somewhere. The main thing is that you point to the file somehow as otherwise it won't be watched. – Juho Vepsäläinen Jun 11 '16 at 05:03

1 Answers1

7

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.

Community
  • 1
  • 1
Southerneer
  • 1,962
  • 1
  • 13
  • 21