Page does not refresh on HTML change when HMR is on

[andreyvolokitin]

• Operating System: OS X 10.11.6
• Node Version: 9.2.1
• NPM Version: 5.6.0
• webpack Version: 3.8.1
• webpack-dev-server Version: 2.10.1

• This is a bug
• This is a modification request

Code

https://github.com/andreyvolokitin/test-webpack-dev-server

Expected Behavior

Editing ./src/index.html should cause recompiling and page refresh in the browser

Actual Behavior

Recompiling is happening, but the page in the browser does not refresh

For Bugs; How can we reproduce the behavior?

1. git clone https://github.com/andreyvolokitin/test-webpack-dev-server && cd test-webpack-dev-server
2. npm install && npm start
3. Edit ./src/index.html — compiling is happening, but the page in the browser does not refresh
4. Open browser console and edit ./src/test.js — HMR works

[andreyvolokitin]

I found that it is possible to get a list of changed files which caused recompilation. Would it be feasible to add some logic here, so that when the list of changed files contains certain extensions — we pass a flag to _sendStats() to indicate that full page reload is needed? It is unclear by now what extensions should be included: .html is fine, but what about countless templating engines which could be used instead and would need the same logic applied?

[alexander-akait]

@andreyvolokitin we use this snippet for php:

    before(app, server) {
      const chokidar = require("chokidar");
      const files = [
        // Refreshing php files
        "**/*.php"
      ];

      chokidar
        .watch(files, {
          alwaysStat: true,
          atomic: false,
          followSymlinks: false,
          ignoreInitial: true,
          ignorePermissionErrors: true,
          ignored,
          interval: typeof poll === "number" ? poll : null,
          persistent: true,
          usePolling: Boolean(poll)
        })
        .on("all", () => {
          server.sockWrite(server.sockets, "content-changed");
        });
    }

[alexander-akait]

@shellscape what do you think about add to documentation example above?

[andreyvolokitin]

@evilebottnawi thanks! It works, but what about async issues — i.e. we pass a content-changed to a socket, and at the same time webpack is starting to compile the same files. We need to reload the page after webpack compilation, but as far as I understand with this snippet there is no guarantee of that? Probably we can add some delay then, but we can not precisely know the exact current compilation time to accommodate it in a delay (and this may cause unwanted delay time). Or this is actually no-issue?

[alexander-akait]

@andreyvolokitin can you describe you issue on example? You can add own logic to snippet above, also you can use browser-sync plugin for webpack.

[andreyvolokitin]

@evilebottnawi my .html files are generated using PostHTML, so webpack is compiling them from the source during each recompilation (they are used by HtmlWebpackPlugin in a template option). This snippet is using chokidar to watch .html files. Webpack is watching the same files. When files change — webpack starts a recompilation, and at the same time chokidar is executing its callback (server.sockWrite(server.sockets, "content-changed");). So webpack recompilation needs to complete before page refresh happens, so that newly generated HTML actually appears in the browser. Might this be a race condition, like if page refresh happens before webpack completes recompilation, so that refreshed page will contain old HTML?

[andreyvolokitin]

What I mean is there are two separate processes: webpack compilation of updated HTML and chokidar callback on this HTML changes. They need to complete one after another, but there is no guarantee for that

[alexander-akait]

@andreyvolokitin HtmlWebpackPlugin works through webpack api and should be compatibility with dev-server no need manually reload (i am not familiar with html plugin)

[andreyvolokitin]

@evilebottnawi with HtmlWebpackPlugin the page is not reloaded when .html changes. There are numerous issues about this in html-webpack-plugin repo (i.e. jantimon/html-webpack-plugin#232), as well as this repo and probably others too. The example code from this issue is actually using html-webpack-plugin and shows this (https://github.com/andreyvolokitin/test-webpack-dev-server). But it is clear that this issue comes from webpack-dev-server which simply does not take .html changes into account when hot: true

[andreyvolokitin]

@evilebottnawi Would it be a bad thing to add an option to webpack-dev-server, containing a list of required file extensions (like ['.html', '.jade']) which then would be used as described here: #1271 (comment) ? I know I can watch source html files and reload the page on their changes, but it looks like a hack considering that my html is compiled. Page reload should be more like compilation callback and not a parallel process of compilation. And it is clear that this feature is needed either way

[andreyvolokitin]

If it would be possible though to subscribe a one-time function to compiler event hook like "done" within chokidar callback inside devServer.before(), then I could get a page reload guaranteed after compiling. But I am afraid devServer.before() does not expose webpack compiler... And I guess there is no way do define a "once" callback on compiler

[andreyvolokitin]

Maybe add "onCompile" callback here and expose compiler and server to it? Then on each compile, it will be possible to get changed files with compiler.watchFileSystem.watcher.mtimes and to do page reload with server.sockWrite(server.sockets, "content-changed"):

devServer: {
  hot: true,
  onCompile(compiler, server) {
    const watchFiles = ['.html', '.hbs'];
    const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);

    if (
      this.hot && 
      changedFiles.some(filePath => watchFiles.includes(path.parse(filePath).ext))
    ) {
      server.sockWrite(server.sockets, "content-changed");
    }
  }
}

[andreyvolokitin]

I think I found a minimal change that can suit the need: simply expose compiler to before and after callbacks. Then everything could be done within the custom handler, because apparently, it is possible to add multiple hooks for same compiler event (compiler.plugin('done', fn)):

devServer: {
  hot: true,
  before(app, server, compiler) {
    const watchFiles = ['.html', '.hbs'];

    compiler.plugin('done', () => {
      const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);

      if (
        this.hot &&
        changedFiles.some(filePath => watchFiles.includes(path.parse(filePath).ext))
      ) {
        server.sockWrite(server.sockets, 'content-changed');
      }
    });
  }
}

And for simple static files watching we again can use before and chokidar, or watchContentBase. Though probably in the future it would be worth to include all this within webpack-dev-server.

I guess for now even this proposed minimal change can't be added because it may qualify as a "new feature", and there is a maintenance mode happening. Hope this will be resolved sooner or later...

---

The only concern is this quote from CONTRIBUTING.md, as my custom handler using compiler.watchFileSystem:

A user should not try to implement stuff that accesses the webpack filesystem. This lead to bugs (the middleware does it while blocking requests until the compilation has finished, the blocking is important).

[ripeshade]

devServer: {
    contentBase: path.join(__dirname, 'src'),
    watchContentBase: true,
    hot: true,
  }

Maybe, it's some sort of a solution.